サイト全体でlightbox2が利用できるようにする

  • このフォーラムに新しいトピックを立てることはできません
  • このフォーラムではゲスト投稿が禁止されています

投稿ツリー




前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2018/12/8 16:05 | 最終変更
タツ  管理人   投稿数: 2389 オンライン
今まで各モジュールごとにlightboxの利用する仕様にしていましたが、この度、画像掲示板のモジュールも利用できるようにしたこともあり利用するモジュールが増えたのでサイト全体でlightbox2が利用できるようにするようにしてみました。

そもそもlightboxとは画像をクリックすると画面が浮かび上がってくるというjQueryを利用したソフトで色々なところでよく利用されています。まずは、lightbox2を公式サイトからダウンロードし、必要なファイルを設置します。


1.html/themes/利用しているテーマフォルダ/内にCSSフォルダ、jsフォルダ、CSSフォルダを作成し、それぞれ
 ・imgフォルダ内の各ファイル
  →html/themes/利用しているテーマフォルダ/imagesのフォルダ内に保存
 ・js/lightbox.min.js 
  →html/themes/利用しているテーマフォルダ/js/lightbox.min.js
 ・css/lightbox.css
  →html/themes/利用しているテーマフォルダ/css/lightbox.css
に設置します。ただし、この方法だとthemeを変更すると利用できなくなってしまいます。themeをよく変更するのであればhtml/commonフォルダに設置するのが望ましいと思われます。

2.利用しているテーマのthemes.htmlのhead内に追記しサイト全体でlightboxが利用できるようにします。
<head>
~
<script src="js/jquery-1.11.0.min.js"></script>(必要な場合のみ、既に設置されている場合は不要)
<link rel="stylesheet" property="stylesheet" href="<{$xoops_imageurl}>css/lightbox.css" type='text/css' media="all" />
<script async src="<{$xoops_imageurl}>js/lightbox.min.js"></script>
~
</head>

また、bbコードの記述が反映されるようにhtml/preload/lightbox.class.phpを設置または変更します。
ここを参考に

3.各モジュールの記事内でlightbox2に反映できるようにテンプレートを変更します。
・Gnaviモジュール 上記リンク記事を参考にしてください。
・d3forumモジュール 参考リンク
・myalbumモジュールについては以下の通りです。
 
myalbumのテンプレートmyalbum_photo.htmlを修正
<a href="<{$photo.ahref_photo}>" target="_blank" onClick="window.open('<{$photo.ahref_photo}>','','width=<{$photo.window_x}>,height=<{$photo.window_y}>');return(false);"><img src="<{$photo.imgsrc_photo}>" border="0" align="center" vspace="3" hspace="7" alt="<{$photo.title}>" title="<{$photo.title}>" <{$photo.width_height}> /></a>
の箇所を
 
<a href="<{$photo.ahref_photo}>" rel="lightbox" data-lightbox="<{$xoops_pagetitle}>" data-title="<{$xoops_pagetitle}>"><img src="<{$photo.imgsrc_photo}>" border="0" align="center" vspace="3" hspace="7" alt="<{$photo.title}>" title="<{$photo.title}>" <{$photo.width_height}> /></a>

また、ページ内でlightboxが反映するようにするためには
同じくmyalbumのテンプレートmyalbum_photo.htmlを修正
<{$photo.discription}>の部分を
↓
<{$photo.description|replace:'data-lightbox=""':"data-lightbox='$xoops_pagetitle'"|replace:'rel="lightbox"':"data-title='' data-lightbox='$xoops_pagetitle'"}>

さらに、picoモジュールで反映させるためには
テンプレート pico_main_viewcontent.htmlを以下のように修正する必要があります。
<{$content.body}>の部分を
  ↓
<{$content.body|replace:'data-lightbox=""':"data-lightbox='$xoops_pagetitle'"|replace:'rel="lightbox"':"data-title='' data-lightbox='$xoops_pagetitle'"}>
と変更する必要があります。

※参考
原則として各モジュールのテンプレートは、lightboxを途中から設置した場合、以前のフォトにタイトルを設置していなければ、以下のようにすればページタイトルをタイトルとして扱えます。また、記事にタイトルを記載すればそのタイトルが優先されます。
<{$モジュール内の記事|replace:'data-lightbox=""':"data-lightbox='$xoops_pagetitle'"|replace:'rel="lightbox"':"data-title='$xoops_pagetitle' data-lightbox='$xoops_pagetitle'"}>
これからタイトルを挿入し、以前のフォトタイトルは必要ない場合、は次のようにします。
<{$モジュール内の記事|replace:'data-lightbox=""':"data-lightbox='$xoops_pagetitle'"|replace:'rel="lightbox"':"data-title='' data-lightbox='$xoops_pagetitle'"}>
 
投票数:21 平均点:5.71



     条件検索へ

旅と気ままなフォーラム最新投稿

欲しい商品が必ず見つかるメジャーなネットショップ

ログイン

Facebook,RSSリンク表示

検索

アクセスカウンタ

今日 : 1102
昨日 : 575
総計 : 1620862