[英]Click on image and open same image in lightbox and thumbnail , jQuery
I use of fancybox for show image in lightbox with thumbnail image,i want after clicked on each open_fancybox.img
, first show in lightbox, the picture was clicked. 我使用fancybox在带有缩略图的灯箱中显示图像,我想在单击每个
open_fancybox.img
,首先在灯箱中显示,然后单击图片。 And all the pictures from the first is not displayed. 并且不会显示第一张中的所有图片。
For example: if i clicked on 2_b.jpg
in lightbox and thumbnail image show(select) 2_s.jpg
. 例如:如果我单击灯箱中的
2_b.jpg
,缩略图显示(选择) 2_s.jpg
。
Or 要么
For example: if i clicked on 3_b.jpg
in lightbox and thumbnail image show(select) 3_s.jpg
. 例如:如果我单击灯箱中的
3_b.jpg
,缩略图显示(选择) 3_s.jpg
。
Or 要么
For example: if i clicked on 1_b.jpg
in lightbox and thumbnail image show(select) 1_s.jpg
. 例如:如果我单击灯箱中的
1_b.jpg
,缩略图显示(选择) 1_s.jpg
。
how can change just my code, without use fancybox based? 如何不使用基于fancybox的代码而只更改我的代码?
SEE DEMO: http://jsfiddle.net/fsfucmhd/ 查看演示: http : //jsfiddle.net/fsfucmhd/
<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
<a class="open_fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
<div class="Img" data-type="http://fancyapps.com/fancybox/demo/1_b.jpg" data-title="manual 1st title">1</div>
<div class="Img" data-type="http://fancyapps.com/fancybox/demo/2_b.jpg" data-title="2nd title"></div>
<div class="Img" data-type="http://fancyapps.com/fancybox/demo/3_b.jpg" data-title="3rd title"></div>
var arr = $('div.Img').map(function (elem) {
return {
href: $(this).data('type'),
title: $(this).data('title')
}
}).get();
$(".open_fancybox").click(function() {
$.fancybox.open(arr, {
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
helpers : {
title : {
type: 'over'
},
thumbs : {
width : 75,
height : 50,
source : function( item ) {
return item.href.replace('_b.jpg', '_s.jpg');
}
}
}
});
return false;
});
You should use fancybox based on their documentation. 您应该根据他们的文档使用fancybox。
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.