メニュー(スマホは左の Hamburger_icon より)

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

このトピックの投稿一覧へ


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

msg# 1
depth:
0
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2018/12/8 16:05 | 最終変更
タツ  管理人   投稿数: 1943
今まで各モジュールごとに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とmyalbum_photo.htmlを修正
<{$photo.discription}>の部分を
↓
<{$photo.description|replace:'data-lightbox=""':"data-lightbox='$xoops_pagetitle'"|replace:'rel="lightbox"':"data-title='$xoops_pagetitle' data-lightbox='$xoops_pagetitle'"}>
と変更する必要があります。
投票数:0 平均点:0.00

投稿ツリー

  条件検索へ


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


Facebook,RSSリンク表示


RSSicon 最新記事のRSS

旅と気ままなフォーラムメニュー

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

旅行メジャーサイト簡素リンク

このサイト内の検索

オンライン状況

32 人のユーザが現在オンラインです。 (2 人のユーザが 旅と気ままなフォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 32

もっと...