Gnaviモジュールlightboxの改良

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

投稿ツリー




前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2015/6/3 6:56 | 最終変更
タツ  管理人   投稿数: 2400 オンライン
Gnaviモジュールについて、以前、「Lightbox & Videobox preload for XOOPS Cube Legacy 2.1」を導入し、記事詳細内の画像にもLightboxが利用できるようになっていました。
しかし、HTML5に対応していない為、携帯で見ると画像が適正に処理されていません。もともと記事に掲載可能な3画像までは順番に見ることができますが、記事詳細に掲載されている画像に関してはグループ化されていないので1枚ずつしかLightboxを利用できませんでした。

今回、改良した点は、
・ページごとに掲載された画像を全てをグループ化し順番に見ることができるようにすること。
・携帯で見ても画面内に画像が収まること。
の2点について自分で可能な限り改変してみました。その手順について備忘録として掲載します。

1.lightbox2を公式サイトからダウンロードします。

2.解凍し、必要なファイルを取り出し、Gnaviモジュールのhtml側の各フォルダに保存します。
 ・js/jquery-1.11.0.min.js(これについては既に導入済だったので外しました)
  →html/modules/gnaviモジュール名/js/jquery-1.11.0.min.js(必要な場合)

 ・imgフォルダ内の各ファイル
  →html/modules/gnaviモジュール名/imagesのフォルダ内に保存
 ・js/lightbox.min.js 
  →html/modules/gnaviモジュール名/js/lightbox.min.js
 ・css/lightbox.css
  →html/modules/gnaviモジュール名/css/lightbox.css


3.ダウンロードしたlightbox.cssで利用する画像ファイル(ナビゲーションに利用する画像)はimgフォルダに入っています。これをGnaviモジュールではimagesフォルダに保存しているので、lightbox.css内の画像pathをimg→imagesに編集する必要があります。
 例)url(../img/close.png) → url(../images/close.png)等

4.Gnaviのテンプレートを編集する
 gnaviモジュール名_itemheader.htmlの内容を編集します

・最初の部分

・jquery-1.11.0.min.js(必要な場合のみ)、lightbox.min.jsとlightbox.css、を読み込ませる。
 - <script type="text/javascript" src="js/prototype.js"></script>
 - <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
 - <script type="text/javascript" src="js/lightbox.js"></script>
 - <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 ↓
 + <script src="js/jquery-1.11.0.min.js"></script>(必要な場合のみ)
 + <script src="js/lightbox.min.js"></script>
 + <link rel="stylesheet" property="stylesheet" href="css/lightbox.css" type="text/css" media="all" />

・Gnaviにアップロードされた画像をページタイトルとしてグループ化する

 アップロードされた3枚分の画像名はそのまま利用します
  data-title="<{$photo.caption}>"
  data-title="<{$photo.caption2}>"
  data-title="<{$photo.caption3}>"
 とします。
 アップロードされた3枚分の画像は全てページタイトルとしてグループ化します。
  data-lightbox="<{$xoops_pagetitle}>"

<{* FILE1~3 *}>の部分
- <{if $photo.img==1}><a href="<{$photo.ahref_photo}>" title="<{$photo.caption}>" rel="lightbox"><img src="<{$photo.imgsrc_photo}>" alt="<{$photo.caption}>" <{$photo.width_height}> /></a>
 ↓
+ <{if $photo.img==1}><a href="<{$photo.ahref_photo}>" data-title="<{$photo.caption}>" data-lightbox="<{$xoops_pagetitle}>"><img src="<{$photo.imgsrc_photo}>" alt="<{$photo.caption}>" <{$photo.width_height}> /></a>


- <{if $photo.img1==1}><a href="<{$photo.ahref_photo1}>" title="<{$photo.caption1}>" rel="lightbox"><img src="<{$photo.imgsrc_photo1}>" alt="<{$photo.caption1}>" <{$photo.width_height1}> /></a>
↓
+ <{if $photo.img1==1}><a href="<{$photo.ahref_photo1}>" data-title="<{$photo.caption1}>" data-lightbox="<{$xoops_pagetitle}>"><img src="<{$photo.imgsrc_photo1}>" alt="<{$photo.caption1}>" <{$photo.width_height1}> /></a>



- <{if $photo.img2==1}><a href="<{$photo.ahref_photo2}>" title="<{$photo.caption2}>" rel="lightbox"><img src="<{$photo.imgsrc_photo2}>" alt="<{$photo.caption2}>" <{$photo.width_height2}> /></a>
↓
+ <{if $photo.img2==1}><a href="<{$photo.ahref_photo2}>" data-title="<{$photo.caption2}>" data-lightbox="<{$xoops_pagetitle}>"><img src="<{$photo.imgsrc_photo2}>" alt="<{$photo.caption2}>" <{$photo.width_height2}> /></a>


・<{* DESCRIPTION *}>の詳細記事内に掲載された画像をページタイトルとしてグループ化する

<{$photo.description}>の部分
 - <{$photo.description}>
↓
 + <{$photo.description|replace:'data-lightbox=""':"data-lightbox='$xoops_pagetitle'"|replace:'rel="lightbox"':"data-title='' data-lightbox='$xoops_pagetitle'"}>

5.以下のコードをテキストファイルに保存し、Lightbox.class.phpとしてhtml/preloadの中に設置します。サイトのpreloadに設置すればbbコードでlightboxが利用できるようになります。




以上
投票数:17 平均点:5.29
前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2017/2/23 21:04 | 最終変更
タツ  管理人   投稿数: 2400 オンライン
さらにbbコードを使ってlightboxの各画像にタイトルを付ける従来のlightboxではbbコードで各ページのグループ化された個々の画像にタイトルを付けることができませんでした。どうしてもbbコードで個々の画像にタイトルをつけたかったのでさらに改良を加えられたlightbox2を...詳細を見る!
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2019/8/30 8:53 | 最終変更
タツ  管理人   投稿数: 2400 オンライン
lightbox2利用の際、bbコードでsiteimgを利用すると<img src="*******" align="" width="" height="" alt="" title="">とalt=""以外は意図していない「align="" width=""...詳細を見る!



     条件検索へ

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

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

ログイン

Facebook,RSSリンク表示

検索

アクセスカウンタ

今日 : 97
昨日 : 654
総計 : 1628195