シンプルな画像ギャラリーを探しています
- シンプルな画像ギャラリーを探しています。テキストリンクをクリックすると拡大画像が表示される形式で実装したいです。
- 具体的には、縮小画像をクリックすると拡大画像がフェードインしながら表示され、選択された画像に対応するテキストリンクのスタイルも変更される仕組みです。
- 既にいくつかのサンプルを見てみましたが、URLが変わらない方法は分かりません。参考になるライブラリのサンプルや実装方法を教えてください！
- ベストアンサー
シンプルな画像ギャラリー
シンプルな画像ギャラリー シンプルな画像ギャラリーを探しています。ひとまず定番？のjqueryで探してみましたが見つからなかったので質問させてください。 多かったのが縮小画像をクリックすると拡大画像が表示されるものがほとんどでした。 実行したい事はテキストリンクをクリックすると拡大画像を表示する形式です。 具体的に表すと下記のような感じです。 <div id="main_image">※最初は01の画像を表示させたい</div> <ul id="galleryNavi"> <li><a href="img/01.jpg" class="current">01の画像</a></li> <li><a href="img/02.jpg">02の画像</a></li> <li><a href="img/03.jpg">03の画像</a></li> </ul> この状態で02の画像をクリックするとmain_imageの箇所に02の画像がフェードインしながら表示されa属性の01のclass="current"を消し02にclass="current"を付与させたいと思っております。 いくつかサンプルを見てみましたが画像をクリックするたびにURLの末尾にファイル名がつくものがありましたが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までの規則性のあるファイル名です。
関連するQ&A
- 画像ギャラリー
画像ギャラリー 単純な画像ギャラリーをつくっています。treeのメニューをクリックするとリンクされている画像がtargetに切り替わり表示されるものです。 $(function() { $("#tree a").click(function() { $("#tree a").removeClass("current"); $(this).addClass("current"); var src = $(this).attr("href"); $("#imgMain img:first").fadeOut("normal", function() { $(this).attr("src",src).fadeIn(); }); return false; }); }); <ul id="tree"> <li><a href="../img/gallery/01/img01.jpg" class="current">画像01</a></li> <li><a href="../img/gallery/01/img02.jpg">画像02</a></li> <li><a href="../img/gallery/01/img03.jpg">画像03</a></li> <li><a href="../img/gallery/01/img04.jpg">画像04</a></li> <li><a href="../img/gallery/01/img05.jpg">画像05</a></li> </ul> <p id="imgMain"><img src="../img/gallery/01/img01.jpg" alt="画像" id="target" /></p> これで動作はするのですが「次の画像」や「前の画像」とした別のリンクでも切り替わりの操作を行うにはどうすればいいでしょうか？ img01.jpgがtargetにある場合に「次の画像」をクリックするとimg02.jpgに切り替わり「前の画像」をクリックするとimg05.jpgに切り替わるようにしたいと思っております。 画像の枚数は不特定なので枚数が何枚であろうが汎用性のあるものであれば助かるのですが詳しい方がいらっしゃいましたら実行方法を教えてください。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- サムネイル画像のclass切替がうまく動かない。
すみません、jquery初心者です。 下記の様にサムネイルをクリックすると、mainの画像が切り替わる画像ギャラリーを作成しておりまして、 サムネイルをクリックして class="current" を切り替えたいのですが、うまく動きません。 別のサムネイルをクリックすると、最初のclassはremoveされるのですが、 クリックしたサムネイルにclassを付けたいのですが効きません。。 $(document).ready(function() { $(function(){ $('#sum li a').click(function(){ var h = $(this).eq(0).attr('rel'); $('#main img').fadeOut(function(){ ($('#main img').attr("src",h)).fadeIn(); $('#sum li a').removeClass('current'); $(this).addClass('current'); }); return false; }) }); }); <div class="main_area"> <p id="main"><img src="images/img01.jpg" /></p> </div> <ul id="sum" class="clearfix"> <li><a href="#" rel="img01.jpg" class="current"><img src="images/sum01.jpg" /></a></li> <li><a href="#" rel="img02.jpg"><img src="images/sum02.jpg" /></a></li> <li><a href="#" rel="img03.jpg"><img src="images/sum03.jpg" /></a></li> </ul> ご教授頂けると非常に助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像が表示されない。
質問させてもらいます。 jqueryのjCarouselLiteを使ってメニューを作りました。 その際、メニューをクリック等するとコンテンツが表示されるようにしようと思っているのですが、 初期状態を非表示にしたく、コンテンツ部分(AAA)を{ display: none; }にしました。 それでメニュークリックして表示させるまでは良いのですが、 AAAの中身（こちらにもjCarouselLiteのスライドを使用しています）の画像だけが表示されないのです。 jCarouselLiteを使用せず、普通に画像やテキストのみを置いた場合は問題なく動作します。 また、{ display: none; }を入れない場合も（見栄えの問題があるものの）問題なく動作します。 【メニュー部分】 <div class="carousel"> <div class="jCarouselLite"> <ul> <li><a href=""onClick="document.getElementById('AAA').style.display = 'inline';" /> <img src="img/1.jpg" /></a></li> </ul> </div> </div> 【コンテンツ部分】 <div id="AAA"> <div class="carousel2"> <a href="#" class="prev2"><img src="img/left.png" border="0" /></a> <a href="#" class="next2"><img src="img/right.png" border="0" /></a> <div class="jCarouselLite2"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div> </div> </div> 上記のleft.pngなどは表示されるのですが、img/001.jpgなどが表示されません。 <div id="AAA"></div>内<div class="carousel2"></div>内に001.jpgを置いた場合は普通に表示されます。 問題の発生するjCarouselLite2のCSSは以下のとおりです。 .jCarouselLite2 { margin: 5px auto 0px; width: 560px; } .jCarouselLite2 li img, .jCarouselLite2 li p { background-color: #fff; width:500px; height: 333px; margin: 5px; } 説明不足もあるかも知れませんが、ご指摘いただけると幸いです。
- ベストアンサー
- CSS
- 順番にクラスをつけていく方法
順番にクラスを付与していく方法を考えているのですが、 思いつかないのでご教授ください。 下記のようなソースでギャラリーをjqueryで作成しました。 「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。 画像にたいしてフェードをかけようと思い、画像を 初期状態でフェード０にしてactiveクラスがついたときに フェードを１００にしようと思いました。 対象の画像をクリックすることでクラスを追加したり 削除したりする方法はわかったのですが、 「次へ」「戻る」ボタンを押すことで画像を切り替えているため、 どのようにしたら順番に画像にクラスをつけることが できるのかがわかりません。 簡単な方法をご存知の方おられましたら よろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>
- ベストアンサー
- JavaScript
- jQueryでappleっぽい画像ギャラリー設置したいです
http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを私のホームページにも組み込みたいと思っているのですが、CSS・JAVAを最近本を買ったりして勉強しはじめた初心者なだけに、紹介されている設置方法だけでは理解できなく質問させていただきました。 (1)とりあえずjQueryからjquery.jsをダウンロードはしましたが、こjquery.jsはどこにどうすればいいのでしょうか？ (2) <div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="画像パス1" width="920" height="400" /></div> <div class="slide"><img src="画像パス2" width="920" height="400" /></div> <div class="slide"><img src="画像パス3" width="920" height="400" /></div> <!-- 画像にはwidthとheightを指定します --> </div> <div id="menu"> <ul> <li class="fbar"> </li> //区切り線用 <li class="menuItem"><a href=""><img src="サムネイル画像パス1" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス2" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス3" /></a></li> </ul> </div> </div> </div> このコードはhtmlのheadに組み込むのでしょうか？それともbodyでしょうか？ (3) 次にCSSを記述します。 特に難しい部分はないので、cssを見ていただくとして・・・ とありますが、リンク先のcssはいじらなくてもそのまま使用すればいいのでしょうか？ 最後に、jQueryを記述すれば完成です。 $(document).ready(function(){ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ positions[i]= totWidth; totWidth += $(this).width(); if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); $('#menu ul li a').click(function(e){ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); e.preventDefault(); }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); }); とありますが、これはどこに組み込めばいいのでしょうか？また何も触らなくてもいいのでしょうか？ 他にも分からないところだらけなので、立て続けに質問させていただくと思いますが、お手数おかけしますが力を貸してください。 よろしく御願いいたします。
- ベストアンサー
- JavaScript
- 画像の先読み
画像の先読み 拡大画像の表示場所とサムネイルの表示場所がありサムネイルをクリックすると拡大画像の場所にクリックしたサムネイルが拡大表示されるものを作っています。 以下のソースで試しており動作は問題ないのですが動作がぎこちないです。 具体的にはサムネイルをクリックすると拡大画像の場所がフェードアウトしフェードインします。 ※ここまでは正常 フェードインしたかと思いきやクリックする前の画像が1秒程表示されその後クリックした画像に切り替わる感じでフェードの効果が全く無意味になってしまいます^^; 事情があり画像の出力をphpで行っているのが原因かと思ったのですが単純にキャッシュの問題かとも思い画像の先読みなどを組み込めればいいのですがどのようにすれば可能でしょうか？ [html] <p id="imgMain"><img src="resize.php?file=/imgimg01.jpg" alt="" id="target" /></p> <ul id="gallery"> <li><a href="resize.php?file=/img/img01.jpg" ><img src="resize.php?file=/img/img01.jpg&x=173" alt="" /></a></li> <li><a href="resize.php?file=/img/img02.jpg"><img src="resize.php?file=/img/img02.jpg&x=173" alt="" /></a></li> <li><a href="resize.php?file=/img/img03.jpg"><img src="resize.php?file=/img/img03.jpg&x=173" alt="" /></a></li> </ul> [js] $(document).ready( function() { $("#gallery a img") .fadeTo(1, 1) .hover( function() { $(this).fadeTo(200, 0.5); }, function() { $(this).fadeTo(500, 1); } ) $("#gallery a").click(function() { var changeSrc = $(this).attr("href"); $("#target").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); });
- ベストアンサー
- JavaScript
- ジャバスクリプトでクリックして画像を切り替えていま
画像は一つのスライドセットに5枚ほど用意してあり、 今回、あらたにもう一セット同じページに追加したところ、相互のく動作がうまくいきません。 コードをジャバスクリプトの部分だけコピーしてみます。どこかに誤りがあったら是非ご教授ください。 <div id="nav2"> <ul class="imagelist"> <li><a class="current" href="#image1">1</a></li> <li><a href="#image2">2</a></li> <li><a href="#image3">3</a></li> <li><a href="#image4">4</a></li> <li><a href="#image5">5</a></li> <li><a href="#image6">6</a></li> </ul> </div> <div id="nav3"> <ul class="imagelist"> <li><a class="current" href="#image7">1</a></li> <li><a href="#image8">2</a></li> <li><a href="#image9">3</a></li> <li><a href="#image10">4</a></li> <li><a href="#image11">5</a></li> </ul> </div> ： ： ： <div id="slideshow"> <img id="image1" src="/livingimg/002.jpg"alt="Image 1" /> <img id="image2" src="/livingimg/031.jpg" alt="Image 2" /> <img id="image3" src="/livingimg/6039.jpg" alt="Image 3" /> <img id="image4" src="/livingimg/6336.jpg" alt="Image 4" /> <img id="image5" src="/livingimg/5563.jpg" alt="Image 5" /> <img id="image6" src="/livingimg/5860.jpg" alt="Image 6" /> </div> <div id="slideshow"> <img id="image7" src="/interiorimg/035akari.jpg"alt="Image 7" /> <img id="image8" src="/interiorimg/034.jpg" alt="Image 8" /> <img id="image9" src="/interiorimg/5923akari.jpg" alt="Image 9" /> <img id="image10" src="/interiorimg/akari190.jpg" alt="Image 10" /> <img id="image11" src="/interiorimg/5866akari.jpg" alt="Image 11" /> </div> こんな具合です。またhead部分に <style type="text/css"> <!-- #slideshow img{ display: none; } --> </style> と書いてあります。これで回答いただくことに必要な情報は十分でしょうか もちろん一つのセットの場合は正常に動作しています。 宜しくお願いします。 補足 ちなみに url は http://brownpaper.biz/interior.htm です。
- 締切済み
- JavaScript
- 二重の画像切り替え
以下のようなJavaScriptを作りたいと考えております。 非常にレベルの低い内容で申し訳ないのですが、どうかみなさんの知恵を貸していただけば幸いです。 （ちなみにJavaScriptで処理品ければいけない成約がありますので、他の方法は今回はすみません。） 見せるのも恥ずかしいレベルのソースですが、ソースも載せます。 ＣのいずれかをクリックするとＢの３つのサムネイル画像がすべて切替り、 更にＢのいずれかをクリックすると拡大画像のＡが切替るJavaScriptを作りたいと考えております。 ┌──┐ │拡大│←Ａ（Ｂの拡大画像） └──┘ ┌─┐┌─┐┌─┐ │前││横││後│←Ｂ（車の各方向からの写真画像） └─┘└─┘└─┘ ┌─┐┌─┐┌─┐ │赤││青││黒│←Ｃ（車のカラーバリエーション） └─┘└─┘└─┘ ◆◆◆現在のソース◆◆◆ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js"></script> <!--Ａ（Ｂの拡大画像）--> <div id="main_img"><img id="target_main" src="images/red_head.jpg" width="450" height="190" alt="image"></div> <!--Ｂ（車の各方向からの写真画像）--> <div class="thumbnail"> <ul> <li><a href="images/red_head.jpg"><img id="target_thumbnail_01" src="images/red_head.jpg" width="100" height="41" alt="gold_01"></a></li> <li><a href="images/red_side.jpg"><img id="target_thumbnail_02" src="images/red_side.jpg" width="100" height="41" alt="gold_02"></a></li> <li><a href="images/red_back.jpg"><img id="target_thumbnail_03" src="images/red_back.jpg" width="100" height="41" alt="gold_03"></a></li> </ul> </div> <!--Ｃ（車の各方向からの写真画像）--> <div class="color"> <ul> <li><a href="○○○"><img src="images/wheat.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/java.jpg" width="78" height="26" alt="sample01"></a></li> <li><a href="○○○"><img src="images/images/graphite.jpg" width="78" height="26" alt="sample01"></a></li> </ul> </div> <!--メインイメージ切り替えスクリプト--> <script type="text/javascript"> $(document).ready( function() { $(".thumbnail a").click( function() { var changeSrc = $(this).attr("href"); $("#target_main").fadeOut("slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); }); </script> <!--カラー切り替えスクリプト--> ・ ・ ・
- 締切済み
- JavaScript
- jCarouselLiteループ時の属性値取得
jCarouselLiteプラグインにてカルーセルパネルをカスタマイズしています。 IE9/Safari5/FireFox12でテストしています。 jquery-1.7.2.min.js jcarousellite_1.0.1.js 独自スクリプトでクリックされたときの<a>のhref属性値を取得できるかアラート表示させて確認してみると <ul></ul>に囲まれた分５つの１ループ目はそれぞれ取得できるのですが、２ループ目以降の<a>のhref属性が取得できません。 現在、無限ループするように設定し、それはできています。 =======独自スクリプト========== $(function() { $("#carousel .anyClass a").click(function(){ alert($(this).attr("href"))；//←２周目のhref属性が取得できない }); }); ============================ =======htmlソース=========== <div id="carousel"> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thum.jpg" alt="" class="01" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thum.jpg" alt="" class="02" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thum.jpg" alt="" class="03"/></a></li> <li><a href="img/photo4.jpg"><img src="img/photo4_thum.jpg" alt="" class="04"/></a></li> <li><a href="img/photo5.jpg"><img src="img/photo5_thum.jpg" alt="" class="05"/></a></li> </ul> </div> </div> ============================ お手数ですがご教授ください。お願いします。
- ベストアンサー
- JavaScript
- jqueryでの画像表示について
どなたか教えて頂ければ幸いです。 画像のプリロードをするためjqueryを書いているのですが、 うまくいかず助けて頂きたくまいりました。 <div id="slideshow" class="clearfix"> <ul class="slider clearfix"> <li><a href="#"><img src="img/dress1.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress7.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress8.jpg" alt="" /></a></li> <li><a href="#"><img src="img/dress9.jpg" alt="" /></a></li> </ul> </div> $('#slideshow .slider li').hide();//ページ上の画像を隠す var i = 0; var c = 0; $(window).bind("load", function() { var c = setInterval(showImg() , 500); }); function showImg() { var imgLength = $('#slideshow .slider li').length; if (i >= imgLength) { clearInterval(c); } $('#slideshow .slider li:hidden').eq(0).fadeIn(500); i++; } 上記のように書いたのですが、ループしてくれません。 i++がきいてないように思います。 一枚ずつ表示していき、非表示の最初のliにフェイドインさせるようにしています。 すみませんが教えて頂ければ幸いです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 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"; }