views:

53

answers:

2

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]);
    });
});
A: 

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();
});
Brian Flanagan
No that did not fix it. It works when I'm not trying to call inside that php. I've tried every way to call it inside of the function so it has to be something else or maybe something added to it I'm not sure.
DonWrk
Hmmm... Do you have a link?
Brian Flanagan
A: 

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

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