스타일리스트 및 huffington 사진 갤러리

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를 가져와야 할 것입니다. 그러나 모두 거기에 있습니다 ...