画像をクリックして画像を切り替える

4047 ワード
HTML Rails haml JavaScript HTML テキストリンク

画像をクリックするとメイン画像を切り替わるようにする

上記のようにメイン画像と画像リストがあるようなページの場合に、
画像リストをクリックしたらメイン画像に切り替わるようにしたい。

上記の画像を表示させるための記事は以前書いた記事を参照にしてください
商品詳細画面での画像の折り返し表示

画像を切り替えるためにJQueryを使う

show.html.haml
.photo__box
  %ul.photo__innner
    %li
      = image_tag @item.images.first.src.url, class: "main__image"
      %ul
        - @item.images.each do |image|
          %li
            = image_tag image.src.url, class: "image__list"

上記のようなhamlを記述していまして、main__imageのclassの場所にメイン画像がある状態で
image__listに画像リストを並べています。

やり方としては、image__listに入っている画像をクリックしたら
その配列要素をmain__imageの属性にいれるという形です。

記述は難しくないです。

show_item.js
$(document).on('turbolinks:load', function() {
  $('.image__list').click(function () {
    var $src = $(this).attr('src');
    $('.main__image').attr('src', $src);
  });
});

image__listをクリックしたら、画像のテーブルのsrcを取り出して
main__imageのsrc属性を上書きしてるようなかたちです。

（srcかどうかは画像のマイグレーションファイルでどう設定したかにもよるので各自の環境を確認してください）

この記述をするだけで画像を切り替えることができます。
ちゃんとクラスを当て間違えなければ簡単な設定かと思います。