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