• ベストアンサー

jqueryでGalleryを作りたい

質問します。 ライトボックスのような画像ギャラリーで、一枚の画像をクリックすると、複数の画像が出てきて、そういうグループを複数設置したいのですが、ピッタリのプラグインありますか? 画面にはA、B画像があり、Aをクリックするとa01.jpg、a02.jpg、a03.jpg……とライトボックスのように表示され、ESCAPEを押して最初の画面に戻り、Bの画像を押すとb01.jpg、b02.jpg、b03.jpg……というふうに表示したいです。

  • AJAX
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

#1です。 >a01.jpgが表示され、カーソルキーかクリックでa02.jpgに移行できたらいいなと思っています 一度に表示されるわけではなくて、順に表示できればよいのでしょうか? そうであるならば、多くの○○boxはグルーピングに対応していると思いますので、ほとんどそのままの設置で可能と思われますが?

amahiki
質問者

お礼

な、なんと!そうだったのですか。fujillinさんの回答を参考に検索をかけたらいろいろ出てきました。グルーピングという検索ワードも質問しなければ思い浮かびませんでした^^; ありがとうございます。 jQuery版のlightbox.jsのカスタマイズについて質問です。 - BIGLOBEなんでも相談室 http://soudan1.biglobe.ne.jp/qa5679507.html>

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

そのままのものは需要がなければ作っている人がいないような… <案1> 複数の画像をセットで表示するのですから、全部をまとめて1画像にすればそのまま使用可能です。 <案2> lightboxと同様の画像表示のライブラリで、○○boxなどの名称で沢山作成されていますが、その中でajaxに対応しているものであればhtmlを読込んで表示することが可能なはずです。 リンク先に画像を直接指定するのではなく、複数画像を表示するhtmlを指定しておく。 (結局、画像をまとめるのと大して変わりませんが…)

amahiki
質問者

補足

回答有り難うございます。 a01.jpgが表示され、カーソルキーかクリックでa02.jpgに移行できたらいいなと思っています。

