jquery - 在 jquery 画廊中切换缩略图和大图像？

Question

我是初学者(对不起我的英语)，我正在尝试为我自己的网站构建一个基于 jquery 的图片库。

我真正喜欢的功能是这个(示例):http://www.robindmoore.com/#!/index/G0000n_GEYuF3.rM/1

您有一个大缩略图网格，当您单击其中一个拇指时，网格会消失以在幻灯片中显示“大”图像。从幻灯片本身，您可以通过单击专用图标切换回拇指。我想这种画廊是基于 jquery，但我不明白如何从拇指和幻灯片(反之亦然)切换...也许是 css3 关键帧？

我不想复制画廊，我只是想复制这个属性。如果您对我如何开始处理它有任何想法，我将不胜感激。

提前致谢

Answer 1

我刚刚编写的这个小脚本应该可以帮助您入门。

我正在做的是在父级上使用 column-count 将所有图像分成漂亮的偶数行，目前它设置为 3 行，但可以更多或更少。

(对于幻灯片功能，这取决于您。有数以千计的幻灯片教程、插件等)

然后我将点击的 img 标签的 src 变成一个变量。然后该脚本采用该 var 并通过 .css() 将其添加到覆盖类。这将使您可以叠加点击的每张图片。

HTML 结构:

<div class="parent">
    <img src="urlGoesHere" alt="img" />
    <!-- Continue with the images -->
</div>

CSS:

.parent {
    width: 100%;
    column-count: 3; /* controls the amount of columns */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-gap: 5px; /* controls the spacing between each column */
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    -o-column-gap: 5px;
    -ms-column-gap: 5px;
    position: relative;
    z-index: 10;
}

脚本:

$('.parent img').on('click', function() {
   var imgSrc = $(this).attr('src'); // Stores the img's src into a var

    $('.overlay').fadeIn().css('background-image', 'url(' + imgSrc + ')'); // Adds the stored var to the overlay class and fades it in

    $('.close').on('click', function() { // The close button's functionality
        $('.overlay').fadeOut(); // Hides the overlay once clicked
    });
});

这是一个 fiddle :Demo