Jquery lightbox not working when calling to html in php

Question

I have jquery plugin that flips the div box when it's clicked. When it's flipped over I have a thumbnail that when clicked should pull up my lightbox but it just pulls up the image in a different page. I'm calling multiple div using php arrays. I have tried every way to call the images but nothing works. Here is some of the code.

$(function() {
  $('a').lightBox();
});

foreach($sponsors as $image) {
    echo '<div class="sponsor" title="Click to flip">
            <div class="sponsorFlip">
                <img src="img/sponsors/'.$image[0].'.png"  />
            </div>
            <div class="sponsorData">
                <div class="sponsorDescription" id="gallery">
                    <a href="img/sponsors/'.$image[1].'.png"/><img src="img/sponsors/'.$image[0].'.png" /></a>
                 </div>
                 <div class="sponsorURL">
                 </div>
            </div>
        </div>';
}

And this is what the script looks like for my flipping box.

$(document).ready(function () { /* The following code is executed once the DOM is loaded */
    $('.sponsorFlip').bind("click", function () {
        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
        var elem = $(this);
        // data('flipped') is a flag we set when we flip the element:
        if (elem.data('flipped')) {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:
            elem.revertFlip();
            // Unsetting the flag:
            elem.data('flipped', false)
        }
        else {
            // Using the flip method defined by the plugin:
            elem.flip({
                direction: 'lr',
                speed: 350,
                onBefore: function () {
                    // Insert the contents of the .sponsorData div (hidden from view with display:none)
                    // into the clicked .sponsorFlip div before the flipping animation starts:
                    elem.html(elem.siblings('.sponsorData').html());
                }
            });
            // Setting the flag:
            elem.data('flipped', true);
        }
    });
});

$(".sponsorFlip").bind("click", function (e, block) {
    if (block) return false;
    $(".sponsorFlip").not($(this)).each(function () {
        if ($(this).data("flipped")) $(this).trigger("click", [true]);
    });
});

Answer 1

I'm not sure which lightbox plugin you're using, but it sounds like it's not preventing the default a tag action from firing. You may be able to fix it by adding:

$('a').click(function(evt){
    evt.preventDefault();
});

Answer 2

I got it to work by putting this inside my js file that flips my content.

$(document).find('#leftcontent a').lightBox({fixedNavigation:true});