Fancybox显示的是JSON文本而不是图像

Question

我使用FancyBox插件在点击DIV时显示图像。 这些图像是动态生成的，并作为JSON数据传递给fancybox open（）方法，如下面的小提琴所述。

http://jsfiddle.net/wg4MD/

灯箱正常打开。但它显示的是纯文本，而不是图像。

下面是我试过的示例JS代码

$("div.individualitems").each(function(){
    $(this).find("#previewHolder").click(function(){
        var imageString = '[{"href" : "http://www.testsite.com/test/testtest/img?page=0&size=322"}]';
        $.fancybox.open(imageString + ',{"type" : "image"}');
    });
});

不确定问题是什么。整个方法在document.ready方法中。这是错误截图：

任何意见/建议都会有很大帮助。 提前谢谢。

Answer 1

试试这个：

$("div.individualitems").each(function(){
    $(this).find("#previewHolder").click(function(){
        var imageString = 'http://www.testsite.com/test/testtest/img?page=0&size=322';
        $.fancybox.open([
          {
             href : imageString,
             type : "image",
             title : "your title"
          }
        ]);
    });
});

顺便说一下，我认为“http://www.testsite.com/test/testtest/img?page=0&size=322”不是图像的有效路径;）

See a working fiddle with a valid path for the image

Answer 2

问题实际上是我的JSON字符串构建。以下是适合我的完整功能

whatwg-fetch

我正在解析JSON数据以获取服务中的图像并准备我自己的JSON以便在fancybox中使用。希望这对面临类似问题的人有所帮助。