Question

Just can’t seem to get this happening !

$(".fancy").click(function(event) {
  event.preventDefault();
  var pic = [];
  $('.room-thumbnail').each(function(index) {
      pic.push('\'' + 'http://localhost' + $(this).attr('href') + '\'' );
  });

  var pics = '['+ pic.join(', ')+']';

  console.log(pics);
  // => ['http://localhost/driver/images/produits/denim/sixthjune-7440/sixthjune-7440.jpg', 'http://localhost/driver/images/produits/denim/sixthjune-7440/sixthjune-7440-back.jpg', 'http://localhost/driver/images/produits/denim/sixthjune-7440/sixthjune-7440-closeup1.jpg', 'http://localhost/driver/images/produits/denim/sixthjune-7440/sixthjune-7440-closeup2.jpg']

  $.fancybox(pics, {
          'transitionIn'      : 'elastic',
          'transitionOut'     : 'elastic',
          'overlayColor'      : '#1D1D1D',
          'type'              : 'image',
          'cyclic': true
      });
});

If I enter the href urls ( pics ) manually it works.
But when I pass fancybox the variable ( pics ) i get the fancybox error :
– The requested content cannot be loaded. – Please try again later. –

Can someone tell me what I doing wrong ?

Thanks in advance.

Answer 1

There is nothing wrong with your code but there is something that you are not considering:

Your declaration var pics = '['+ pic.join(', ')+']'; is returning a string that fancybox cannot parse.

What you have to do 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 )

… so just right after the line where you set your variable pics

var pics = '['+ pic.join(', ')+']';

add this to convert it to a js object

pics = jQuery.parseJSON(pics);

That should do the trick.