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

若是有興趣能夠找找緣由，爲何須要這麼放，或者親自試一試，看看到底須要怎麼部署。

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