Gnaviモジュールlightboxの改良

( 前のトピック | 次のトピック )

ここでは新たな話題の追加投稿はできません。
ここではゲスト投稿が禁止されています

3件表示 (全3件) すべてのコメント一覧へ

投稿ツリー

Gnaviモジュールlightboxの改良 (タツ, 2015/6/3 6:56)

Re: Gnaviモジュールlightbox2への改良 (タツ, 2017/2/23 21:04)

Re: Gnaviモジュールlightbox2への改良 (タツ, 2019/8/30 8:53)

ツリー構造順で表示投稿の新しいものから

Gnaviモジュールlightboxの改良

msg# 1

前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2015/6/3 6:56 | 最終変更

タツ

投稿数: 2057

Gnaviモジュールについて、以前、「Lightbox & Videobox preload for XOOPS Cube Legacy 2.1」を導入し、記事詳細内の画像にもLightboxが利用できるようになっていました。
しかし、HTML5に対応していない為、携帯で見ると画像が適正に処理されていません。もともと記事に掲載可能な３画像までは順番に見ることができますが、記事詳細に掲載されている画像に関してはグループ化されていないので１枚ずつしかLightboxを利用できませんでした。

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

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

２.解凍し、必要なファイルを取り出し、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

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

４.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にアップロードされた画像をページタイトルとしてグループ化する

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

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

<?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 lightbox
		$patterns[] = "/\[url=(['\"]?)(http[s]?:\/\/[^\"'<>]*)\\1 lb=(['\"]?)([^\s]*)\\3 title=(['\"]?)([^\s]*)\\5](.*)\[\/url\]/sU";
		$replacements[0][] = $replacements[1][] = '<a href="\\2" rel="lightbox[\\4]" target="_blank" title="\\6">\\7</a>';
		$patterns[] = "/\[url=(['\"]?)(http[s]?:\/\/[^\"'<>]*)\\1 lb=(['\"]?)([^\s]*)\\3](.*)\[\/url\]/sU";
		$replacements[0][] = $replacements[1][] = '<a href="\\2" rel="lightbox[\\4]" target="_blank">\\5</a>';

		// [siteurl] tag for lightbox
		$patterns[] = "/\[siteurl=(['\"]?)([^\"'<>]*)\\1 lb=(['\"]?)([^\s]*)\\3 title=(['\"]?)([^\s]*)\\5](.*)\[\/siteurl\]/sU";
		$replacements[0][] = $replacements[1][] = '<a href="'.XOOPS_URL.'/\\2" rel="lightbox[\\4]" target="_blank" title="\\6">\\7</a>';
		$patterns[] = "/\[siteurl=(['\"]?)([^\"'<>]*)\\1 lb=(['\"]?)([^\s]*)\\3](.*)\[\/siteurl\]/sU";
		$replacements[0][] = $replacements[1][] = '<a href="'.XOOPS_URL.'/\\2" rel="lightbox[\\4]" target="_blank">\\5</a>';

		// [img] tag for lightbox
		$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 lightbox
		$patterns[] = "/\[siteurl=(['\"]?)([^\"'<>]*)\\1]\[siteimg(.*)\[\/siteimg\]\[\/siteurl\]/sU";
		$replacements[0][] = $replacements[1][] = '<a href="'.XOOPS_URL.'/\\2" rel="lightbox" target="_blank">[siteimg\\3[/siteimg]</a>';
	}
}
?>

以上

投票数:1 平均点:0.00

Re: Gnaviモジュールlightbox2への改良

msg# 1.1

前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2017/2/23 21:04 | 最終変更

タツ

投稿数: 2057

さらにbbコードを使ってlightboxの各画像にタイトルを付ける
従来の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='$xoops_pagetitle' 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>';

これで、[img]../../uploads/gnaviモジュール名/resize/test.jpg,320（幅の数字）,160（高さの数字）[/img]　
のようにbbコードで幅と高さを記述すればリサイズして表示することができます。

5.htmlで記述する場合は

<a href="https://ドメイン/uploads/gnaviモジュール名/test.jpg"  data-title="画像のタイトル" data-lightbox="ページタイトル"><img src="https://ドメイン/uploads/gnaviモジュール名/resize/test.jpg" alt="" ></a>

となります。これでグループ化された画像に個別にタイトルが入ります。また、タイトルを記述しない場合、以前と同様にタイトルにはそのページタイトルが入ります。

投票数:0 平均点:0.00

Re: Gnaviモジュールlightbox2への改良

msg# 1.1.1

前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2019/8/30 8:53 | 最終変更

タツ

投稿数: 2057

lightbox2利用の際、bbコードでsiteimgを利用すると

<img src="*******" align="" width="" height="" alt="" title="">

とalt=""以外は意図していない「align="" width="" height="" title=""」と不要なものが付加されることが分かりました。

html/preload/lightbox.class.phpのbbコード変換の並びに次のコードを追加しました。

	// [siteimg] tag for simple (delete align,width,height,title)
$patterns[] = "/\[siteimg]([^\"\(\)\?\&'<>]*)\[\/siteimg\]/sU";
$replacements[0][] = $replacements[1][] = '<img src="'.XOOPS_URL.'/\\1" alt="" />';

投票数:0 平均点:0.00

3件表示 (全0件) すべてのコメント一覧へ

ツリー構造順で表示投稿の新しいものから

ソロツーリングと気ままな旅

旅と気ままなフォーラム

Gnaviモジュールlightboxの改良

投稿ツリー

Gnaviモジュールlightboxの改良

Re: Gnaviモジュールlightbox2への改良

Re: Gnaviモジュールlightbox2への改良

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

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

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

このサイト内の検索

オンライン状況

Facebook,RSSリンク表示