prototype版LihgtboxからjQuery版Lightboxへの移行

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 をご覧ください。

[button link="http://www.photoclip.net/wp-content/uploads/lightbox2-jQuery/lightbox-prototype/" style="large light-blue" target="_blank"]Demo[/button] : 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[●●●]" の指定ではグループ分けできないということ)

[button link="http://www.photoclip.net/wp-content/uploads/lightbox2-jQuery/lightbox-jquery/" style="large light-blue" target="_blank"]Demo[/button] : 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 でも同一ページ上でグループ分けできました。

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

[button link="http://www.photoclip.net/wp-content/uploads/lightbox2-jQuery/lightbox-jquery-kai/" style="large light-blue" target="_blank"]Demo[/button]


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:

コメント

  1. paruparu より:

    はじめまして。 私もつい先日 Lightbox JS (旧バージョン) から jQuery lightBox に変更したばかりなのですが、同じことを感じていたので、こちらの記事は とても参考になりました。 まだ どちらにするかは検討中なのですが。。。
    貴重な情報をありがとうございました。

  2. 象支店長 より:

    :reply: paruparu さん

    はじまめして。

    jQuery 版 Lightbox のグループ (Set) の扱い方は
    大半の方にとってはまったく問題にならないことだと思うのですが
    同じようなことを感じる方が私のほかにも必ずいるはずだと思い
    投稿としてまとめておきました。

    参考にしていただいたようでなによりです。

    コメントをいただきましてどうもありがとうございました。

  3. paruparu より:

    色々テストしてみて気付いたのですが、この方法は 同じページ内の lightBox が

    rel=”lightbox” rel=”lightbox[aaa]”  rel=”lightbox[aaa]”

    rel=”lightbox[aaa]”  rel=”lightbox[aaa]” rel=”lightbox” rel=”lightbox[bbb]”  rel=”rlghtbox[bbb]”
    だと期待通りに機能してくれますが

    rel=”lightbox” rel=”lightbox[aaa]” rel=”lightbox[aaa]” rel=”lightbox”

    rel=”lightbox” rel=”lightbox” rel=”lightbox”
    のような場合だと、rel=”rightbox” もグループ化されてしまうようです。

    私のブログの場合、エントリー,カテゴリー,検索etc 複数のエリアで lightBox を使っているので、となると...
    1つで表示したいものにも、全てグループ名を入れておくというのが安全なのでしょうか??
    これまでが Lightbox JS(旧バージョン) で 全てrel=”lightbox” だけの指定にしてあるので、どうしようか考えどころです。

  4. 象支店長 より:

    :reply: paruparu さん

    こんにちは。

    Lightbox JS を利用して拡大表示させている画像の枚数 (量) にもよりますが
    移行するのであれば rel=”lightbox の後ろに [●●●] を付与しておいたほうが
    いいような気がします。

    paruparu さんのブログ環境がどのようになっているのかわからないので
    (、、、おそらくわかっても私はわからないと思いますが (苦笑))
    jQuery lightBox plugin 0.5 の場合、
    ひとグループとして見せたい画像群を
    <div id=”gallery”> ~ </div> で囲ったりする方法もあるので
    移行するのであればそのあたりをうまく利用して
    一番楽な移行を模索するのがいいような気がします。

    適用させている画像の量が多いとこのテの移行は苦労しますよね。

    私自身、以前はすべて手作業で行っていましたが
    WordPressでサイトを管理するようになってからは
    利用しているプラグインが自動 (カスタマイズも可能) で
    rel= 部分を付与してくれるので助かっています。

  5. paruparu より:

    象支店長さん、ありがとうございました。
    その後も裏で色々テストしてみたところ、(私の使い方の場合、殆どが1枚ずつ表示で良いので) グループ名を付けて
    rel=”lightbox[a]“ rel=”lightbox[b]“ rel=”lightbox[b]” rel=”lightbox[c]“ rel=”llghtbox[d]” とし、こちらのような使い方をするよりは、
    元のソースのままで 「毎回閉じて」 使用した方が、1枚目→2枚目… を読み込む時の待ち時間が若干短くなるようなのです。

    完全に同じ条件でテストした訳ではないので感覚的な部分もありますが、最初のソースのものだと、2枚目→3枚目は(閉じても)読み込みが速いのですが、1枚目→2枚目, 3枚目→4枚目の表示には、少し余計に時間が掛るような。。。

    jQuery版 lightBox は画面中央をクリックすれば閉じることができるので、この 「閉じることができる領域を広げて(次へをあまり使用しない状態にして)」 しばらく様子をみてみようかなと思っています。
    奥が深いので、今回もすっかりハマってしまいました :ase:

  6. 象支店長 より:

    :reply: paruparu さん

    こんにちは。

    Lightbox 関連は自分のサイトに合った使い方を探り始めると
    ハマっちゃいますよね。私もいつもそうです ::-D:
    ちょっと前にサイトをリニューアルしたのですが
    あーでもない、こーでもないと、相当時間を費やしました。
    そのうちまたいじくりまわしたくなるような気がしますが
    私のほうはしばらく今の状態で使ってみようと思っています。

    ご報告どうもありがとうございました :aisatu:
    今後ともよろしくお願いします。

  7. miho より:

    :thumb-up:

    はじめまして。

    象支店長ありがとーーー!!すっごく助かりました。
    私も全く同じことで悩んでおりました。
    この記事のお陰で、私は3分でネットからこの解答を拾いあげることができました。
    象支店長ありがとーーー!!すっごく助かりました。

    • 象支店長 より:

      miho さん、はじめまして。

      「ありがと」のあとの 「--- ! ! 」を拝見すると
      この記事を投稿した甲斐があったというものです ::-D:

      こちらこそ 「 コメントありがと--- ! ! 」 :zou:

  8. しまうま より:

    象支店長様 :wa-i: :hakushu:
    ありがとうございます :!!: :!!:

    まさに、これを探しておりました :!!:

    やっぱりグルーピングしてないと変ですよね、本当に助かりました :hakushu: :hakushu:

    • 象支店長 より:

      しまうまさん

      はじめまして。
      この投稿がストライクゾーンへの投稿だったようでよかったです。

      コメントを残していただきましてどうもありがとうございました。
      明日へのヤル気につながります :aisatu:

  9. […] ▼参考サイト prototype版LihgtboxからjQuery版Lightboxへの移行 […]

タイトルとURLをコピーしました