Is it possible to subscribe to event notifications for Lightbox2, so that we can run custom JS when the lightbox is displayed / closed / etc?

How are people handling this currently>

Comments

xurizaemon’s picture

xurizaemon
he/him
Location Ōtepoti, Aotearoa 🏝
commented
Title: Event notification on Lightbox display » Add jQuery.trigger() calls to Lightbox so we can subscribe to Lightbox events (show, hide, preload etc)
Category: support » feature

Found a solution to my initial question via StackOverflow.

I wanted to fire Drupal.zipcart.init() after the Lightbox was displayed.

Extend the Lightbox.updateNav function so it fires a custom event when called. This code can be added to site custom JS, and doesn't require patching Lightbox2 module.

(function(){
  var _updateNav = Lightbox.updateNav;
  Lightbox.updateNav = function () {
    // this bind can probably happen any time after 
    // div#lightbox is added to the DOM
    $('#lightbox').bind('lightbox.updateNav', function() {
      Drupal.zipcart.init();
    });
    $("#lightbox").trigger('lightbox.updateNav');
    _updateNav.apply(this, arguments);
  }
})();

Would be great to add some jQuery trigger() calls to Lightbox2 so this is simpler for people to do. For now, the above code works for me.

lobo235’s picture

lobo235 commented

I would agree that adding jQuery trigger() calls to Lightbox2 would be highly beneficial. If my case, I need to use jQuery to modify the contents of the lightbox once it has been loaded via ajax.

onelittleant’s picture

onelittleant commented

I would recommend that the following Lightbox functions trigger events:

- start
- end
- pause
- togglePlayPause
- changeData

Thanks to grobot above. We used this approach to attach custom Google Analytics events to lightbox actions by hijacking the Lightbox.start function:

$(document).ready(function() {
	var _lbStart = Lightbox.start;
	Lightbox.start = function(imageLink, slideshow, lightframe, lightvideo, lightmodal) {
	    // Start lightbox
	    _lbStart.apply(this, arguments);

	    // Track video/lifestyle view w/GA event.
	if($(imageLink).hasClass('emvideo-thumbnail-replacement')) {
	    	if(_gaq) _gaq.push(['_trackEvent', 'Product Media', 'Video View', $(imageLink).attr('title'), 0]);
	    }
	    if($(imageLink).hasClass('lifestyle')) {
	    	if(_gaq) _gaq.push(['_trackEvent', 'Product Media', 'Lifestyle View', $(imageLink).attr('title'), 0]);
	    }
	}
});
yukare’s picture

yukare commented

Please, can you work on a real patch for this? If someone provides a patch to do this on lightbox in a general way(meaning that it works for all cases and not for a specific site/module) because there are many issues how to do things like this, and if we have a simple way to all cases, will be good.

I plan to make a new 6.12 release at the end of month.