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

Question

我正在 html 中创建一个 table 来显示产品和不同的信息。当用户点击 table 的一个单元格中的产品照片时，我希望它打开一个包含该产品不同图片的图片滑块（这些图片网址保存在它们的每个数组中）我尝试使用 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>

我有点卡在单击适当的图片时可以传递图片 url 数组的位置，但据我所知，这不是 fancybox 的工作方式。有什么建议吗？

Answer 1

请记住

$(".fancybox-thumbs").fancybox({
    // API options
});

...将任何元素（通常是锚点 <a> 标记）绑定到 fancybox，因此正如您提到的那样，这些元素以前应该存在于页面上。

您仍然可以将每组图像放在自己的 array 中，并使用 $.fancybox.open() 方法以编程方式在 fancybox 中打开它们。

但首先，您需要修改 HTML 以便传递数组的名称，fancybox 将从那里获取画廊个元素。为此，您可以使用 (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 属性代替。

然后我们可以给(class).img选择器绑定一个click事件来调用$.fancybox.open()方法以编程方式喜欢：

$(".img").on("click", function(){
    $.fancybox.open(window[$(this).data("href")],{
        // API options
    }); // fancybox
}); // click

请注意，我们使用 window[$(this).data("href")] 通过其名称访问（全局定义的）数组。

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

How to create a pop up picture slide with a different set of pictures

html

javascript

jquery

fancybox

fancybox-2