Question

有谁知道如何制作像这样的照片库？它是插件吗？我正在使用CakePHP，并希望有这样的东西。

感谢您的帮助

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以获得适当的样式，但它就在那里......

Stylelist和赫芬顿邮政照片库

1 个答案: