Tutorial :Need a jQuery Lightbox plugin that supports $.live() and grouping



Question:

I'm bringing in all of my images via Ajax, and I'm looking for a quick fix for the front-end of this project. I've tried a couple of jQuery lightbox plugins, but I can't seem to get them to perform in a live function (correct me if I'm wrong in thinking I need to do this).

Currently attempting to use Balupton's Lightbox Plugin (can't link because of my being a new user), and after trying all of the examples to no avail, I've attempted it with this (also not working):

$('a.lightbox-gallery').live('click', function(){      $(this).lightbox();  });  

Any help is much appreciated!


Solution:1

1) you can hack the lightbox plugin to bind on live events 2) you can call lightbox after ajax is completed, only on new elements:

$.ajax({      type: "POST",      url: "url.php",      cache: false,      success: function(data){          $(data).find('a[rel=lightbox]').lightbox(settings).end().appendTo('#ajaxTarget');      }  });   

For settings you can use an array to avoid writting same thing twice ;)


Solution:2

You can use colorbox and jquery's live function like this

$('a[rel=gallery]').live('click', function() {    url = this.href; // this is the url of the element event is triggered from    $.colorbox({href: url});    return false;  });  


Solution:3

You can also take a look at the livequery jquery plugin not so bad plugin ;) http://docs.jquery.com/Plugins/livequery you can embed that plugin inside your jquery file and use that as a simple jquery function:

$('.ajax-loaded-element').livequery('click',function(){    //do somenthing    });  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »