使用jQuery创建响应式全屏照片墙（点击可触发Slider）

悬停时高亮，以突显该选中的图片。

模板，教程

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
    <link rel="stylesheet" href="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/css/style.css" type="text/css" media="screen" />
    <style>
        a {
            color: #fff;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="infobar">
        <span id="description"></span>
        <span id="loading">Loading Image</span>
    </div>
    <div id="thumbsWrapper">
        <div id="content">
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/1.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/1.jpg" title="Beatriz_Florido_01 © studio.es" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/2.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/2.jpg" title="Nuria_09 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/3.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/3.jpg" title="Nuria_08 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/4.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/4.jpg" title="Nuria_07 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/5.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/5.jpg" title="Nuria_06 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/6.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/6.jpg" title="Nuria_05 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/7.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/7.jpg" title="Nuria_04 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/8.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/8.jpg" title="Nuria_03 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/9.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/9.jpg" title="Nuria_02 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/10.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/10.jpg" title="Nuria_01 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/11.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/11.jpg" title="Janne_Nielsen_07 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/12.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/12.jpg" title="Janne_Nielsen_03 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/13.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/13.jpg" title="Janne_Nielsen_06 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/14.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/14.jpg" title="Janne_Nielsen_05 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/15.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/15.jpg" title="Janne_Nielsen_04 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/16.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/16.jpg" title="Janne_Nielsen_01 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/17.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/17.jpg" title="Beatriz_Ruiz_10 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/18.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/18.jpg" title="Beatriz_Ruiz_08 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/19.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/19.jpg" title="Beatriz_Ruiz_06 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/20.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/20.jpg" title="Beatriz_Ruiz_05 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/21.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/21.jpg" title="Beatriz_Ruiz_04 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/22.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/22.jpg" title="Beatriz_Ruiz_02 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/23.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/23.jpg" title="Beatriz_Ruiz_01 © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/24.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/24.jpg" title="Fashion 9  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/25.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/25.jpg" title="_MG_4859  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/26.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/26.jpg" title="_MG_4900  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/27.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/27.jpg" title="_MG_4756  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/28.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/28.jpg" title="fashion 15  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/29.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/29.jpg" title="Fashion 6  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/30.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/30.jpg" title="fashion 12  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/31.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/31.jpg" title="fashion 14  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/32.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/32.jpg" title="fashion 13  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/33.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/33.jpg" title="Fashion 11  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/34.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/34.jpg" title="Fashion 10  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/35.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/35.jpg" title="Fashion 8  © studio.es by Vincent Boiteau" />
            <img src="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/thumbs/36.jpg" alt="https://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/images/36.jpg" title="Fashion 7  © studio.es by Vincent Boiteau" />

/* 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': '0.4'
                }, 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() {
                        /*
                        if the picture has a description,
                        it's stored in the title attribute of the thumb;
                        show it if it's not empty
                         */
                        var title = $this.attr('title');
                        if (title != '')
                            $('#description').html(title).show();
                        else
                            $('#description').empty().hide();

/*
                        if our picture is the first one,
                        don't show the "previous button"
                        for the slideshow navigation;
                        if our picture is the last one,
                        don't show the "next button"
                        for the slideshow navigation
                         */
                        if (current == 0)
                            $('#prev').hide();
                        else
                            $('#prev').fadeIn();
                        if (current == parseInt(totalpictures - 1))
                            $('#next').hide();
                        else
                            $('#next').fadeIn();
                        /*
                        we set the z-index and height of the thumbs wrapper 
                        to 0, because we want to slide it up afterwards,
                        when the user clicks the large image
                         */
                        $('#thumbsWrapper').css({
                            'z-index': '0',
                            'height': '0px'
                        });
                    });
                }).attr('src', $this.attr('alt'));
            });

/*
            when hovering a large image,
            we want to slide up the thumbs wrapper again,
            and reset the panel (like it was initially);
            this includes removing the large image element
             */
            $('#wrapper > img').live('click', function() {
                $this = $(this);
                $('#description').empty().hide();

$('#thumbsWrapper').css('z-index', '10')
                    .stop()
                    .animate({
                        'height': '100%'
                    }, speed, function() {
                        var $theWrapper = $(this);
                        $('#panel').css('height', '0px');
                        $theWrapper.css('z-index', '0');
                        /* 
                        remove the large image element
                        and the navigation buttons
                         */
                        $this.remove();
                        $('#prev').hide();
                        $('#next').hide();
                    });
            });

/*
            when we are viewing a large image,
            if we navigate to the right/left we need to know
            which image is the corresponding neighbour.
            we know the index of the current picture (current),
            so we can easily get to the neighbour:
             */
            $('#next').bind('click', function() {
                var $this = $(this);
                var $nextimage = $('#content img:nth-child(' + parseInt(current + 2) + ')');
                navigate($nextimage, 'right');
            });
            $('#prev').bind('click', function() {
                var $this = $(this);
                var $previmage = $('#content img:nth-child(' + parseInt(current) + ')');
                navigate($previmage, 'left');
            });

/*
            given the next or previous image to show,
            and the direction, it loads a new image in the panel.
             */
            function navigate($nextimage, dir) {
                /*
                if we are at the end/beginning
                then there's no next/previous
                 */
                if (dir == 'left' && current == 0)
                    return;
                if (dir == 'right' && current == parseInt(totalpictures - 1))
                    return;
                $('#loading').show();
                $('<img/>').load(function() {
                    var $theImage = $(this);
                    $('#loading').hide();
                    $('#description').empty().fadeOut();

$('#wrapper img').stop().fadeOut(500, function() {
                        var $this = $(this);

$this.remove();
                        resize($theImage);

$('#wrapper').append($theImage.show());
                        $theImage.stop().fadeIn(800);

var title = $nextimage.attr('title');
                        if (title != '') {
                            $('#description').html(title).show();
                        } else
                            $('#description').empty().hide();

if (current == 0)
                            $('#prev').hide();
                        else
                            $('#prev').show();
                        if (current == parseInt(totalpictures - 1))
                            $('#next').hide();
                        else
                            $('#next').show();
                    });
                    /*
                    increase or decrease the current variable
                     */
                    if (dir == 'right')
                        ++current;
                    else if (dir == 'left')
                        --current;
                }).attr('src', $nextimage.attr('alt'));
            }

/*
            resizes an image given the window size,
            considering the margin values
             */
            function resize($image) {
                var windowH = $(window).height() - 100;
                var windowW = $(window).width() - 80;
                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;
                        }
                    }
                }
                $image.css({
                    'width': theImage.width + 'px',
                    'height': theImage.height + 'px'
                });
            }
        });
    </script>
</body>

</html>

悬停时高亮，以突显该选中的图片。

模板，教程

编辑器支持Emmet

快捷键

悬停时高亮，以突显该选中的图片。

模板，教程

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

使用jQuery和CSS3创建交互式图片工作台

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：