Fancybox 显示 JSON 文本而不是图片

Question

我正在使用 FancyBox 插件在单击 DIV 时显示图像。图像是动态生成的，并作为 JSON 数据传递给 fancybox open() 方法，如下所述 fiddle.

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

下面是我试过的示例 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方法中。这是错误截图：

任何 comments/suggestions 都会有很大帮助。提前致谢。

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 字符串构建上。以下是对我有用的完整功能

    var imageString = "";
    var PreviewData = <a JSON data from a service on my end>;
    var i=0;
    var pgCount=0;
    $(".individualResults").each(function(){
        var currentElement = $(this);
        if($(this).find('#prevURL') != null) {
            var prevURL = $(this).find('#prevURL').val();
        }
        currentElement.find("#previewHolder").click(function(){
            imageString = "[";
            $.each(PreviewData, function (key, value) {
                if(prevURL == key) {        
                    for(i=0; i<value.readyPages; i++)    {
                        pgCount = i + 1;
                        imageString += '{"href" : "http://testsite.com'+value.resourceURI+'img?page='+i+'&size=123", "title" : "Page: '+pgCount+'/'+value.readyPages+'"}';
                        if(i != (value.readyPages - 1)) {
                            imageString += ",";
                        }
                    }
                    imageString += "]";
                    $.fancybox.open(eval(imageString), {type : "image"});
                }
            });
            return false;
        });
        imageString = "";
        i = 0;
    });

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

Fancybox 显示 JSON 文本而不是图片

Fancybox is showing JSON text instead of images

jquery

fancybox