Home/ Questions/Q 8387217
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T18:09:10+00:00

In the prettyPhoto changePictureCallback function, I’d like to know which lightbox is currently open.

  • 0

In the prettyPhoto changePictureCallback function, I’d like to know which lightbox is currently open. Currently I’m doing this:

$("a[rel^='prettyPhoto']").prettyPhoto({
  deeplinking : false,
  counter_separator_label : ' of ',
  gallery_markup : '',
  social_tools : '',
  slideshow : false,
  changepicturecallback: function(){
    //do stuff
    id_to_find = $(".active_lightbox").attr('href');
  },
  opacity : 0.29
}).click(function(){
  $(this).addClass('active_lightbox');
});

This way, when the anchor gets clicked on, is gets active_lightbox put onto it.
However, this doesnt play very well. I can end up having multiple active_lightbox elements, and also, it doesnt put that class on the “active_lightbox” if I use the next button within the lightbox gallery.
So, how do I tell which lightbox is currently open with jquery/js?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A couple options here, but the one that jumps out to me:

    It looks like you’re trying to working with a few <a rel="prettyPhoto##"> where ## is the gallery or photo number? If this is the case, I recommend something like this:

    $("a[rel^='prettyPhoto']").each(function(index, elm)
  var $elm = $(elm);
  // an arbitrary ID based on its order in the DOM
  var photo_id = index;
  // returns the ## from rel="prettyPhoto##"
  var gallery_id = $(elm).attr('rel').replace("prettyPhoto", ""); 
  $elm.prettyPhoto({
    ...
    changepicturecallback: function(){
      // do stuff
      // photo_id
      // gallery_id
      // elm and $elm
    },
    ...
  });

    OR you could add a little more markup but be more precise by making use of data- tags.

    RESOURCES

    • 0