はじめに

某フリマサイトの模写作成中の備忘録です。
このように簡単に表示切り替えをつける方法を紹介します！

解決方法

[~.html.haml]

こちらは、コントローラーで「@images = @product.images」を定義して
DBからデータを取得し配列の[0]番目を大きい枠の表示にし、下の小さい枠にeachを使い順番に表示させています。

[~.js]

こちらで、class:"details__photo__under__image"をクリックすると
$(this).attr("src");　でクリックされた要素を取得する
("img#mainphoto").attr({src:ImgSrc});　で表示させる
$("img#mainphoto").hide();
$("img#mainphoto").fadeIn(); で要素を隠しながらふわっと表示するように見せています。

jQueryはアニメーションが色々できるので面白いですね〜☆