Ajax LightBoxを使ったサムネイル枚数制限

質問

LightBoxを使ってサムネイル表示をしています。

横に5枚区切りで並べて、6枚目～10枚目までは
下の行に表示されます。

現状ですと、photo内にある画像が
すべてサムネイルで表示されるのですが、
サムネイルで表示される枚数の制限は可能でしょうか？

例えば、画像が35枚あったとして、
1～15枚目を最初に表示します。

サムネイルの下のほうに、→のアイコンを用意して、
そのアイコンをクリックすると、
16～30枚目までが表示され、
←、→のアイコンが表示される。

→をクリックすると31～35枚目までが表示され、
←をクリックすると1～15枚目に戻るといった感じです。

アイコンもURLのリンクではなく、
ページ自体は遷移せずにサムネイルのみが変更されるように
したいと思っているのですが、
これは可能なのでしょうか？

省略していますが、
以下がコードです。

window.onload = function () {
var url = "getfilelist.cgi?cache="+(new Date()).getTime();
new Ajax.Request(url, { method: "get", onComplete:printTag });
}

function printTag(httpObj) {
var LF = String.fromCharCode(10);
var list = httpObj.responseText.split(LF);
var result = "";
for (var i=0; i<list.length-1; i++) {
result += '<a href="photo/'+list[i]+'" rel="lightbox[flower]" title=""><img src="thumbnail/'+list[i]+'"></a>'+(((i+1) %5 == 0)?"<br/>":"");
}

$("slide").innerHTML = result;
initLightbox();
}

回答No.2

talepanda · ベストアンサー

＃１のヒントでここまで書けるなら、聞く前に自分で書いて試してみましょう^^;

＞最後の画像の次にphotoフォルダを参照してしまいます。
＞どうも空が入ってしまっているような気がします。

この意味がちょっと良くわかりませんが（photoフォルダって?、最後の画像の次って?）、直すとすれば、

var result = "";
for (var i = 0; i < list.length; i++) {
result += '<a href="photo/'+list[i]+'" rel="lightbox[flower]" title=""><img src="thumbnail/'+list[i]+'"></a>'+(((i+1) %5 == 0)?"<br/>":"");
if(i > 0 && (i+1) %15 == 0) {
thumbnail.push(result);
result = "";
}

}
if ("" != result) {
thumbnail[x].push(result);
}

かな？

forループを抜けるときに、i%15==0以外だと、xがインクリメントされないので、そのあとの
if ("" != result) {
thumbnail[x] = result;
}
は最後から一個手前のresultを最後の（１５枚未満のサムネイルの）resultで上書きしてしまうことになりますよね。

それが、冒頭の問題と関係するのかよくわかりませんが。

お礼

解決いたしました。

いろいろとありがとうございました。

回答No.1

talepanda

＞サムネイルで表示される枚数の制限は可能でしょうか？
可能です。

＞アイコンもURLのリンクではなく、
＞ページ自体は遷移せずにサムネイルのみが変更されるように
＞したいと思っているのですが、
＞これは可能なのでしょうか？

可能です。

やり方は色々あると思いますが、printTagで15枚ずつのサムネイルのhtmlをグローバルな配列に入れてあげて、矢印が押されたら対応するhtmlを$("slide").innerHTMLに設定する、という感じでいいんじゃないですか？

是非、自分でちょっと書いてみてください。
その上で、わからないところがあれば、お答えできると思います。

お礼

回答ありがとうございます。
以下のようなコードで一応動きましたが、
最後の画像の次にphotoフォルダを参照してしまいます。
どうも空が入ってしまっているような気がします。
thumbnail = new Array();
var page = 0;

window.onload = function () {
var url = "getfilelist.cgi?cache="+(new Date()).getTime();
new Ajax.Request(url, { method: "get", onComplete:printTag });

}

function printTag(httpObj) {
var LF = String.fromCharCode(10);
var list = httpObj.responseText.split(LF);

var result = "";
var x = 0;
for (var i = 0; i < list.length; i++) {
result += '<a href="photo/'+list[i]+'" rel="lightbox[flower]" title=""><img src="thumbnail/'+list[i]+'"></a>'+(((i+1) %5 == 0)?"<br/>":"");
if(i > 0 && (i+1) %15 == 0) {
thumbnail[x] = result;
x++;
result = "";
}

}
if ("" != result) {
thumbnail[x] = result;
}

slide();

}

function slide () {
$("slide").innerHTML = thumbnail[page];
initLightbox();

}

function nextPage () {
if (thumbnail.length-1 > page) {
page++;
slide();
}
}

function prevPage () {
if (page > 0) {
page--;
slide();
}
}