- ベストアンサー
Ajax LightBoxを使用したサムネイルの画像表示
LightBoxを使用してサムネイルを表示し、 クリックすると大きな画像が表示されるようにしました。 サムネイルの画像が増えてくると 横いっぱいまで画像が増えてしまい、 それ以上になると下の段にずれます。 これをHTMLのTableみたいに 横のサムネイル枚数を制限できないでしょうか？ 仮に横に5枚と指定した場合は 6枚目が下の段にいくような感じです。 よろしくお願いします。
- yukafuka
- お礼率47% (21/44)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
result += '<a href="photo/'+list[i]+'" rel="lightbox[flower]" title=""><img src="thumbnail/'+list[i]+'"></a>'; を result += '<a href="photo/'+list[i]+'" rel="lightbox[flower]" title=""><img src="thumbnail/'+list[i]+'"></a>'+((i%5==0&&i!=0)?"<br/>":""); でどうでしょうか？
その他の回答 (1)
- talepanda
- ベストアンサー率58% (45/77)
＞仮に横に5枚と指定した場合は ＞6枚目が下の段にいくような感じです。 そうなるようなhtmlを書けばいいだけだと思いますが・・・ 具体的なコードを提示してくれれば、もう少しコメントできると思いますけど。
お礼
コードはこれです。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Lightbox JS Tv 4</title> <link href="css/default.css" rel="stylesheet" type="text/css"> <link href="css/lightbox.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript"><!-- 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>'; } $("slide").innerHTML = result; initLightbox(); } // --></script> </head> <body> <h1>Lightbox JS Sample 4</h1> <div id="slide"></div> </body> </html> そうなるようなhtmlがわからないんです。
お礼
1行目だけ6枚になってしまいましたが、 他の行は5枚にできました。 ありがとうございました。 感謝しております。