![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
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ベストアンサー
- 回答日時:
#1のヒントでここまで書けるなら、聞く前に自分で書いて試してみましょう^^;
>最後の画像の次に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を最後の(15枚未満のサムネイルの)resultで上書きしてしまうことになりますよね。
それが、冒頭の問題と関係するのかよくわかりませんが。
No.1
- 回答日時:
>サムネイルで表示される枚数の制限は可能でしょうか?
可能です。
>アイコンも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();
}
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- その他(プログラミング・Web制作) Leafletで画像をon、offさせる方法について 2 2022/11/01 15:34
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
- Windows 10 Windows10の画像ファイルのサムネールがアイコン表示になってしまいました。 3 2022/07/09 13:01
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- オープンソース Coinmarketcap api 1 2022/05/30 15:47
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- Excel(エクセル) excelvbaでスライドショーを作りたい 2 2023/04/20 14:32
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ジャバスプリクトについて
-
google apps scriptの終了のさせ方
-
flickrのAPIを用い、任意の写真...
-
【競プロ】アルゴリズムの仕組...
-
googleスプレッドシートのApps ...
-
setTimeoutによる繰り返しが途...
-
なぜmatchメソッドがエラーにな...
-
ジェネレーターの作り方
-
C# 演算 奇数と偶数 表現の仕方
-
シンプルなweb版スタンプラリー...
-
alert表示で計算結果がうまく表...
-
文字列の置換
-
【javascript】ハッシュのキー...
-
最近Javascriptの勉強を始めた...
-
javascriptでiframeのURL変更は?
-
Ajax LightBoxを使ったサムネイ...
-
カラー表記の足し算プログラム
-
Google Apps Script で添付ファ...
-
javascriptを用いて作成された...
-
Perlの配列をJavaScriptに渡せ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
なぜmatchメソッドがエラーにな...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
翌月を取得するGASが分かりません
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
javascriptでiframeのURL変更は?
-
C#で、ContextMenuStripに動的...
-
ASP.NET MVCでObjectをjsに渡す
-
javascriptでテーブルに追加し...
-
1日1回引けるJavaScriptおみく...
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
JavaScriptで文字列の特定文字...
-
アクセス時からのカウントダウ...
-
ローカルにあるファイルを検索...
おすすめ情報