如何使用不同的图片集创建弹出图片幻灯片

时间:2015-01-25 21:41:27

标签: javascript jquery html fancybox fancybox-2

我在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的工作方式。有什么建议吗?

1 个答案:

答案 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.

注意我们删除了IDonclick 属性,我们设置了classdata <相反,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")]按名称访问(全局定义的)数组

JSFIDDLE