FancyBox получить href для изображений через AJAX

Question

Вот моя проблема.

Я использую FancyBox для показа изображений, которые получают через AJAX. На странице при загрузке страницы не существует изображений, только ссылки с атрибутами с названиями галерей.

Так что, когда я нажимаю на одну из этих ссылок обрабатывается этот код:

$(".fancybox-manual-c").live('click',function() { 
      $.ajax({ 
        type : 'POST', 
        data : {'gal' : $(this).attr('rel')}, 
        url : 'http://polygon.goracio.com.ua/gallery/getfiles.php', 
        //dataType: 'json', 
        complete: function(data) { 
          var dataX = data.responseText; 
          console.log(data.responseText); 
          var img = [ 
            {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg'}, 
            {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-27082.jpg'}, 
            {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30988.jpg'}, 
            {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30858.jpg'}, 
            {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-23424.jpg'},]; 
          var opts = { 
            prevEffect : 'none', 
            nextEffect : 'none', 
            helpers : { 
              thumbs : { 
                width: 75, 
                height: 50 
              } 
            } 
          }; 
          $.fancybox(img, opts); 
         } 
      }); 
    }); 

Это решение работает отлично. Но когда я использую

var img = [dataX]; 

вместо

  var img = [ 
       {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg'}, 
       {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-27082.jpg'}, 
       {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30988.jpg'}, 
       {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30858.jpg'}, 
       {href:'/gallery/galleries/gallery1/wallpapers_by_ellin-23424.jpg'},]; 

Я получить всплывающее окно с текстом Быстродействие.

Demo

Что я делаю неправильно?

• FancyBox - JQuery плагин
• версия: 2.0.5 (21/02/2012)
• Jquery 1,7 - последняя

код '' getfile.php

function directoryToArray($directory, $recursive = true) { 
    $array_items = array(); 
    if ($handle = opendir($directory)) { 
     while (false !== ($file = readdir($handle))) { 
      if ($file != "." && $file != "..") { 
       if (is_dir($directory. "/" . $file)) { 
        if($recursive) { 
         $array_items = array_merge($array_items, directoryToArray($directory. "/" . $file, $recursive)); 
        } 
        $directory = str_replace('./galleries/', '', $directory); 
        $file = $directory . "/" . $file; 
        $array_items[]= preg_replace("/\/\//si", "/", $file); 
       } else { 
        $directory = str_replace('./galleries/', '', $directory); 
        $file = $directory . "/" . $file; 
        $array_items[] = preg_replace("/\/\//si", "/", $file); 
       } 
      } 
     } 
     closedir($handle); 
    } 
    return $array_items; 
} 
header("Content-type: text/plain;charset=utf-8"); 
$arrays = directoryToArray("./galleries/".$_POST['gal']); 
foreach($arrays as $array){ 
    echo "{href:'/gallery/galleries/$array'}, \n"; 
} 

ОБНОВЛЕНИЕ

 $(".fancybox-manual-ajax").live('click',function() { 
      $.ajax({ 
       type : 'POST', 
       data : {'gal' : $(this).attr('rel')}, 
       url : 'http://polygon.goracio.com.ua/gallery/getfiles.php', 
       dataType: 'text', 
       complete: function(data) { 
        var dataX = data.responseText; 
        var dataXsplit = dataX.split(','); 
        var dataXarrayObj = new Array(), i; 
        for(i in dataXsplit){ 
         if(dataXsplit[i].length){ //remove last empty element after .split() 
          dataXarrayObj[i] = $.parseJSON(dataXsplit[i]); 
         } 
        } 
        var opts = { 
         prevEffect : 'none', 
         nextEffect : 'none', 
         helpers : { 
          thumbs : { 
           width: 75, 
           height: 50 
          } 
         } 
        }; 
        $.fancybox(dataXarrayObj, opts); 
       } 
      }); 
     }); 

Answer 1

Ну, вы не делаете ничего плохого, но есть много факторов, которые необходимо учитывать в этом сценарии

Во-первых, от вашего AJAX позвонить вы получите:

var dataX = data.responseText; 

и responseText свойство gets the response data as a string, так FancyBox отображает такие строки вместо массива изображений.

То, что вы должны сделать, как обходной путь, чтобы преобразовать такую ​​строку в яваскрипте объекта так FancyBox может разобрать его. Есть разные способы сделать это. Один использует функцию eval(), но могут возникнуть проблемы с безопасностью, поэтому этот метод не рекомендуется.

Поскольку вы используете jQuery, ваш самый безопасный способ сделать это - использовать jQuery.parseJSON(json), однако вы должны быть уверены, что будете преобразовывать правильно сформированную строку JSON.

В вашем случае ваш «getfile.PHP»файл, кажется, делает этот формат

{href:'/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg'},.... 

но хорошо сформированную строку JSON должна выглядеть следующим образом:.

{"href":"/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg"},... 

уведомления обязательные двойные кавычки

После того как вы уверены, что data.responseText возвращает строка:

data.responseText='{"href":"/gallery/galleries/gallery1/wallpapers_by_ellin-30711.jpg"},{"href":"/gallery/galleries/gallery1/wallpapers_by_ellin-27082.jpg"}, etc ....' 
var dataX = data.responseText; 

то вы можете 1). разделили строку , 2). преобразовать каждый отдельный элемент в объект javascript и 3). поместите его в массив объектов, таких как:

var dataXsplit = dataX.split(','); 
var dataXarrayObj = new Array(), i; 
for(i in dataXsplit){ 
dataXarrayObj[i] = jQuery.parseJSON(dataXsplit[i]); 
} 

после этого, вы можете запустить FancyBox с соответствующим массива объектов (проверить методы API в fancybox documentation) либо делать:

var img = dataXarrayObj; 
$.fancybox(img, opts); 

или просто

$.fancybox(dataXarrayObj, opts); 

Обратите внимание, что вам не нужно заключать т он массив в [] скобках

Answer 2

Вместо:

var dataXsplit = dataX.split(','); 
var dataXarrayObj = new Array(), i; 
for(i in dataXsplit){ 
dataXarrayObj[i] = jQuery.parseJSON(dataXsplit[i]); 
} 

Вы можете сделать:

var img = JSON.parse(data.responseText); 

Так что все вместе это было бы что-то вроде этого:

Xhr.onload = function() { 
    var img = JSON.parse(Xhr.responseText); 
    $.fancybox(img, { 
    padding: 0, 

    openEffect : 'elastic', 
    openSpeed : 150, 

    closeEffect : 'elastic', 
    closeSpeed : 150, 

    closeClick : true 
    }); 
};