Web/skin/js/photoslide.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

            $(function() {
                /* this is the index of the last clicked picture */
                var current = -1;
                /* number of pictures */
                var totalpictures = $('#content img').size();
                /* speed to animate the panel and the thumbs wrapper */
                var speed 	= 500;
				
                /* show the content */
                $('#content').show();
				
                /*
                when the user resizes the browser window,
                the size of the picture being viewed is recalculated;
                 */
                $(window).bind('resize', function() {
                    var $picture = $('#wrapper').find('img');
                    resize($picture);
                });
               
                /*
                when hovering a thumb, animate it's opacity
                for a cool effect;
                when clicking on it, we load the corresponding large image;
                the source of the large image is stored as 
                the "alt" attribute of the thumb image
                 */
                $('#content > img').hover(function () {
                    var $this   = $(this);
                    $this.stop().animate({'opacity':'1.0'},200);
                },function () {
                    var $this   = $(this);
                    $this.stop().animate({'opacity':'1.0'},200);
                }).bind('click',function(){
                    var $this   = $(this);
                    
                    /* shows the loading icon */
                    $('#loading').show();
                    
                    $('<img/>').load(function(){
                        $('#loading').hide();
                        
                        if($('#wrapper').find('img').length) return;
                        current 	= $this.index();
                        var $theImage   = $(this);
                        /*
                        After it's loaded we hide the loading icon
                        and resize the image, given the window size;
                        then we append the image to the wrapper
                        */
                        
                        resize($theImage);

                        $('#wrapper').append($theImage);
                        /* make its opacity animate */
                        $theImage.fadeIn(800);
                        
                        /* and finally slide up the panel */
                        $('#panel').animate({'height':'100%'},speed,function(){