Rails中使用layer.photos来预览图片

之前写了篇学习笔记Rails中使用layer弹窗组件，这篇写写如何在Rails中使用layer的photos来实作图片预览。

正文

在其文档的layer.photos中，有用法的详细说明。两种方式：

直接读取页面图片
传入json

来看一下每种方式的具体使用。

直接读取页面图片：

官方给到的示例如下：

//HTML示例
<div id="layer-photos-demo" class="layer-photos-demo">
  <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
  <img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div>

<script>
//调用示例
layer.photos({
  photos: '#layer-photos-demo'
  ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
</script>

这里要说一下，如果一个页面里面，你需要多个弹窗时，如何处理？

假定现在有一系列产品，每个产品对应有多张图片。类似这样：

需要的效果是：这时，点击product1的某张图片，弹出的是product1的图片预览层，点击product2，弹出的是product2的图片预览层。

解决方法也很简单，套上一个动态的ID，需要用上JS，示例的代码如下：

//HTML示例
<% @products.each do |product| %>
    <div id="product-<%= product.id %>" class="layer-photos-demo">
      <% product.images.each do |image |%>
      <img  onclick= "getImage('<%= product.id %>');" layer-src="<%= image.src %>" src="<%= image.thumb %>" alt="图片名">
       <% end %>   
    </div>
<% end %>

<script>
    function getImage(productId){
        layer.photos({
            photos: '#product-' + productId,
            anim:5
        });
    }
</script>

JSON文件传入

官方文档示例：

$.getJSON('/jquery/layer/test/photos.json', function(json){
  layer.photos({
    photos: json
    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
  });
});

返回的JSON需严格按照如下格式：

{
  "title": "", //相册标题
  "id": 123, //相册id
  "start": 0, //初始显示的图片序号，默认0
  "data": [   //相册包含的图片，数组格式
    {
      "alt": "图片名",
      "pid": 666, //图片id
      "src": "", //原图地址
      "thumb": "" //缩略图地址
    }
  ]
}

在使用的时候，你可能会想是不是要生成一个JSON文件才能用这种方式? 其实并不需要。在Rails中可以用一个action的render，指定返回JSON格式的数据即可。

还是以product为例，三步走：

给它添加一个preview的action，在routes中声明

在routes.rb中添加：
```
resources :products do
  member do
    get :preview
  end
 end
```

在products_controller.rb中，定义preview的内容，返回JSON内容：

def preview
  @product = Product.find(params[:id])
  @images = @product.images.all
  @photo = {
      title: @product.title,
      id: @product.id,
      start: 0,
      data: @images.map do |image|
        {
            alt: image.title,
            pid: image.id,
            src: image.src,
            thumb: image.thumb
        }
      end
  }
  render json: @photo
end

返回的JSON内容，格式需要严格按照指定的格式去写。

在对应的html中，比如product的index页面，添加如下内容：

<% @products.each do |product| %>
    <div id="product-<%= product.id %>" class="layer-photos-demo">
      <a href="javascript:getImageJson('<%= product.id %>');">
      查看产品图片</a>
    </div>
<% end %>

<script>
    function getImageJson(productId) {
        $.getJSON('/products/' + productId + '/preview', function(json){
            layer.photos({
                photos: json,
                anim: 5
            });
        });
    }
</script>

刷新页面确认是否正常。

OK，大功告成。

参考

弹层组件文档 - layui.layer