layer 弹出相册层 (图片展示方式)

如果想要制作一个简单的相册，可以采用这个插件的方法。如果你的图片是从后台传过来的json格式里，可以通过ajax加载让图片显示在页面上，然后在使用layer插件，做出点击以后就可以查看大图的效果。

一、通过ajax请求动态获取json，然后在得到json中的图片的地址。

1.页面

<div class="main" id="main"></div>

2.ajax请求

<script>
        $(document).ready(function(){
          $.ajax({
               url:'img.json',
              type: "get",
              dataType: "json",
              success:function(data){
                  var authors=data.authors;
                  //var img=authors[0].imagesurl;
                  for(var i=0;i<authors.length;i++){
                      $("#main").append('<img class="list" id="list'+i+'" src='+authors[i].imagesurl+' title='+authors[i].imagesurl1+' alt='+authors[i].imagesname+'/>')
                  }
              },
        });

     })

3.页面效果

二、使用layer插件做出照片弹出

1、引入文件

这里我要说一些注意事项：

（1）、可能有些网站还会引入layer.ext.js这个文件，其实是不需要引入的，但是这个文件是有用的，还是要有这个文件的。layer.css这个文件也是要有的，但是也不需要引入。

2、ajax加载完成后设置弹出层。

$(document).ready(function(){
          $.ajax({
               url:'img.json',
              type: "get",
              dataType: "json",
              success:function(data){
                  var authors=data.authors;
                  //var img=authors[0].imagesurl;
                  for(var i=0;i<authors.length;i++){
                      $("#main").append('<img class="list" id="list'+i+'" src='+authors[i].imagesurl+' title='+authors[i].imagesurl1+' alt='+authors[i].imagesname+'/>')
                  }
                ;!function(){
                layer.use('layer.ext.js', function(){
                 //初始加载即调用，所以需放在ext回调里
                layer.ext = function(){
                layer.photosPage({
                title: '获取页面元素包含的所有图片',
                parent:'#main'
                              });
                    };
                  });
                }();
                               
              },
        });
     })

这个数据加载成功以后的函数是即时函数，并且我们不需要通过循环给每个图片添加点击事件。

3、效果如图。

三、（1）这是非常重要的一点，可能会出现的错误layer.use is not a function

原因是我们引入文件夹的路径不对。layer.min.js文件和layer.ext.js文件如果在同一个路径下，那么，代码中layer.use('layer.ext.js', function(){这一行就是直接写layer.ext.js就可以了。如果是这样的关系，如图：

如果是这样的关系，那么代码就是layer.use('extend/layer.ext.js', function(){。

（2）、如果遇到这样的错误，就是我们的样式文件路径不对。

下载layer这个插件包的时候会有一个skin文件夹，我们需要把这个文件放在如图所示的路径：

这个skin文件的路径也是相对于layer.min.js文件的。必须放在同级。只要保证相对路径是这样的就可以了。

如果有兴趣可以找找原因，为什么需要这么放，或者亲自试一试，看看到底需要怎么部署。

总之，大胆的尝试。行动使一切成为可能。

layer 弹出相册层 (图片展示方式)

猜你喜欢