- ベストアンサー
シンプルな画像ギャラリーを探しています
- シンプルな画像ギャラリーを探しています。テキストリンクをクリックすると拡大画像が表示される形式で実装したいです。
- 具体的には、縮小画像をクリックすると拡大画像がフェードインしながら表示され、選択された画像に対応するテキストリンクのスタイルも変更される仕組みです。
- 既にいくつかのサンプルを見てみましたが、URLが変わらない方法は分かりません。参考になるライブラリのサンプルや実装方法を教えてください！
- dcx147
- お礼率33% (214/636)
- JavaScript
- 回答数3
- ありがとう数12
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
どのようなのがスマートなのかわかりませんが、 (function() { var i, img = []; for (i=0; i<17;) img[i] = new Image(), img[i].src = "../img/img#.jpg".replace(/#/, (i<9?"0":"") + (++i)); })();
その他の回答 (2)
- fujillin
- ベストアンサー率61% (1594/2576)
No1です ＞例えばですが画像の先読みを組み込むにはどのようにすればいいでしょうか？ 「画像」「先読み」などをキーに検索すれば、多くのサイトに具体的な説明があります。 http://www.bing.com/search?srch=105&FORM=AS5&q=%e7%94%bb%e5%83%8f%e3%80%80%e5%85%88%e8%aa%ad%e3%81%bf 実行は、ドキュメントの読込みの始めのほうでやっておくのが一般的でしょう。 なので、$(function(){ ～ よりも前に、単独で行なっておけばよろしいかと思います。
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… jqueryはよく知りませんが、各種のことが比較的簡単に実現できるライブラリですので、ご質問程度の内容なら自作なさったほうが思い通りのものができるのではないかと思います。 日本語の解説サイトをご参考までに。 http://semooh.jp/jquery/ ご質問の内容に近いサンプル。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#galleryNavi a").click(function() { $("#galleryNavi a").removeClass("current"); $(this).addClass("current"); var src = $(this).attr("href"); $("#main_image img:first").fadeOut("normal", function() { $(this).attr("src",src).fadeIn(); }); return false; }); }); //--> </script> </head> <body> <div id="main_image"><img src="A.jpg" alt="A"></div> <ul id="galleryNavi"> <li><a href="A.jpg" class="current">01の画像</a></li> <li><a href="B.jpg">02の画像</a></li> <li><a href="C.jpg">03の画像</a></li> </ul> </body> </html>
お礼
ご回答ありがとうございます！お陰様で解決できました。 キャッシュの関係で初めのアクセスの際に画像の切り替わりがぎこちない感じになってしまいます。 例えばですが画像の先読みを組み込むにはどのようにすればいいでしょうか？ var num = 17; // 画像の枚数 for(var i = 0; i < num; i++){ ここがわからない・・・ } 上記のような感じになると思うのですがどのように書きどこに組み込めばいいものかわからずです。 ちなみに画像はimg01.jpgから始まり上記例の通り17枚であればimg17.jpgまでの規則性のあるファイル名です。
お礼
ありがとうございます。 functionの前に下記のソースを入れてみたところできているようなのですが0ではなく01とする方法でこれよりスマートに書ける方法はありますでしょうか？ var img = new Array(); for (i = 0; i < 17; i++) { if (i < 10) { var num = "0" + (i + 1); } else { var num = i; } img[i] = new Image(); img[i].src = "../img/img" + num + ".jpg"; }