【JA魔改秘笈】十分钟搞定产品图片动态显示



让我们开始吧!

Part 1 - 设定图片排列的HTML

app/views/products/show.html.erb
<!-- 显示第一章商品图片 - 使用 main 尺寸大圖 -->
<div class="col-md-12">
    <%= image_tag(@product_images.first.image.main.url, class: 'main-image thumbnail') %>
</div>

<!-- 显示所有商品图片 - 使用 other 尺寸小圖 -->
<% @product_images.each_with_index do |p| %>
    <div class="col-md-2 col-sm-4 col-xs-6 image-box">
        <%= image_tag(p.image.other.url, class: 'list-image thumbnail') %>
    </div>
<% end %>

<%= image_tag(@product_images.first.image.main.url) %>指的是抓取第一张图片(.first.image),及调用main这尺寸的图片(.main.url)
<%= image_tag(p.image.other.url) %>指的是调用other这尺寸的图片(.other.url)
col-md-2 col-sm-4 col-xs-6这样设定可以在不同尺寸的屏幕中,将每一列的图片数量作调整,让网站更美观

❖ 调用不同的图片尺寸,是为了抓取不同比例的图片,也是为了加快读取页面的速度 ❖

Part 2 - 在CSS设定图片属性,及选定后的属性

app/assets/stylesheets/application.scss
.main-image {
  width: 100%;
  margin-bottom: 10px;
}

.list-image {
    width: 100%;
}

.list-image-active {
    box-shadow: 1.5px 1.5px 1.5px #666;
}

.list-image-active这个属性是为了图片选择后,会在图片外框加上阴影,方便辨别

Part 3 - 在Javascript设定图片的触发行为

app/assets/javascripts/application.js
$(document).on('mouseover', '.list-image', function () {
  var src_other = $(this).attr('src') //抓取小图图片路径
  var src_main = src_other.toString().replace("other", "main") //更改小图图片路径

  $('.main-image').attr('src', src_main) //变更大图图片路径

  $('.list-image').removeClass('list-image-active') //其他小图移除图片阴影
  $(this).addClass('list-image-active') //当前小图新增图片阴影
})

$(document).on('mouseover', '.list-image', function () {})指的是当鼠标移至CSS属性为list-image的物件时,所触发的行为
$(this).attr('src')指的是抓取当前物件(在这范例中也就是鼠标滑过的物件)中的src内容(在这指的是图片路径)
src_other.toString().replace("other", "main")指的是将刚刚抓取的路径,从.image.other.url改为.image.main.url
$('.main-image').attr('src', src_main)指的是将大图的图片路径,更改为刚刚抓取并变更过的大图路径

❖ 因此这段Javascript的意思就是,当鼠标移至小图时,会抓取小图的图片路径,并存入将此图的大图路径存入src_main,并将原先大图的路径更改掉,完成换图的动作;同时将小图新增list-image-active这个CSS属性,方便辨别。 ❖

大功告成!!


Tips

在Javascript有许多种抓取到物件的方法,例如('#main-image')是抓取ID为main-image的单一物件;('.main-image')是抓取CSS为main-image的所有物件。可以依造需求去设定及抓取物件,更多的用法这边就暂不介绍,等待各位自行挖掘。


这功能会稍微复杂一点,里面涉及到图片上传时的一些设定,不过只要调整下就能实现功能了!看完范例后,也可以依自己的喜好去调整不同的效果。

如果有任何问题都可以在下方留言哦 :D

如果我的文章对你有帮助,欢迎打赏,谢谢你的支持! :D

comments powered by Disqus