Fancybox file list through a variable

Question

Hi, I'm experiencing a little bugger using the fancybox jquery plugin. I want to use a variable that holds the image filenames to populate the file list inside the fancybox function. But I can't seem to get it to work.

In this example I've put the filenames in manually but that's the part I'd like to populate with var "files" which, when printed, looks exactly the same as the current file list in the fancybox function but when I replace the file list with that var it doesn't work. The only issue I can detect is that the quotes surrounding the filenames are converted to %27

$("#schermafbeeldingen").click(function() {
        $.post(window.jsRootPath+"includes/getSomeStuff.php", {},
        function(data){
            //files = data.sFancyBoxParams;
            var myArray = data.sFancyBoxParams.split(',');
            files = '';
            for (i=0;i<myArray.length;i++)
            {
                files += '\'' + myArray[i] + '\'' + ',\n';
            }
            alert(files);
            files2 = "'http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/1-start.jpg','http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/2-content.jpg','http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/3-_filemanager.jpg','http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/4_-_imagemanager.jpg','http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/5-_seo.jpg','http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/6-banners.jpg','http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/7-downloads.jpg'";
            files3 = '"http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/1-start.jpg","http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/2-content.jpg","http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/3-_filemanager.jpg","http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/4_-_imagemanager.jpg","http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/5-_seo.jpg","http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/6-banners.jpg","http://cms.admixconnect.nl/upload/www.zerniq.nl/schermafbeeldingen/7-downloads.jpg"';
            $.fancybox([
                'http://www.test.com/schermafbeeldingen/1-start.jpg',
                'http://www.test.com/schermafbeeldingen/2-content.jpg',
                'http://www.test.com/schermafbeeldingen/3-_filemanager.jpg',
                'http://www.test.com/schermafbeeldingen/4_-_imagemanager.jpg',
                'http://www.test.com/schermafbeeldingen/5-_seo.jpg',
                'http://www.test.com/schermafbeeldingen/6-banners.jpg',
                'http://www.test.com/schermafbeeldingen/7-downloads.jpg'
            ], {
                'padding'           : 0,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'image',
                'changeFade'        : 0,
                'overlayOpacity'    : 0.8
            });
        }, "json");
    });

Answer 1

Using alerts, files may look like the array passed to the fancybox function, but it's not. files, as you are defining it, is a string, while the array you're passing in is an.. array :) I don't know fancybox in detail, but i guess it can take an array of image urls and make a slideshow of it. When you pass a string into it instead, it will most likely try to parse it as HTML and find out that it's invalid HTML.

I would guess you are all set after doing var myArray = data.sFancyBoxParams.split(','); and that you can pass myArray as the parameter to fancybox.