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'},];

У меня всплывающее окно с текстом ответа.

Демо

Что я делаю не так?

• 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";
}

UPDATE

        $(".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 получает данные ответа в виде строки , поэтому fancybox отображает такую ​​ строку вместо массива изображений.

В качестве обходного пути вы должны преобразовать такую ​​ строку в javascript объект , чтобы 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 документации ), выполнив:

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