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'
                              });
                    };
                  });
                }();
                               
              },
        });
     })