如何使用jQuery和PHP创建一个带缩略图预览功能的幻灯片

Fresh Sliding Thumbnails Gallery with jQuery and PHP 本例PHP只返回固定的json数组。

教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2264
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    /* name of the selected album, in the top right combo box */
    var album = $('#albumSelect div').html();
    /* mode is small or expanded, depending on the picture size  */
    var mode = 'small';
    /* this is the index of the last clicked picture */
    var current = 0;

/* first, let's build the thumbs for the selected album */
    buildThumbs();

/*
    clicking on a thumb loads the image
    (alt attribute of the thumb is the source of the large image);
    mouseover and mouseout for a nice spotlight hover effect
    */
    $('#thumbsContainer img').live('click', function() {
        loadPhoto($(this), 'cursorPlus');
    }).live('mouseover', function() {
        var $this = $(this);
        $this.stop().animate({
            'opacity': '1.0'
        }, 200);
    }).live('mouseout', function() {
        var $this = $(this);
        $this.stop().animate({
            'opacity': '0.4'
        }, 200);
    });
    /* when resizing the window resize the picture */
    $(window).bind('resize', function() {
        resize($('#displayed'), 0);
    });
    /* Album Combo Events to open, close, and select an album from the combo */
    $('#albumSelect div').bind('click', function() {
        var $this = $(this);
        if ($this.is('.up'))
            closeAlbumCombo();
        else if ($this.is('.down'))
            openAlbumCombo();
    });
    $('#albumSelect ul > li').bind('click', function() {
        var $this = $(this);
        album = $this.find('a').html();
        buildThumbs();
        var $combo = $('#albumSelect div');
        $this.find('a').html($combo.html());
        $combo.html(album);
        closeAlbumCombo();
        orderCombo($this.parent());
    });
    /*
	when hovering the main image change the mouse icons (left,right,plus,minus) 
	also when clicking on the image, expand it or make it smaller depending on the mode
	*/
    $('#displayed').live('mousemove', function(e) {
        var $this = $(this);
        var imageWidth = parseFloat($this.css('width'), 10);

function openAlbumCombo() {
        var $combo = $('#albumSelect div');
        $combo.addClass('up').removeClass('down');
        $combo.prev().show();
    }

function orderCombo($ul) {
            var items = $ul.find('li').get();
            items.sort(function(a, b) {
                var keyA = $(a).text();
                var keyB = $(b).text();

if (keyA < keyB) return -1;
                if (keyA > keyB) return 1;
                return 0;
            });
            $.each(items, function(i, li) {
                $ul.append(li);
            });
        }
        //Get our elements for faster access and set overlay width
    function makeScrollable($wrapper, $container, contPadding) {
            //Get menu width
            var divWidth = $wrapper.width();

//Remove scrollbars
            $wrapper.css({
                overflow: 'hidden'
            });

//Find last image container
            var lastLi = $container.find('img:last-child');
            $wrapper.scrollLeft(0);
            //When user move mouse over menu
            $wrapper.unbind('mousemove').bind('mousemove', function(e) {

//As images are loaded ul width increases,
                //so we recalculate it each time
                var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + contPadding;

var left = (e.pageX - $wrapper.offset().left) * (ulWidth - divWidth) / divWidth;
                $wrapper.scrollLeft(left);
            });
        }
        /* function to resize an image based on the windows width and height */
    function resize($image, type) {
        var widthMargin = 10
        var heightMargin = 0;
        if (mode == 'expanded')
            heightMargin = 60;
        else if (mode == 'small')
            heightMargin = 150;
        //type 1 is animate, type 0 is normal
        var windowH = $(window).height() - heightMargin;
        var windowW = $(window).width() - widthMargin;
        var theImage = new Image();
        theImage.src = $image.attr("src");
        var imgwidth = theImage.width;
        var imgheight = theImage.height;

if ((imgwidth > windowW) || (imgheight > windowH)) {
            if (imgwidth > imgheight) {
                var newwidth = windowW;
                var ratio = imgwidth / windowW;
                var newheight = imgheight / ratio;
                theImage.height = newheight;
                theImage.width = newwidth;
                if (newheight > windowH) {
                    var newnewheight = windowH;
                    var newratio = newheight / windowH;
                    var newnewwidth = newwidth / newratio;
                    theImage.width = newnewwidth;
                    theImage.height = newnewheight;
                }
            } else {
                var newheight = windowH;
                var ratio = imgheight / windowH;
                var newwidth = imgwidth / ratio;
                theImage.height = newheight;
                theImage.width = newwidth;
                if (newwidth > windowW) {
                    var newnewwidth = windowW;
                    var newratio = newwidth / windowW;
                    var newnewheight = newheight / newratio;
                    theImage.height = newnewheight;
                    theImage.width = newnewwidth;
                }
            }
        }
        if ((type == 1) && (!$.browser.msie))
            $image.stop(true).animate({
                'width': theImage.width + 'px',
                'height': theImage.height + 'px'
            }, 1000);
        else
            $image.css({
                'width': theImage.width + 'px',
                'height': theImage.height + 'px'
            });
    }
});

编译

CSS

HTML

Fresh Sliding Thumbnails Gallery with jQuery and PHP 本例PHP只返回固定的json数组。

教程

编辑器支持Emmet

快捷键

Fresh Sliding Thumbnails Gallery with jQuery and PHP 本例PHP只返回固定的json数组。

教程

使用jQuery实现在文章内嵌的图片高亮和预览放大功能

如何使用jQuery创建一个包含多项的滑块（Slider）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：