Re: Gnaviモジュールlightbox2への改良
Re: Gnaviモジュールlightbox2への改良
msg# 1.1
タツ
投稿数: 2450
投稿数: 2450
さらにbbコードを使ってlightboxの各画像にタイトルを付ける
従来のlightboxではbbコードで各ページのグループ化された個々の画像にタイトルを付けることができませんでした。どうしてもbbコードで個々の画像にタイトルをつけたかったのでさらに改良を加えられたlightbox2を採用しタイトルを付けることができるようにしてみました。その備忘録です。
1.サイト内全体でlightbox2用のbbコードが利用できるようhtml/preload/lightbox.class.phpを次のように変更しました。因みにlightbox2ではdata-lightbox="○○"でグループ化され、data-title="○○"で写真のタイトルが設定されます。
2.Gnaviのテンプレートを編集する
gnaviモジュール名_itemheader.htmlの内容を編集します。<{* DESCRIPTION *}>の詳細記事内にある各画像はlightboxの要素（data-lightbox="ページタイトル"）としてグループ化します。また各画像のタイトルもデフォルトでそのページのタイトルを各画像に設定（data-title="ページタイトル"）します。
<{$photo.description}>の部分
3.lightbox2を使うためのbbコード記述方法
デフォルトではページ内の画像タイトルにはページタイトルが設定されていますが、さらに個別の画像のタイトルを設定変更する方法です。
[url=httpから画像までのURL（*.jpg）title=画像のタイトル][[img]画像まで絶対URLまたは相対URL[/img][/url]
あるいは
[siteurl=サイトのURL（例:https://sample.com/）を省略した画像までのURL（*.jpg） title=画像のタイトル][siteimg]サイトのURL（例:https://sample.com/）を省略した画像までのURL[/siteimg][/siteurl]
となります。
※ただし、タイトル（title=）の中に半角の空白またbbコードの中では全角空白）を入れることはできません。もし、「title=画像のタイトル」の部分を省略した場合はページタイトルがタイトルとして表示されます。
因みに私は普通サイズのものをhtml/uploads/gnaviモジュール名/test.jpgにリサイズしたものをhtml/uploads/gnaviモジュール名/resize/test.jpgに2枚を用意しています。（ページ読み込みのロスが少ないかと。。。）
従って記述するときは
[url=https://ドメイン/uploads/gnaviモジュール名/test.jpg title=テスト画像][img]../../uploads/gnaviモジュール名/resize/test.jpg[/img][/url]
のようにしています。どちらかというとsiteurl、siteimgを利用したほうがコードは短く済みます。
4.bbコードで画像を小さくリサイズする場合
もし、bbコードにて1枚の画像を小さくリサイズしてそれをlightboxに利用するのであればbbコードでリサイズする必要があります。そのままbbコードではリサイズできないので、上記のhtml/preload/lightbox.class.phpの並びに以下を追加します。
これで、[img]../../uploads/gnaviモジュール名/resize/test.jpg,320（幅の数字）,160（高さの数字）[/img]
のようにbbコードで幅と高さを記述すればリサイズして表示することができます。
5.htmlで記述する場合は
となります。これでグループ化された画像に個別にタイトルが入ります。また、タイトルを記述しない場合、以前と同様にタイトルにはそのページタイトルが入ります。
従来のlightboxではbbコードで各ページのグループ化された個々の画像にタイトルを付けることができませんでした。どうしてもbbコードで個々の画像にタイトルをつけたかったのでさらに改良を加えられたlightbox2を採用しタイトルを付けることができるようにしてみました。その備忘録です。
1.サイト内全体でlightbox2用のbbコードが利用できるようhtml/preload/lightbox.class.phpを次のように変更しました。因みにlightbox2ではdata-lightbox="○○"でグループ化され、data-title="○○"で写真のタイトルが設定されます。
<?php
//================================================================
// Lightbox Preload
// by photosite, http://www.photositelinks.com/
//================================================================
if (!defined('XOOPS_ROOT_PATH')) exit();
class Lightbox extends XCube_ActionFilter
{
function preBlockFilter()
{
$this->mRoot->mTextFilter->mMakeXCodeConvertTable->add(array(&$this, 'bbcode'), XCUBE_DELEGATE_PRIORITY_1);
}
function bbcode(&$patterns, &$replacements)
{
// [url] tag for lightbox2
$patterns[] = "/\[url=(['\"]?)(http[s]?:\/\/[^\s\"'<>]*)(['\"]?) title=(['\"]?)([^\s\"'<>]*)(['\"]?)\]([^\s]*)(.*)\[\/url\]/sU";
$replacements[0][] = $replacements[1][] = '<a href="\\2" data-title="\\5" data-lightbox="" target="_blank" >\\8</a>';
// [siteurl] tag for lightbox2
$patterns[] = "/\[siteurl=(['\"]?)([^\s\"'<>]*)(['\"]?) title=(['\"]?)([^\s\"'<>]*)(['\"]?)\]([^\s]*)(.*)\[\/siteurl\]/sU";
$replacements[0][] = $replacements[1][] = '<a href="'.XOOPS_URL.'/\\2" data-title="\\5" data-lightbox="" target="_blank">\\8</a>';
// [img] tag for lightbox2
$patterns[] = "/\[url=(['\"]?)(http[s]?:\/\/[^\"'<>]*)\\1]\[img(.*)\[\/img\]\[\/url\]/sU";
$replacements[0][] = $replacements[1][] = '<a href="\\2" rel="lightbox" target="_blank">[img\\3[/img]</a>';
// [siteimg] tag for lightbox2
$patterns[] = "/\[siteurl=(['\"]?)([^\"'<>]*)\\1]\[siteimg(.*)\[\/siteimg\]\[\/siteurl\]/sU";
$replacements[0][] = $replacements[1][] = '<a href="'.XOOPS_URL.'/\\2" rel="lightbox" target="_blank">[siteimg\\3[/siteimg]</a>';
}
}
?>
2.Gnaviのテンプレートを編集する
gnaviモジュール名_itemheader.htmlの内容を編集します。<{* DESCRIPTION *}>の詳細記事内にある各画像はlightboxの要素（data-lightbox="ページタイトル"）としてグループ化します。また各画像のタイトルもデフォルトでそのページのタイトルを各画像に設定（data-title="ページタイトル"）します。
<{$photo.description}>の部分
- <{$photo.description}>
↓
+ <{$photo.description|replace:'data-lightbox=""':"data-lightbox='$xoops_pagetitle'"|replace:'rel="lightbox"':"data-title='' data-lightbox='$xoops_pagetitle'"}>
3.lightbox2を使うためのbbコード記述方法
デフォルトではページ内の画像タイトルにはページタイトルが設定されていますが、さらに個別の画像のタイトルを設定変更する方法です。
[url=httpから画像までのURL（*.jpg）title=画像のタイトル][[img]画像まで絶対URLまたは相対URL[/img][/url]
あるいは
[siteurl=サイトのURL（例:https://sample.com/）を省略した画像までのURL（*.jpg） title=画像のタイトル][siteimg]サイトのURL（例:https://sample.com/）を省略した画像までのURL[/siteimg][/siteurl]
となります。
※ただし、タイトル（title=）の中に半角の空白またbbコードの中では全角空白）を入れることはできません。もし、「title=画像のタイトル」の部分を省略した場合はページタイトルがタイトルとして表示されます。
因みに私は普通サイズのものをhtml/uploads/gnaviモジュール名/test.jpgにリサイズしたものをhtml/uploads/gnaviモジュール名/resize/test.jpgに2枚を用意しています。（ページ読み込みのロスが少ないかと。。。）
従って記述するときは
[url=https://ドメイン/uploads/gnaviモジュール名/test.jpg title=テスト画像][img]../../uploads/gnaviモジュール名/resize/test.jpg[/img][/url]
のようにしています。どちらかというとsiteurl、siteimgを利用したほうがコードは短く済みます。
4.bbコードで画像を小さくリサイズする場合
もし、bbコードにて1枚の画像を小さくリサイズしてそれをlightboxに利用するのであればbbコードでリサイズする必要があります。そのままbbコードではリサイズできないので、上記のhtml/preload/lightbox.class.phpの並びに以下を追加します。
// [img] tag for resize
$patterns[] = "/\[img\]([^\"\(\)\?\&'<>,]*),(\d+),(\d+)\[\/img\]/sU";
$replacements[0][] = $replacements[1][] = '<img src="\\1" width="\\2" height="\\3" alt="" /></a>';のようにbbコードで幅と高さを記述すればリサイズして表示することができます。
5.htmlで記述する場合は
<a href="https://ドメイン/uploads/gnaviモジュール名/test.jpg" data-title="画像のタイトル" data-lightbox="ページタイトル"><img src="https://ドメイン/uploads/gnaviモジュール名/resize/test.jpg" alt="" ></a>
投票数:23
平均点:5.22
投稿ツリー
-
Gnaviモジュールlightboxの改良
(タツ, 2015/6/3 6:56)
-
Re: Gnaviモジュールlightbox2への改良
(タツ, 2017/2/23 21:04)
-
Re: Gnaviモジュールlightbox2への改良
(タツ, 2019/8/30 8:53)
-
-
