Fancybox zeigt JSON Text anstelle von Bildern

Question

Ich benutze FancyBox Plugin für die Anzeige von Bildern auf einen Klick auf ein DIV. Die Bilder werden dynamisch generiert und als JSON-Daten an die fancybox open() -Methode übergeben, wie in der folgenden Fiddle beschrieben.

http://jsfiddle.net/wg4MD/

Der Leuchtkasten richtig öffnet. Aber es zeigt den Klartext anstelle von Bildern an.

Unten finden Sie das Beispiel JS-Code I

versucht

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

nicht sicher, was das Problem ist. Die gesamte Methode befindet sich in der Methode "document.ready". Hier ist der Fehler Screenshot:

Alle Kommentare/Anregungen sehr helfen würde. Vielen Dank im Voraus.

Answer 1

Die Frage war eigentlich mit meinem JSON-String Gebäude. Im Folgenden finden Sie die komplette Funktion, die für das Erhalten der Bilder von einem Dienst und die Vorbereitung meiner eigenen JSON für die Verwendung in fancybox

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

Ich bin Parsen JSON-Daten funktioniert für mich. Ich hoffe, dies könnte jemandem helfen, der sich einem ähnlichen Problem gegenübersieht.

Answer 2

Try this:

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

By the way, glaube ich "http://www.testsite.com/test/testtest/img?page=0&size=322" kein gültiger Pfad für ein Bild ist;)

See a working fiddle with a valid path for the image