使用jQuery创建缩略图导航图片展览/相册

Thumbnails Navigation Gallery with jQuery 图片被分组浏览，每组有一个导航标签，导航标签悬停时展示可滚动缩略图列表。超级性感的图片，当然还有作品！

模板，教程

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

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

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/ThumbnailsNavigationGallery/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/../../RelatedPosts/css/posts.css" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="https://wow.techbrood.com/uploads/160101/tipsy.css" media="screen" />
    <script type="text/javascript" src="https://wow.techbrood.com/uploads/160101/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="https://wow.techbrood.com/uploads/160101/jquery.tipsy.js"></script>
    <script src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/js/cufon-yui.js" type="text/javascript"></script>
    <script src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/js/Quicksand_Book_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">
        Cufon.replace('span,p,h1,h3', {
            textShadow: '0px 0px 1px #ffffff'
        });
    </script>
</head>

<body>
    <div id="st_main" class="st_main">
        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/1.jpg" alt="" class="st_preview" style="display:none;" />
        <div class="st_overlay"></div>
        <h1>Mark Sebastian</h1>
        <div id="st_loading" class="st_loading"><span>Loading...</span>
        </div>
        <ul id="st_nav" class="st_navigation">
            <li class="album">
                <span class="st_link">Newest Collection<span class="st_arrow_down"></span></span>
                <div class="st_wrapper st_thumbs_wrapper">
                    <div class="st_thumbs">
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/1.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/1.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/2.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/2.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/3.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/3.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/4.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/4.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/5.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/5.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/6.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/6.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/7.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/7.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/8.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/8.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/9.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/9.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/10.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/10.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/11.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/11.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/3.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/3.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/4.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/4.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/5.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/5.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/6.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/6.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/7.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/7.jpg" />
                    </div>
                </div>
            </li>
            <li class="album">
                <span class="st_link">Random Photography<span class="st_arrow_down"></span></span>
                <div class="st_wrapper st_thumbs_wrapper">
                    <div class="st_thumbs">
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/12.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/12.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/13.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/13.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/14.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/14.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/15.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/15.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/16.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/16.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/17.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/17.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/18.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/18.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/19.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/19.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/20.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/20.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/21.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/21.jpg" />
                    </div>
                </div>
            </li>
            <li class="album">
                <span class="st_link">Best Shots<span class="st_arrow_down"></span></span>
                <div class="st_wrapper st_thumbs_wrapper">
                    <div class="st_thumbs">
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/8.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/8.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/9.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/9.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/10.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/10.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/11.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/11.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/15.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/15.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/16.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/16.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/17.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/17.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/18.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/18.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/1.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/1.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/2.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/2.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/3.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/3.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/4.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/4.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/5.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/5.jpg" />
                    </div>
                </div>
            </li>
            <li class="album">
                <span class="st_link">Award Winning Collection<span class="st_arrow_down"></span></span>
                <div class="st_wrapper st_thumbs_wrapper">
                    <div class="st_thumbs">
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/10.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/10.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/11.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/11.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/12.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/12.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/13.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/13.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/14.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/14.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/15.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/15.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/16.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/16.jpg" />
                        <img src="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/thumbs/17.jpg" alt="https://tympanus.net/Tutorials/ThumbnailsNavigationGallery/images/album/17.jpg" />
                    </div>
                </div>
            </li>
            <li>
                <span class="st_link">About<span class="st_arrow_down"></span></span>
                <div class="st_about st_thumbs_wrapper">
                    <div class="st_subcontent">
                        <p>
                            I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.
                        </p>
                    </div>
                </div>
            </li>
        </ul>
    </div>

