我是初学者(对不起我的英语),我正在尝试为自己的网站建立一个基于jquery的照片库。
我真正喜欢的一个功能就是这个(例子):http://www.robindmoore.com/#!/index/G0000n_GEYuF3.rM/1
你有一个很大的缩略图网格,当你点击其中一个拇指时,网格会消失,以显示幻灯片中的“大”图像。从幻灯片本身,您可以通过单击专用图标切换回拇指。我想这种画廊是基于jquery但我不明白如何切换拇指和幻灯片(反之亦然)... css3关键帧可能吗?
我不想复制画廊,我只是想复制这个属性。如果您对我如何开始研究有任何想法,我会很高兴。
提前谢谢
答案 0 :(得分:0)
我刚写的这个小脚本应该让你开始。
我正在做的是在父级上使用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
});
});
这是一个小提琴:Demo