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文件的。必須放在同級。只要保證相對路徑是這樣的就可以了。

如果有興趣可以找找原因，為什么需要這么放，或者親自試一試，看看到底需要怎么部署。

總之，大膽的嘗試。行動使一切成為可能。