Lightboxのグループをループさせる。

Lightbox 2を使用しているのですが、
グループに指定した画像をループさせることは可能でしょうか。

http://lokeshdhakar.com/projects/lightbox2/

1つめの画像の「prev」をクリックで、最後の画像を表示、
最後の画像の「next」をクリックで1つ目の画像を表示させたいです。

javascriptは書かれていることはだいたいわかるのですが、
新規に自分で何かを作ったりカスタマイズしたりするほどの知識がありませんので、
具体的に教えて頂けると有難いです。

お手数ですが、ご存知の方宜しくお願いします。

No.3 ベストアンサー 回答者： my-- 回答日時： 2012/03/14 12:00

jquery.lightbox-0.5.js

/**
* Display the button navigations
*
*/
// _set_navigation関数
function _set_navigation() {
$('#lightbox-nav').show();

// Instead to define this configuration in CSS file, we define here. And its need to IE. Just.
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({
'background': 'transparent url(' + settings.imageBlank + ') no-repeat'
});

// Show the prev button, if not the first image in set
// グループ化（画像が2以上）
if (settings.imageArray.length > 1) {
if (settings.fixedNavigation) {
$('#lightbox-nav-btnPrev').css({
'background': 'url(' + settings.imageBtnPrev + ') left 15% no-repeat'
}).unbind().bind ('click', function () {
var imageNum = settings.activeImage - 1;
// imageNumループ
if (imageNum < 0) imageNum = settings.imageArray.length - 1;
settings.activeImage = imageNum;
_set_image_to_view();
return false;
});
}
else {
// Show the images button for Next buttons
$('#lightbox-nav-btnPrev').unbind().hover(function () {
$(this).css({
'background': 'url(' + settings.imageBtnPrev + ') left 15% no-repeat'
});
}, function () {
$(this).css ({
'background': 'transparent url(' + settings.imageBlank + ') no-repeat'
});
}).show().bind('click', function () {
var imageNum = settings.activeImage - 1;
// imageNumループ
if (imageNum < 0) imageNum = settings.imageArray.length - 1;
settings.activeImage = imageNum;
_set_image_to_view();
return false;
});
}
}

// Show the next button, if not the last image in set
// グループ化（画像が2以上）
if (settings.imageArray.length > 1) {
if (settings.fixedNavigation) {
$('#lightbox-nav-btnNext').css({
'background': 'url(' + settings.imageBtnNext + ') right 15% no-repeat'
}).unbind().bind('click', function () {
var imageNum = settings.activeImage + 1;
// imageNumループ
if (imageNum > settings.imageArray.length - 1) imageNum = 0;
settings.activeImage = imageNum;
_set_image_to_view();
return false;
});
}
else {
// Show the images button for Next buttons
$('#lightbox-nav-btnNext').unbind().hover(function () {
$(this).css({
'background': 'url(' + settings.imageBtnNext + ') right 15% no-repeat'
});
}, function () {
$(this).css({
'background': 'transparent url(' + settings.imageBlank + ') no-repeat'
});
}).show().bind('click', function () {
var imageNum = settings.activeImage + 1;
// imageNumループ
if (imageNum > settings.imageArray.length - 1) imageNum = 0;
settings.activeImage = imageNum;
_set_image_to_view();
return false;
});
}
}
// Enable keyboard navigation
_enable_keyboard_navigation ();
}
// _set_navigation関数ここまで


_set_navigation関数を書き換えて下さい。

やってることは No.1 と同じです。
グループ化されていれば「prev」「next」を常に表示させ
imageNum（添え字）をimageArrayの範囲内でループさせてます。

※ 適当にやってますから、クライアントからクレームが来ないよう、十分注意して下さい。

この回答へのお礼

お礼が遅くなり申し訳ございません。
無事解決に至りました。
大変助かりました。ありがとうございました！

お礼日時：2012/03/20 15:48

No.2 回答者： my-- 回答日時： 2012/03/13 20:33

No.1の「startフラグを置いた制御」は必要なかったかもです。

この回答へのお礼

ありがとうございます！
無事解決出来て喜んでいたのですが…
クライアント様より、
下記のjQueryのものに変更しろと言われてしまいまして…。
http://leandrovieira.com/projects/jquery/lightbox/

せっかくご回答いただいたのに、大変申し訳ございません。
もし、ご面倒でなければ、改めてご享受願えませんでしょうか。
宜しくお願いいたします。

お礼日時：2012/03/14 09:13

No.1 回答者： my-- 回答日時： 2012/03/13 20:02

Lightboxを起動するstartメソッド。

画像を変更するchangeImageメソッド。
「prev」「next」の表示を制御しているupdateNavメソッドの3つを書き換えます。

start: function(imageLink) {
// startフラグ
this.startPhase = true;
$$('select', 'object', 'embed')...
...
}


changeImage: function(imageNum) {
var length = this.imageArray.length;
// imageNumループ
if (!this.startPhase) {
if (imageNum > length - 1) imageNum = 0;
else if (imageNum < 0) imageNum = length - 1;
}
else this.startPhase = false;

this.activeImage=imageNum;//updateglobalvar
...
}


updateNav: function() {

this.hoverNav.show();

// グループ化（画像が2以上）
if (this.imageArray.length > 1) {
this.prevLink.show();
this.nextLink.show();
}

this.enableKeyboardNav();
}


changeImageメソッドはstartメソッドでも呼ばれるので、フラグを置きます。

changeImageメソッドの引数imageNumが画像リストの添え字にあたりますから
startメソッドでの呼出しでなければ、imageArrayの範囲内でループさせます。

updateNavメソッドの方は、グループ化されていれば「prev」「next」を常に表示させます。