質問: デモページ 上記のような画像を拡大できるスクリプトで、 Amazon のように画像を切り替えれる(横のリストから選択できる)ものはありますか? 既存のものがあれば教えていただきたいです。 なければ 上記スクリプトを 複数設置して、 display:none を使用して tab のように 切り替えようと思っていますが、 もう少しよい案があれば 提示していただけるとありがたいです。 ( 当方 JS はあまり触らないので 参考サイト 又は 実際のコードを記載していただければ助かります。 )
回答: 使用されているライブラリの、配布サイト(合ってます?)TOPサンプルだと一覧画像の clickイベントでsrc、data-largeを切り替えて複数画像に対応しているみたいです。 サムネイル用画像、拡大用画像のファイル名に一貫性を持たせておけば多少は楽できるでしょうか。 ``` $(".tmb-caption img").click(function(){ var that = this; $(".container").fadeOut(600, function(){ $(this).attr("src", $(that).attr("src")) //サムネ画像変更 .attr("data-large", $(that).attr("data-tmb-large")) //拡大画像変更 .fadeIn(1000); }); return false; }); ```