Stylelist and huffington post photo gallery

Question

有誰知道如何製作像這樣的照片庫？它是一個插件嗎？我正在使用CakePHP，並希望有這樣的事情。

感謝您的幫助

Styelist Photo Gallery

http://www.stylelist.com/2012/08/29/eva-longoria-red-carpet-fashion-mistakes_n_1837629.html 

Answer 1

如果你看看源，它都在那裏。在<script type="application/json"></script>標記中包含一個JSON塊。有標記：

<div id="hp-slideshow-ad-div-247282" style="display:none"> 
     <div id="ad_slideshow_300x250_req" class="ad_wrapper"></div> 
</div> 

有內聯樣式塊，再有就是JS來設置它：

<script type="text/javascript" src="/include/lib/_slideshows/require.min.js" ></script> 
<script type="text/javascript"> 
(function($) { 
    $(function() { 

     var $wrapper = $('#hp-slideshow-wrapper-247282'); 
     var $window = $(window); 
     var loaded = false; 

     var ready = function() { 
      if (loaded) { 
       return; 
      } 
      loaded = true; 

      require.config({ 
       baseUrl : '/include/lib/', 
       paths : { 'slideshows' : '_slideshows/modules', 'slideshow_styles' : '_slideshows/modules' } 
      }); 

      require(['http://s.huffpost.com/assets/js.php?f=jquery%2Fui%2Fjquery.ui.core.min.js%2Cjquery%2Fui%2Fjquery.ui.widget.min.js%2Cjquery%2Fui%2Fjquery.ui.mouse.min.js%2Cjquery%2Fui%2Fjquery.ui.draggable.min.js%2Cjquery%2Fplugins%2Fjquery.easing.1.3.js%2Cjquery%2Fplugins%2Fjquery.mousewheel.min.js&amp;vcfcd20','http://s.huffpost.com/assets/js.php?f=jquery%2Fplugins%2Fjquery.scrollbar.js&amp;vcfcd20'], function() { 
       require.config({ urlArgs : 'v=1' }); 
       require([ 'slideshows/min/slideshowcore.built' ], function() { 

        var modules = arguments.length > 1 ? Array.prototype.slice.call(arguments, 1) : [ ]; 


        $wrapper.removeClass('hp-slideshow-wrapper-loading').slideshow({ 
         modules : modules, 
         include : ['css','slides','inline','arrows','thumbs','expand_base','leaderboard','expand_details','fullscreen','timer','chain','social','sort']     }); 

       }); 
       require.config({ urlArgs : '' }); 
      }); 
     }; 

     var windowScroll = function() { 
      if ($window.scrollTop() + $window.height() > $wrapper.offset().top){ 
       $window.unbind('scroll', windowScroll); 
       ready(); 
       return true; 
      } 
     }; 

     var match = location.hash.match(/slide=[^&]*/i), sid = 0, target; 
     if (match != null && match[0].split('slide=')[1].match(/\d+/)) { 
      ready(); 
     } 
     else if (!windowScroll()) { 
      $window.bind('scroll', windowScroll); 
     } 

    }); 
}(jQuery)); 
</script> 

你可以很容易地拉出JS​​並進行一些小的修改並將其製作成插件。有可能需要一些其他資產（按鈕圖像等），你必須抓住所有的CSS適當的造型，但它都在那裏...