<script type="text/javascript">
        $(function() {
            //the loading image
            var $loader = $('#st_loading');
            //the ul element
            var $list = $('#st_nav');
            //the current image being shown
            var $currImage = $('#st_main').children('img:first');

//let's load the current image
            //and just then display the navigation menu
            $('<img>').load(function() {
                $loader.hide();
                $currImage.fadeIn(3000);
                //slide out the menu
                setTimeout(function() {
                        $list.animate({
                            'left': '0px'
                        }, 500);
                    },
                    1000);
            }).attr('src', $currImage.attr('src'));

//calculates the width of the div element
            //where the thumbs are going to be displayed
            buildThumbs();

function buildThumbs() {
                $list.children('li.album').each(function() {
                    var $elem = $(this);
                    var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
                    var $thumbs = $thumbs_wrapper.children(':first');
                    //each thumb has 180px and we add 3 of margin
                    var finalW = $thumbs.find('img').length * 183;
                    $thumbs.css('width', finalW + 'px');
                    //make this element scrollable
                    makeScrollable($thumbs_wrapper, $thumbs);
                });
            }

//clicking on the menu items (up and down arrow)
            //makes the thumbs div appear, and hides the current
            //opened menu (if any)
            $list.find('.st_arrow_down').live('click', function() {
                var $this = $(this);
                hideThumbs();
                $this.addClass('st_arrow_up').removeClass('st_arrow_down');
                var $elem = $this.closest('li');
                $elem.addClass('current').animate({
                    'height': '170px'
                }, 200);
                var $thumbs_wrapper = $this.parent().next();
                $thumbs_wrapper.show(200);
            });
            $list.find('.st_arrow_up').live('click', function() {
                var $this = $(this);
                $this.addClass('st_arrow_down').removeClass('st_arrow_up');
                hideThumbs();
            });

//clicking on a thumb, replaces the large image
            $list.find('.st_thumbs img').bind('click', function() {
                var $this = $(this);
                $loader.show();
                $('<img class="st_preview"/>').load(function() {
                    var $this = $(this);
                    var $currImage = $('#st_main').children('img:first');
                    $this.insertBefore($currImage);
                    $loader.hide();
                    $currImage.fadeOut(2000, function() {
                        $(this).remove();
                    });
                }).attr('src', $this.attr('alt'));
            }).bind('mouseenter', function() {
                $(this).stop().animate({
                    'opacity': '1'
                });
            }).bind('mouseleave', function() {
                $(this).stop().animate({
                    'opacity': '0.7'
                });
            });

//function to hide the current opened menu
            function hideThumbs() {
                $list.find('li.current')
                    .animate({
                        'height': '50px'
                    }, 400, function() {
                        $(this).removeClass('current');
                    })
                    .find('.st_thumbs_wrapper')
                    .hide(200)
                    .andSelf()
                    .find('.st_link span')
                    .addClass('st_arrow_down')
                    .removeClass('st_arrow_up');
            }

//makes the thumbs div scrollable
            //on mouse move the div scrolls automatically
            function makeScrollable($outer, $inner) {
                var extra = 800;
                //Get menu width
                var divWidth = $outer.width();
                //Remove scrollbars
                $outer.css({
                    overflow: 'hidden'
                });
                //Find last image in container
                var lastElem = $inner.find('img:last');
                $outer.scrollLeft(0);
                //When user move mouse over menu
                $outer.unbind('mousemove').bind('mousemove', function(e) {
                    var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2 * extra;
                    var left = (e.pageX - $outer.offset().left) * (containerWidth - divWidth) / divWidth - extra;
                    $outer.scrollLeft(left);
                });
            }
            $('#relatedPosts').toggle(
                function() {
                    $('#rp_list').animate({
                        'bottom': '10px'
                    }, 500);
                },
                function() {
                    $('#rp_list').animate({
                        'bottom': '-50px'
                    }, 500);
                }
            );
            $('#rp_list a').tipsy({
                gravity: 's'
            });
        });
    </script>
</body>

</html>

Thumbnails Navigation Gallery with jQuery 图片被分组浏览，每组有一个导航标签，导航标签悬停时展示可滚动缩略图列表。超级性感的图片，当然还有作品！

模板，教程

编辑器支持Emmet

快捷键

Thumbnails Navigation Gallery with jQuery 图片被分组浏览，每组有一个导航标签，导航标签悬停时展示可滚动缩略图列表。 超级性感的图片，当然还有作品！

模板，教程

使用jQuery创建平行视差背景的图片轮播/相册

使用jQuery创建三面棱镜滑动图片展览

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Thumbnails Navigation Gallery with jQuery 图片被分组浏览，每组有一个导航标签，导航标签悬停时展示可滚动缩略图列表。超级性感的图片，当然还有作品！