画像をクリックするとメイン画像を切り替わるようにする
上記のようにメイン画像と画像リストがあるようなページの場合に、
画像リストをクリックしたらメイン画像に切り替わるようにしたい。
上記の画像を表示させるための記事は以前書いた記事を参照にしてください
商品詳細画面での画像の折り返し表示
画像を切り替えるために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かどうかは画像のマイグレーションファイルでどう設定したかにもよるので各自の環境を確認してください)
この記述をするだけで画像を切り替えることができます。
ちゃんとクラスを当て間違えなければ簡単な設定かと思います。