Question

The light box pops up, but doesn’t load the image. I have hacked this entire gallery together, from Gallerific plugin and jQuery lightbox.

I have tried adding this to Gallerific plugin with little success:

            onTransitionIn: function() {
    $('#slideshow').fadeTo('fast', 1.0);
    $('#slideshow span.image-wrapper').fadeTo('fast', 1.0);
    $('#slideshow').fadeTo('fast', 1.0);
    $('#slideshow span.image-caption').fadeTo('fast', 1.0);
    $('#slideshow').fadeIn('fast', function() {
        $('a.lightbox').lightBox();
    });
},

http://lytesting.com/mdh/templates/mdh/gallery.html

Answer 1

The problem is that you are pointing to a #hash_fragment in your links. If you point them to the actual image source it will load into the lightbox.

Lightbox is trying to be unobtrusive and use graceful degradation, so linking to the image directly is also a good idea – so your page still works without javascript.

There may be ways to configure it with the #hash links, but by testing the above solution with Firebug, it worked for me in FF4.

<div class="slideshow" id="slideshow">
    <span class="image-wrapper current">
        <a href="{YOUR_IMAGE_URL}" class="lightbox"> <!-- Instead of #2, etc. -->
            &nbsp;<img alt="Title #0" src="images2/art.jpg">
        </a>
    </span>
</div>