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