画像ギャラリー

質問

画像ギャラリー

単純な画像ギャラリーをつくっています。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に切り替わるようにしたいと思っております。

画像の枚数は不特定なので枚数が何枚であろうが汎用性のあるものであれば助かるのですが詳しい方がいらっしゃいましたら実行方法を教えてください。

宜しくお願いいたします。

回答No.3

yyr446 · ベストアンサー

参考までに一例を書きます。
※全角空白は半角空白に変えてください。

<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>

<button id="prev">前へ</button><button id="next">次へ</button>

<script type="text/javascript">
$(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);
　　 $(this).attr("alt",src);
　　 $(this).attr("src",src).fadeIn();
　 });
　 return false;
　 });
　 $("#prev").click(function(){
　　 if($(".current").attr("href")==$("#tree li:first-child a").attr("href"))
　　　$("#tree li:last-child a").click();
　　 else
　　　$(".current").parent().prev().children().click();
　 });
　 $("#next").click(function(){
　　 if($(".current").attr("href")==$("#tree li:last-child a").attr("href"))
　　　$("#tree li:first-child a").click();
　　 else
　　　$(".current").parent().next().children().click();
　 });
});
</script>

回答No.4

yyr446

$(this).attr("alt",src);
はデバッグで付けてました（画像準備面倒なもんで）
不要です。

回答No.2

yyr446

まず画像の移動の為に下記のようなhtmlを追加しますよね？
<div id="prev">前へ</div><div id="next">次へ</div>
そして下記のような感じで追加していくと思うのですが。。。
　$('#next').next()
　$('#prev').prev()

==>根本的に考え方を間違っています。
　HTMLはタグを追加・移動してレイアウトするわけですが、javascript
はプログラムの記述です。だいじょうぶですか？

HTMLに追加するのは、
　<button id="prev">前へ</button><button id="next">次へ</button>
こおいうのでしょ。（別に<a>でも、<div>でもできますが）

そのボタンクリックに対するjavascriptのコードを書くのですよ。

回答No.1

yyr446

解決のためののヒント（jQueryを使う場合）

・$('セレクター')でjQuery要素を選択

次の要素は、
　$().next()
前の要素は
　$().prev()
で拾える。

先頭要素と最終要素はセレクターのフィルター
　:first-child
　:last-child
で拾える

判定条件は、
　$().is(expr)
でtrue/falseを取得できる。

クリッックイベントの登録は、
　$().click(fn)
　※これは、使ってられますね。

http://semooh.jp/jquery/api/traversing/is/expr/

補足

お返事ありがとうございます。
まず画像の移動の為に下記のようなhtmlを追加しますよね？
<div id="prev">前へ</div><div id="next">次へ</div>

そして下記のような感じで追加していくと思うのですが。。。
　$('#next').next()
　$('#prev').prev()

どのように組み合わせしたらいいものか全く分からない状態です。
もう少し詳しい情報を教えていただけますと幸いです。宜しくお願いいたします。