Search code examples
jqueryfancybox

Fancybox is showing JSON text instead of images

I'm using FancyBox plugin for displaying images on click of a DIV. The images are dynamically generated and are passed as a JSON data to the fancybox open() method as explained in the below fiddle.

http://jsfiddle.net/wg4MD/

The lightbox is opening properly. But it displays the plain text, instead of images.

Below is the example JS code I tried

$("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"}');
    });
});

Not sure what the problem is. The whole method is in document.ready method. Here is the error screenshot:

enter image description here

Any comments/suggestions would greatly help. Thanks in advance.

Solution

  • The issue was actually with my JSON string building. Below is the complete function which works for me

        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;
    });

    I'm parsing JSON data for getting the images from a service and preparing my own JSON for using in fancybox. Hope this might help for someone facing a similar problem.