関連するQ&A

  • jQueryイメージギャラリーに関しての質問です。

    jQueryに関して。下記URLを参考に、イメージギャラリーを設置しました。 http://www.webdesignerwall.com/demo/jquery/img-replacement.html この、大きく表示されている画像に対して、さらにリンクを設定し、画像をさらに大きく表示させられるようなjQueryプラグインはあるでしょうか。 たとえばこの画像は 550px × 400px となっていますが、さらにこの画像をクリックすることで、別に用意された倍のサイズの画像をlightbox効果を付けて表示できるような、そういったプラグインです。 また、この画像が表示されている部分に、別のHTMLファイルを表示させられるようなプラグインがあるかどうかも知りたいです。 よろしくお願いします。

  • ページ内に複数のJSギャラリー

    1ページ内に、jQueruを使用したギャラリーを複数設置したいと考えています。 使用したいJSギャラリーは以下となります。 http://landofcoder.com/demo/jquery/lofslidernews/index.html こちらID名を振り分けたりと色々試してみました。 できたことは、以下2点です。 ・ギャラリーを複数表示 ・「<」「>」ボタンは各ギャラリー毎に操作可能 どうしてもできないのは、以下1点です。 ・リストのサムネイル画像をクリックすると1つのギャラリーに対してのみ反応 (例えばAギャラリー・Bギャラリーを配置、AギャラリーのサムネイルクリックでBギャラリーがスライドしてしまう) どのような設定にすれば複数配置が可能なのか、お手上げ状態です。。 似たような質問がありましたが、上記のギャラリーを使用したいため新たに質問させて頂きました。 http://ziddy.japan.zdnet.com/qa6614795.html どうぞよろしくお願い致します。

  • 画像ギャラリー

    画像ギャラリー 単純な画像ギャラリーをつくっています。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に切り替わるようにしたいと思っております。 画像の枚数は不特定なので枚数が何枚であろうが汎用性のあるものであれば助かるのですが詳しい方がいらっしゃいましたら実行方法を教えてください。 宜しくお願いいたします。

  • jQueryイメージギャラリーでの画像保護方法

    はじめまして。 jQueryプラグインの「lightbox」や「colorbox」などを用いたフォトギャラリーにて、 右クリックやドロップによる画像の持ち出しを禁止する方法を探しております。 表示画像に自動で透明画像を被せる、表示部分だけメニュー無効化などでしょうか。 保存に一手間を取らせる程度の簡単なもので構いません。 可能ならばlightboxもしくはcolorboxを利用したいのですが、似たようなものは多くあると思いますので、他のプラグインでも大丈夫です。 どうぞよろしくお願い申し上げます。

  • Windowsフォトギャラリーが起動しない

    Vistaマシンです。 CD-Rに複数の画像を保存するために、Windowsフォトギャラリーを使用したいと思い、 スタート→すべてのプログラム→Windowsフォトギャラリーのクリック の操作をしましたが、フォトギャラリーが起動しません。 ただ、JPG画像のダブルクリックでは起動しますが、当然サムネイル表示ではありません。 よろしくお願いします。

  • シンプルな画像ギャラリー

    シンプルな画像ギャラリー シンプルな画像ギャラリーを探しています。ひとまず定番?の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は変えたくないです。 このような事を実現する場合どのように書けばいいのでしょうか?参考になるライブラリのサンプルでも構いませんので方法を教えてください!

  • jQueryでの再質問

    QNo.7739878であるタグをクリックした時に指定した<a>をクリックした事にするでご教授いただきましたが、その内容を元に、以下を実施したところ上手く動作しませんでした。 「実現した事」 ・あるタグをクリックした時に、指定した<a>タグをクリックした事にする。 ・指定した<a>タグでは画像を見るためにjqueryプラグインのcolorboxを利用するために、relによるグループ設定がされている。 ・指定した<a>が擬似clickされると、それ以外のrelでグループ設定されている画像も閲覧したい。 「コード」 <script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $(".grp1").colorbox({rel:'grp1'}); }); $(function() { $('p.c1').click ( function() { location.href = $('a.c1').attr('href'); }); }); </script> <p class="c1">ここをクリック</p> <a href="1xxxx.jpg" class="c1" rel="grp1">グループ化された画像1</a> <a href="2xxxx.jpg" rel="grp1">グループ化された画像2</a> <a href="3xxxx.jpg" rel="grp1">グループ化された画像3</a> 「質問」 現状ですと、実行すると1xxxx.jpgの単独閲覧になってしまいます。 location.href = $('a.c1').attr('href') 以外の方法はありますでしょうか? 取り留めない内容ですが、ご教授をお願いします。

  • フォトギャラリーについて

    Vistaに搭載されているwindowsフォトギャラリーで画像を開いてスクロールをすると拡大表示できますよね。しかし、XPにあった画像ビューアよりも画像が荒れて拡大されていませんか? XPのビューアは拡大してもそんなにカクカクした画像になりませんでした。(ちょっとぼやけた感じにはなりますが)しかし、Vistaではぼやけた感じにはならないもののカクカクした荒い拡大画像になってしまいます。 XPの時のような拡大の仕方に出来ないでしょうか? あと、ちょっと話が反れるんですが、JPG形式の画像を右クリックして編集を押すと必ずフォトギャラリーが開いてしまいます。XPの時のようにペイントが既定の画像編集ソフトにするにはどうしたらよいでしょうか?

  • flashのギャラリー作成で

    flash8です。 サムネイル1をクリックすると、 画面中央に、該当する写真が大きく表示され 大きい写真をクリックすると指定されたurlに飛ぶという ギャラリーを作りたいです。 (サムネイルは4つあり、クリックするとそれぞれの画像が表示される) できればAS2.0で作りたいです。 すみませんが教えてください。 よろしくお願いします。

    • ベストアンサー
    • Flash
  • jqueryの質問。

    毎回、お世話になります。 jqueryを使ってリンク文字をクリックすると画像が変更できるようにしたいのですが、 上手くいきません。 <HTML> <body> <ul> <li><a href="DSC_0014.jpg">a</a></li> <li><a href="kamen.jpg">b</a></li> <li><a href="irumi.jpg">c</a></li> </ul> <p><img src="DSC_0014.jpg" width="1000" height="671"> <SCRIPT> $(function(){ ("a:eq(0)").click(function(){ $("img").attr("src","DSC_0014.jpg").attr("alt","人物"); return false }); $("a:eq(1)").click(function(){ $("img").attr("src","kamen.jpg").attr("alt","仮面"); return false }); $("a:eq(2)").click(function(){ $("img").attr("src","irumi.jpg").attr("alt","イルミ"); return false }); }); このコードだとリストa,b,cをクリックすると別ページに画像が表示されます。 その場での画像切り替えをしたいのですが、どこが間違っているのでしょうか? 宜しくお願い致します。