在jquery画廊的缩略图和大图之间切换？

Question

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

我真的很喜欢的一个功能就是这个（示例）： http : //www.robindmoore.com/#!/index/G0000n_GEYuF3.rM/1

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

我不想复制画廊，我只是想复制此属性。 如果您对如何开始工作有任何想法，我将不胜感激。

先感谢您

Answer 1

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

我正在做的是在父column-count上使用column-count将所有图像分解成均匀的行，当前它设置为3行，但可以更多或更少。

（取决于幻灯片功能，这取决于您。有成千上万的幻灯片教程，插件等。）

然后，我将单击的img标签的src转换为变量。 然后，脚本采用该var ，并通过.css()将其添加到overlay类。 这将使您可以单击每个图像。

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
    });
});

这是一个小提琴： 演示