サイト全体でlightbox2が利用できるようにする
サイト全体でlightbox2が利用できるようにする
msg# 1
- depth:
- 0
前の投稿
-
次の投稿
|
親投稿
-
子投稿なし
|
投稿日時 2018/12/8 16:05 | 最終変更
タツ
投稿数: 2447
投稿数: 2447
今まで各モジュールごとに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が利用できるようにします。
また、bbコードの記述が反映されるようにhtml/preload/lightbox.class.phpを設置または変更します。
ここを参考に
3.各モジュールの記事内でlightbox2に反映できるようにテンプレートを変更します。
・Gnaviモジュール 上記リンク記事を参考にしてください。
・d3forumモジュール 参考リンク
・myalbumモジュールについては以下の通りです。
myalbumのテンプレートmyalbum_photo.htmlを修正
の箇所を
また、ページ内でlightboxが反映するようにするためには
同じくmyalbumのテンプレートmyalbum_photo.htmlを修正
さらに、picoモジュールで反映させるためには
テンプレート pico_main_viewcontent.htmlを以下のように修正する必要があります。
と変更する必要があります。
※参考
原則として各モジュールのテンプレートは、lightboxを途中から設置した場合、以前のフォトにタイトルを設置していなければ、以下のようにすればページタイトルをタイトルとして扱えます。また、記事にタイトルを記載すればそのタイトルが優先されます。
これからタイトルを挿入し、以前のフォトタイトルは必要ない場合、は次のようにします。
そもそも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'"}>
投票数:22
平均点:5.45
投稿ツリー
-
サイト全体でlightbox2が利用できるようにする
(タツ, 2018/12/8 16:05)
