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

Question

我正在 html 中创建一个表格，显示产品和不同的信息。当用户单击表格的一个单元格中的产品照片时，我希望它打开一个图片 slider ，其中包含该产品的不同图片(这些图片网址保存在每个数组中)我尝试使用 fancybox 但效果是不是我要找的。 fancybox 的所有示例都已在页面上显示所有图片，并使用弹出图片 slider 循环浏览所有图片。我的代码设置如下:

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

Answer 1

请记住

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

...将任何元素(通常是 anchor <a> 标签)绑定(bind)到 fancybox，因此正如您提到的，这些元素几乎应该先前存在于页面上。

您仍然可以将每组图像放在自己的数组中，并使用 $.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 属性代替。

然后我们就可以绑定(bind)一个 click事件到(类).img选择器调用 $.fancybox.open()方法编程如下:

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

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