jquery - FancyBox get href for images via AJAX

Question

Here is my problem.

I use FancyBox for showing images, which getting via AJAX. There isn't exist images on page when page is loaded, only links with attributes with names of galleries.

So, when I click on one of these links handled this code:

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

This solution works fine. But when I use

    var img = [dataX];

instead of

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

I'm get Pop-up window with responce text.

Demo

What i'm doing wrong?

• fancyBox - jQuery Plugin
• version: 2.0.5 (21/02/2012)
• jQuery 1.7 - latest

code of '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'}, 
";
}

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

Well, you are not doing anything wrong but there are many factors to consider in this scenario

First, from your ajax call you get:

var dataX = data.responseText;

and the responseText property gets the response data as a string, so fancybox displays such string instead of the array of images.

What you have to do as a workaround is to convert such string into a javascript object so fancybox can parse it. There are different ways to do it. One is using the eval() function, but there can be security issues so this method is not recommended.

Since you are using jQuery, your safest way to do it is to use jQuery.parseJSON( json ), however you have to be sure that you will be converting a well-formed JSON string.

In your case, your "getfile.php" file seems to be rendering this format

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

but a well-formed JSON string should look like:

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

notice the mandatory double quotes.

Once you are sure that data.responseText returns a string like:

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;

then you can 1). split the string, 2). convert every separated element into a javascript object and 3). place it into an array of objects like:

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

after that, you can fire fancybox with the proper array of objects (check API methods in the fancybox documentation) either doing:

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

or simply

$.fancybox(dataXarrayObj, opts);

Notice that you don't need to enclose the array in [] brackets