I’m using Sponsor Flip Wall for displaying references on my webpage. Every reference should have few pictures previewed with Pretty Photo lightbox. At first flip side there is a reference picture, and after it's flipped over, I have reference description and below it a link for the gallery...
<?php
// Each sponsor is an element of the $sponsors array:
$reference = array(
array('hram_hrista_spasitelja','Najzahtjevnija građevina u regiji u posljednje vrijeme. 23 000 elemenata kompletno napravljenih u našim pogonima, nekoliko rozeta izrađenih water-jetom, brojni stubovi i reljefi, ograde, mozaici te kompletni podovi izrađeni u mozaiku rezanom water-jetom, te brojni ostali zahtjevni elementi urađeni suvremenim CNC strojevima i završno urađeni umjetničkom rukom klesara.','../slike/reference/slike/hram_hrista_spasitelja/01.jpg','Hram Hrista Spasitelja - Banja Luka')
);
// Randomizing the order of sponsors:
shuffle($reference);
?>
<div class="tekst">
<div class="referenceListHolder">
<?php
// Looping through the array:
foreach($reference as $referenca)
{
echo'
<div class="reference" title="Kliknite za okretanje">
<div class="referenceFlip">
<img src="../slike/reference/'.$referenca[0].'.png" alt="Više o: '.$referenca[0].'" />
</div>
<div class="referenceData">
<div class="referenceDescription">
'.$referenca[1].'
</div>
<div class="referenceURL">
<a href="'.$referenca[2].'" rel="reference" title="'.$referenca[3].'">Galerija slika</a>
</div>
</div>
</div>
';
}
?>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">
/* PRETTY PHOTO */
$("a[rel^='reference']").prettyPhoto({
animationSpeed: 'slow', /* fast/slow/normal */
slideshow: 4000, /* false OR interval time in ms */
padding: 40, /* padding for each side of the picture */
opacity: 0.35, /* Value betwee 0 and 1 */
overlay_gallery: false, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
showTitle: true, /* true/false */
allowresize: false, /* true/false */
counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
social_tools: false, /* html or false to disable */
deeplinking: false, /* Allow prettyPhoto to update the url to enable deeplinking. */
keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
theme: 'dark_rounded' /* pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook */
});
/* KRAJ PRETTY PHOTO */
</script>
Pretty Photo doesn’t get fired this way, but the picture is being loaded in a new tab! If I place the gallery link outside .referenceData div (eg inside .sponsorFlip div), it works fine... I guess there is some conflict with .sponsorFlip click() event and prettyPhoto click() event ???
Here is the code for flipping the references...
//REFERENCE - FLIP PLUGIN
$('.referenceFlip').live("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();
//Prilikom vraćanja (revert) reference - vraća height na 100% (kako je i bio)
$(this).css("height", "100%");
// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:
elem.flip({
direction:'lr',
speed: 350,
dontChangeColor: true,
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('.referenceData').html());
}
});
//Ako dođe do overflow-a, povećava height reference za 50 kako bi stao sav tekst
if($(this)[0].clientHeight < $(this)[0].scrollHeight)
$(this).css("height", $(this).children().height()+50);
// Setting the flag:
elem.data('flipped',true);
}
});
Does anyone know where's the problem ?
