我在html中创建一个表格,显示产品和不同的信息。当用户点击表格的一个单元格中的产品照片时,我希望它打开一个包含该产品的不同图片的图片滑块(这些图片网址保存在他们的每个数组中)我尝试使用fancybox但效果不是我正在寻找什么。 fancybox的所有示例都已经在页面上显示了所有图片,并使用弹出图片滑块来循环浏览所有图片。我的代码设置如下:
<!-- FANCYBOX LINKS NOT INCLUDED IN EXAMPLE -->
<script>
$(document).ready(function(){
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
});
function displayPics(aPics){
//the pop up carousel slider for more pictures
}
// add pictures as they come
var CT4by6 = [
'images/cargotrailers/4x6/4x6-1.jpg',
];
var CT5by8 = [
'images/cargotrailers/5x8/5x8-1.jpg',
];
function showPics(imgNum){
switch (imgNum){
case 'img1':
// pass to function that displays sliders
displayPics(CT4by6);
break;
case 'img2':
// pass to function that displays sliders
displayPics(CT5by8);
break;
default:
break;
}
}
</script>
HTML:
<table class="table table-bordered">
<tr>
<th>Trailer Model</th>
<th>Unit Number</th>
<th>Daily Price</th>
<th>Weekend Only*</th>
<th>Weekly**</th>
<th>Monthly**</th>
</tr>
<tr>
<td>
<!-- Image -->
<img src="images/cargotrailers/4x6.jpg" id="img1" onclick="showPics('img1')" />
</td>
</tr>
</table>
当我点击相应的图片时,我有点卡在可以传递图片网址的位置,但据我所知,这不是fancybox的工作方式。有什么建议吗?
答案 0 :(得分:1)
请记住
$(".fancybox-thumbs").fancybox({
// API options
});
...将任何元素(通常是一个锚<a>
标签)绑定到fancybox,因此,如上所述,这些元素之前应该存在于页面上。
您仍然可以将每组图像放在自己的数组上,然后使用$.fancybox.open()
方法以编程方式在fancybox中打开它们。
但首先,您需要修改HTML才能传递数组的名称,fancybox将从中获取 gallery 元素。为此,您可以使用(HTML5)data
属性,如:
<img class="img" data-href="CT4by6" src="images/cargotrailers/4x6.jpg" />
<img class="img" data-href="CT5by8" src="images/cargotrailers/5x8.jpg" />
....etc.
注意我们删除了ID
和onclick
属性,我们设置了class
和data
<相反,em> attributes 。
然后我们可以将click
事件绑定到( class ).img
选择器,以编程方式调用$.fancybox.open()
方法,如:
$(".img").on("click", function(){
$.fancybox.open(window[$(this).data("href")],{
// API options
}); // fancybox
}); // click
请注意,我们使用window[$(this).data("href")]
按名称访问(全局定义的)数组。