Question

I’m implementing this JQuery Lightbox plugin inside a DataList:

• http://leandrovieira.com/projects/jquery/lightbox/

I tested this code to work if the link is outside the DataList:

$('a[@rel*=lightbox]').lightBox();

But it does not seem to pick up the links inside the DataList which has “rel=lightbox”.

So I went digigng around and try to take some lessons from here:

• Could not find element inside Datalist by ID with JQuery

Came up with this but does not seem to work:

            $('a.imageActivator').live("click", function() {
                jQuery.lightBox();
            });

What went wrong?

Answer 1

I tried JQuery Lightbox and JQuery Fancybox.

JQuery Lightbox (as above) seem to present the issue that the lightBox() cannot be bound/linked to the Click event.

JQuery Fancybox presented the issue of having to click TWICE to activate the image. And it also doesn’t show the 2nd image (but show the same 1st image again).

So in the end, I went against the norm and used Lightbox2 instead:

• http://www.lokeshdhakar.com/projects/lightbox2/

The issue with this is the $ conflicts with JQuery’s $ which is declared globally. So here is my tip around this after doing some research.

Sequence the scripts as follow:

<script type="text/javascript" src="/scripts/prototype.js"></script>
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/scripts/lightbox.js"></script>

<script type="text/javascript" src="/scripts/jquery-1.4.2.js"></script> 

JQuery script will have to have “jQuery.noConflict();” as the first line. Any JQuery $ sign used on the page will have to be changed to “jQuery”. For Example:

    <script type="text/javascript">
        jQuery.noConflict();

        jQuery(function() {
            jQuery('a.activator').live("click", function() {
                jQuery('#enquireOverlay').fadeIn('fast', function() {
                    jQuery('#box').animate({ 'top': '160px' }, 500);
                });
            });

            jQuery('#boxclose').click(function() {
                jQuery('#box').animate({ 'top': '-200px' }, 500, function() {
                    jQuery('#enquireOverlay').fadeOut('fast');
                });
            });
        });
    </script>   

That was what allowed me to use a Lighbox that works which co-exists with jQuery scripts.