5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-12

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

ezgif-7-a2868021c67d.gif

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

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

画像を切り替えるために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かどうかは画像のマイグレーションファイルでどう設定したかにもよるので各自の環境を確認してください)

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

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?