Enquiry Email Form

I’ve noticed a few people struggling with the following issue in a few forums, so I thought i’d write a blog post on how to overcome it. I looked through a few of the solutions people provided, but none of them made much sense to me, So I decided to tackle the issue myself.

The Problem

If you’re using a jQuery lightbox plugin and loading images dynamically onto another file with AJAX, you may have a scenario where the lightbox affect isn’t working when you click on the images. This is because the jQuery code isn’t binding with the images, because the selector is being loaded AFTER your jQuery.

The Solution

The solution is to use the live() function, with the mouseover effect. The key is the “mouseover” function- a lot of the solutions I looked at missed out the “mouseover” trigger, and mistakenly used a “click” trigger instead.

1
2
3
4
5
6
7
<script type="text/javascript">
$(function() {
 $('.selector').live('mouseover', function(){
 jQuery(this).lightBox();
 });
});
</script>

Please let me know if this helps you resolve your problem 🙂

  1. Ramilito
    09/09/2012

    Thx dude, worked like a charm!

  2. codez
    26/10/2012

    And much rejoicing was had! Thank you sir – saved me an hour.

  3. 07/05/2013

    thank you!!!

Learning & sharing

This is where we store some of our Web Development thoughts, tips and tricks for both our own uses and for others to learn from. Sharing is caring.

Please feel free to contribute to our blog posts; perhaps even teach us a few tricks of your own. We'd love to hear your thoughts.



X