ショッピングサイトとかで商品詳細ページにある、あれです。
画像ビューアーというのか、、サムネイルをクリックしたらメイン画像が切り替わるやつです。
説明が難しいので、サンプルをご覧ください。
HTML
メインの画像と、サムネイルの画像をliで書いています。サムネイル画像もメイン画像も、同じ画像を使用しています。変えることも可能。
ここでliにclassを付けるのがポイント。
1 2 3 4 5 6 7 8 9 10 11 12 | <ul class="main"> <li class="item1"><img src="images/item1.jpg" alt="" /></li> <li class="item2"><img src="images/item2.jpg" alt="" /></li> <li class="item3"><img src="images/item3.jpg" alt="" /></li> <li class="item4"><img src="images/item4.jpg" alt="" /></li></ul><ul class="thumb"> <li class="thumb1"><img src="images/item1.jpg" alt="" /></li> <li class="thumb2"><img src="images/item2.jpg" alt="" /></li> <li class="thumb3"><img src="images/item3.jpg" alt="" /></li> <li class="thumb4"><img src="images/item4.jpg" alt="" /></li></ul> |
jQuery
クリックしたサムネイル画像のliのclassを取得してきて、slice()でその末尾の数字をnumに格納しています。
slice()の中の数字はclass名の文字数によって変更してください。今回はitem1なので数字は5番目、slice(5)になっています。
そしてメイン画像を表示させる前に一度全ての画像をhide()で隠しておいて、fadeIn()で該当の画像を表示させます。
1 2 3 4 5 6 7 8 | $(function(){ $('.thumb li').click(function(){ var class_name = $(this).attr("class"); //クリックしたサムネイルのclass名を取得 var num = class_name.slice(5); //class名の末尾の数字を取得 $('.main li').hide(); //メインの画像を全て隠す $('.item' + num).fadeIn(); //クリックしたサムネイルに対応するメイン画像を表示 });}); |
class名の文字数にさえ気をつければ、画像が何枚あっても対応できると思います。
サンプルコードをダウンロードできます。
かわいいトイプードルの写真付き＼(^o^)／
おまけ：失敗例
ちなみに、わたしがこのコードを書く前に単純に書いたコードがこちら。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $(function(){ $('.thumb1').click(function(){ $('.item1').fadeIn(); $('.item2').hide(); $('.item3').hide(); $('.item4').hide(); }); $('.thumb2').click(function(){ $('.item1').hide(); $('.item2').fadeIn(); $('.item3').hide(); $('.item4').hide(); }); $('.thumb3').click(function(){ $('.item1').hide(); $('.item2').hide(); $('.item3').fadeIn(); $('.item4').hide(); }); $('.thumb4').click(function(){ $('.item1').hide(); $('.item2').hide(); $('.item3').hide(); $('.item4').fadeIn(); });}); |
これだと、画像の枚数が増えたらまたコードを追加しなくちゃいけないんですね〜(*_*)
初めまして。いつもわかり安い解説をありがとうございます。
現在サンプルコードをもとに、画像ビューワを同ページに複数設置できないかと挑戦しているのですが、どうもうまくいきません。
症状としては、ページを開いた際に2箇所目以降のビューワのメイン画像が縦一列で表示されてしまいます。
サムネイルをクリックすると正常の表示に戻ります。
Javascriptのコードは以下の通りです。
$(function(){
$(‘.slidenavi01 li’).click(function(){
var class_name = $(this).attr(“class”); //クリックしたサムネイルのclass名を取得
var num = class_name.slice(5); //class名の末尾の数字を取得
$(‘.slide01 li’).hide(); //メインの画像を全て隠す
$(‘.item’ + num).fadeIn(); //クリックしたサムネイルに対応するメイン画像を表示
});
$(‘.slidenavi02 li’).click(function(){
var class_name = $(this).attr(“class”); //クリックしたサムネイルのclass名を取得
var num = class_name.slice(5); //class名の末尾の数字を取得
$(‘.slide02 li’).hide(); //メインの画像を全て隠す
$(‘.item’ + num).fadeIn(); //クリックしたサムネイルに対応するメイン画像を表示
});
});
もし解決策があれば教えていただけますと助かります。
よろしくお願いします。
お返事遅くなってすみません。
コメントありがとうございます！
メイン画像が縦一列で表示されるということは、CSSで初期の画像以外をdisplay:none;にしている部分が適用されていないのではないでしょうか？
今更の質問で申し訳ないのですが、ページを開いたときにmainの画像がすべて表示されてしまうのですが
これはどうやってメイン画像を一つだけ表示しているのでしょうか？
ページを開いた段階では、1枚目以外の画像を、cssで「display:none;」にして非表示しています。