画像の拡大表示(複数)

デモページ
上記のような画像を拡大できるスクリプトで、
Amazon のように画像を切り替えれる(横のリストから選択できる)ものはありますか？

既存のものがあれば教えていただきたいです。

なければ上記スクリプトを複数設置して、
display:none を使用して tab のように切り替えようと思っていますが、
もう少しよい案があれば提示していただけるとありがたいです。
( 当方 JS はあまり触らないので参考サイト又は実際のコードを記載していただければ助かります。 )

行動規範の内容に同意します

回答1件

ベストアンサー

使用されているライブラリの、配布サイト(合ってます？)TOPサンプルだと一覧画像の
clickイベントでsrc、data-largeを切り替えて複数画像に対応しているみたいです。
サムネイル用画像、拡大用画像のファイル名に一貫性を持たせておけば多少は楽できるでしょうか。

javascript
1$(".tmb-caption img").click(function(){
2  var that = this;
3  $(".container").fadeOut(600, function(){
4    $(this).attr("src", $(that).attr("src")) //サムネ画像変更
5      .attr("data-large", $(that).attr("data-tmb-large")) //拡大画像変更
6      .fadeIn(1000);				
7  });
8  return false;
9});
10