2011.4.11 追記:
現在、画像の拡大表示には FancyBox を使っています。

この投稿が役に立つという方はかなり少数だと思いますが
検索しまくってやっと解決方法が見つかったので情報として載せておきます。
長時間検索して、「 コレだっ !!」 っていうのが見つかるとうれしいですよね。
そんな喜びをご提供したいと思いまして :ase:

prototype版Lightbox   jQuery版Lightbox
Lightbox 2 から jQuery lightBox plugin 0.5 へ


序章

Lightboxリニューアル前に写真集のページで使っていた Lightbox (ページ全体が暗くなって中央に写真が表示されるエフェクト・右の画像参照) は WordPressプラグイン :: Lightbox2 prototype 版だったのですが、他のプラグインとの相性なのか、ちょっとヘンな動きをする時があったのでリニューアルついでに jQuery 版 Lightbox に入れ替えようと作業に取りかかりました。

作りは一緒なので入れ替え作業自体は簡単なのですがひとつだけ違う点がありまして、
それは、、、


「 jQuery 版の Lightbox は同一ページ上にあるグループ分けした 2 つの Gallery をひとつのグループとして扱ってしまう 」


百聞は一見にしかず、まず元祖 prototype 版の Lightbox をご覧ください。

Demo : Lightbox2

prototype 版の Lightbox では前者を rel="lightbox[images1]" 、後者を rel="lightbox[images2]" と指定しておけば、別々のグループ (Set) として扱われます。
(3 枚の画像を見たのち、一旦 Lightbox を閉じて別グループの 3 枚の画像を見てもらえるということ)

ところが、 jQuery 版 Lightbox は rel="lightbox[images1]" と rel="lightbox[images2]" と別のグループ (set) として指定してあるにも関わらず連続した 6 枚のGallery となってしまいます (別々に見せたいのだけれど rel="lightbox[●●●]" の指定ではグループ分けできないということ)

Demo : jQuery lightbox plugin 0.5


注) prototype 版からの移行なので rel="lightbox[●●●]" の記述は削除せず、また一切編集せずということが前提になっています。 合わせて、画像管理に NextGEN Gallery を使用しているという背景もあります。NextGEN Gallery 側で rel="lightbox[●●●]" の部分を簡単に rel="lightbox-●●●" と書き換えられるのですが、グループ分けできなければ意味がないのです。


それじゃまずい

ご覧いただいた Demo のようにサムネイルがすぐ近くに並んでいれば、「あっ、この写真はさっき見たな」 とわざわざクリックすることもなくスルーしてもらえると思いますが、やたら縦に長いページの一番上と、スクロールしないと見られない一番下にサムネイル (Gallery) を載せ、別々の Gallery として見せようとしていた場合、テーマがまったく違う写真が連続して表示されてしまい意味が伝わらない Gallery となってしまう可能性があります。

また、今回のリニューアルでは写真集内の右サイドバーにランダムに入れ替わる 6 枚の写真を配したページを作ったのですが、その写真の拡大に Lightbox を使っているため、本文のほうにも Lightbox を利用した Gallery を載せているページでは、主となる本文中の Gallery と、味付けとして載せているサイドバーの Gallery が同列で扱われてしまい、非常にトンチンカンな印象を受ける Gallery になってしまうことがわかりました。

たとえば The Bale の Tacogle Earth のページは合計 4 つの Lightbox Gallery が載っていまして、最初にサイドバーの写真をクリックしてしまうとページ下のほうに載っている関連しない写真まで連続で見せてしまうという状態になります。


そこからです 「どこかに絶対同じようなことを思っている人がいるはずだ!!」 と
私の検索の旅がはじまったのは。。。 :run:


ちなみに WordPress プラグインの 「jquery-lightbox-balupton-edition」 を使えば jquery 版 Lightbox で同一ページ上でのグループ分けができるのですが、画像上にマウスカーソルを載せないと (画像上のマウスカーソルを動かさないと) キャプションが表示されないという仕様で、一時的に利用してみたもののなじめず再びネット流浪の旅に出たという経緯があります。


ストライクゾーンど真ん中の記事がみつかる

日本のサイトでは 「jQuery 版 Lightbox は同一ページ内でグループ分けできない」 と言ったような投稿も見つけちょっと意気消沈 :down: 、しかしあきらめきれず、数日間キーワードをいろいろと変えて海外のサイトを検索していたらありました :wa-i:

どうもありがとう。
上記のサイトに載っているようにモディファイしたところ jQuery lightBox plugin 0.5 でも同一ページ上でグループ分けできました。

私の探し求めていたのはコレだっ!!

Demo


jQuery lightBox plugin 0.5 :: 同一ページ上で Gallery (Set) をグループ分けするには

まずは jQuery lightBox plugin 0.5 をダウンロードする必要があります。
jQuery lightBox plugin 0.5 オフィシャルサイト からどうぞ。

モディファイのポイントだけ載せておきますと、jquery.lightbox-0.5.js を編集ソフトで開き (↓拡大可)

jquery.lightbox-0.5.js編集するところ

79 行目 ～ 83 行目の

// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references		
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
	settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
	}
}

を

// Add an Array (as many as we have that match the objClicked 'rel' attr), with href and title atributes, inside the Array that storage the images references		
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
	if(jQueryMatchedObj[i].getAttribute('rel')==objClicked.getAttribute('rel')) {
		settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
		}
	}
}

に差し替え、<head> 内に直接記述する script は 

<script type="text/javascript">
	$(function() {
	$('a[rel^=lightbox]').lightBox();
});
</script>

と書きなさいというものでした。

ちなみにデフォルトの

<script type="text/javascript">
	$(function() {
	$('a[@rel*=lightbox]').lightBox();
});
</script>

でも動作はしました。。。詳しいことはわからないのですが :ase:
私はいちおう書かれていたとおりにしています。

このモディファイ、Javascript に詳しい方なら簡単なのでしょうか？難しいのでしょうか？
そのあたりも私にはまったくわかりません :mu-n:


やっぱり、どうでもいい投稿でしたでしょ :poripori:
ここまで読む人がいるかどうかも疑問な投稿でした(笑)
それでは、すてきな週末を。。。

12月17日：6個中2個 第476回抽選結果（みずほ銀行）
今年もダメそうだな :down:

Monologue, WordPress , 11 25,164 views

関連しているかもしれない投稿