layer弹出相册层

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

1、经过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.页面效果

2、使用layer插件作出照片弹出

一、引入文件

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

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

二、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文件的。必须放在同级。只要保证相对路径是这样的就能够了。

若是有兴趣能够找找缘由，为何须要这么放，或者亲自试一试，看看到底须要怎么部署。

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