有点困在这个。我正在为Shopify商店建立一个产品图片库,需要具备以下功能:
因此,您可以单击缩略图,将中等大小的图像加载到图像容器中,然后单击该中等大小的图像,将全尺寸图像显示为灯箱叠加。
这是我的标记:
<div id="imgcontainer">
<a href="assets/product-fullsize.jpg" class="overlay"><img src="assets/product-main.jpg" alt="product-main" width="360" height="231" /></a>
</div> <!-- End div#imgcontainer -->
<div id="thumbs">
<div class="thumbnav">
<ul>
<li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
<li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
<li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
<li><a href="assets/medium-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
<li><a href="assets/medium-2.jpg"><img src="assets/thumb-2.jpg" alt="thumb-2" width="100" height="70" /></a></li>
<li><a href="assets/medium-3.jpg"><img src="assets/thumb-3.jpg" alt="thumb-3" width="100" height="70" /></a></li>
</ul>
</div> <!-- End div#thumbnav -->
<a href="javascript:void(0);" class="tbpr"> </a>
<a href="javascript:void(0);" class="tbnx"> </a>
</div> <!-- End div#thumbs -->
</div> <!-- End div#main -->
有人可以推荐最好的方法吗? Shopify使用一种名为“Liquid”的语言,它允许我使用'foreach'语句输出图像的标记,甚至只输出三种类型的图像URL(缩略图,中等和全尺寸)。
请注意,图像文件名和位置没有简单的命名约定,因为它们是动态生成的,所以我不能只是将'fullsize'等文件的'medium'部分换掉。
感谢您的任何指示,
大须
答案 0 :(得分:1)
您可以将全尺寸网址存储为锚点上的数据属性吗?如,
<li><a href="assets/medium-1.jpg" data-fullsize="assets/fullsize-1.jpg">
<img src="assets/thumb-1.jpg" alt="..." /></a></li>
然后你可以使用类似的东西:
$('a[data-fullsize]').click( function() {
var $this = $(this);
$('#imgcontainer a:first').attr('href',$this.data('fullsize'))
.find('img')
.attr('src',$this.attr('href'));
return false;
});
$('#imgcontainer').on('click','a:first',function() {
// load href into lightbox
return false;
});
答案 1 :(得分:1)
我会将链接的路径添加为数据属性..
添加大图片信息
<li><a href="assets/medium-1.jpg" data-zoomimage="assets/big-1.jpg"><img src="assets/thumb-1.jpg" alt="thumb-1" width="100" height="70" /></a></li>
处理点击次数( jQuery v1.7 )
首先为拇指 - &gt;介质
$('.thumbnav').on('click','a',function(e){
e.preventDefault();
var self = $(this);
$('#imgcontainer a') // find the link
.attr('href',self.data('zoomimage') ) // and update its href to point to the zoom
.find('img') // fint the image inside
.attr('src', self.attr('href') ); // and load the medium
});
然后为媒体 - &gt;变焦
$('#imgcontainer').on('click','a',function(e){
e.preventDefault();
var self = $(this);
// use lightbox system to load the link's href.. self.attr('href')
});