Question

我在StackOverflow上找到了很多东西，尝试了不同的东西来实现我想要的东西，但我在这里坚持了这一点。

我的HTML中有一个Text，如果我点击此文本，应该用图像库打开一个fancybox，图像应该来自images数组。

现在发生的事情是，它打开了一个破碎的花式盒，没有任何造型，不透明，关闭按钮。这是一个它的样子的例子！ the broken Fancybox

我的Javascript如下

$(function(){
    $("#turn_all_pictures").click(function(){
        if(images.length == 0){
            loadImages();
        }
        $(this).fancybox();

        $.fancybox.open(
        images,
        {
            'autoScale': true,
            'autoDimensions': true,
            'centerOnScroll': true,
            helpers:{
                overlay:{
                    css:{
                        'background' : 'rgba(58, 42, 45, 0.95)'
                    }
                },
                buttons:{}
            }
        });
    }); 
})

数组中的条目如下所示，根据此Stack Overflow Q/A

，该条目应该是正确的

Object { href="<img class="hidden_img fancybox" rel="turn_gallery" src="../../../images/1085/5263-3-medium.jpg"/>"}

所需的HTML是：

<p><span class="turn_left" id="turn_all_pictures">Alle Bilder anzeigen</span></p><br>

我做错了什么，我错过了什么，以便fancybox打开正确格式化，并使用图像库而不是HTML中的文本？

修改

我尝试将我的loadImages()函数中的图像附加到div，然后使用我的fancybox引用此div。

$.fancybox.open(
    images,
    {
        // 'autoScale': true,
        // 'autoDimensions': true,
        // 'centerOnScroll': true,
        // helpers:{
        //     overlay:{
        //         css:{
        //             'background' : 'rgba(58, 42, 45, 0.95)'
        //         }
        //     },
        // buttons:{}
        href: '#hidden_pictures'
    }
)

这将显示所有图片，整个div，在fancybox中，所以我猜测它与images数组有关

Answer 1

检查您是否已按照以下格式传递图像数组：

[ 
  {
    href: 'image1.jpg',
    title: 'title 1'
  },
  {
    href: 'image2.jpg',
    title: 'title 2'
  }
]

确保您已正确包含css（检查路径）

另见this

Answer 2

检查资源的位置，例如CSS和fancybox的图像。您还可以使用firebug或某些DOM检查工具检查您的DOM，以查看您的资源是否已找到资源。

我使用了firebug并查看了显示对资源的http请求的NET选项卡。如果找不到，您可能会看到404错误。

在文本上单击事件后打开fancybox Gallery

2 个答案: