jQuery Lightbox Fresco

Fresco is a very nice, responsive lightbox that I just came across embedded in a WordPress theme. It’s very easy to use in the simple scenario – just add a couple of classes to an image link and you’re away.

However, when you want to link to a specific image in the set, adding another link works but adds another copy of the image into the lightbox. It means that you need to use the jQuery API instead and there are a couple of functions that might work.

The first that I tried fitted the requirements of the project, so I stopped here. It opens the image in a lightbox, but it doesn’t open the set created by the links of class fresco:

jQuery(document).ready(function($) {
  $('.popfresco').click(function(e) {
    e.preventDefault();
    var image = $(this).attr('href'); 
    Fresco.show(image);
  });
});

and simply for the link:

<a class="popfresco" href="http://mountolympuspurefoods.com/wp-content/uploads/2016/11/mojito-kefir-label.jpg">

The call which I left for another day was

Fresco.show($('#elementid')[0]);

This needs targetting at the image link you want in some way and would probably open the set in the right place.

Leave a Reply