jQuery prettyPhoto not working with Sponsor Flip W

问题:

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 ?

回答1:

I Finally managed to fix sponsor-flip-wall to work with PrettyPhoto !!!

• Put the "rel" attribute to href:

<div class="referenceURL">
  <a href="'.$referenca[2].'" rel="reference" title="'.$referenca[3].'">Galerija slika</a>
</div>

• PrettyPhoto has to be initiated inside $('.referenceFlip').live("click",function(){...}. Place the code just before: elem.data('flipped',true);

$("a[rel^='reference']").prettyPhoto();

!!! It should be working now !!!

---

Here is the whole js code slightly changed from the original to suite my needs:

//FLIP PLUGIN
$('.referenceFlip').live("click",function(){
  // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):              
  var elem = $(this);

  //Eliminates unnecessary PrettyPhoto gallery links
  elem.siblings().find('.referenceURL a:not(:first)').html("");

  //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();

    //After reverting the flip - sets the height back to 100% (as it was)
    elem.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());  
      } 
    });

    //If the div overflows, increase the div's height for +50 to fit the entire text      
    if(elem[0].clientHeight < elem[0].scrollHeight)
      elem.css("height", elem.children().height()+50);

    /* PRETTY PHOTO INITIATION */
    $("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 */
    });
    /* END OF PRETTY PHOTO INITIATION */    

    // Setting the flag:
    elem.data('flipped',true);
  }
});

回答2:

This helped alot, same fix works for lightbox, just use:

  ('a[@rel*=lightbox]').lightBox();

instead of

  /* PRETTY PHOTO INITIATION */
  $("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 */
  });
  /* END OF PRETTY PHOTO INITIATION */  

:D