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

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

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

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

先感谢您

最佳答案

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

我正在做的是在父级上使用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
    });
});


这是一个小提琴:Demo

关于jquery - 在jquery画廊的缩略图和大图之间切换?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21190792/

10-10 23:17
查看更多