jQuery prettyPhoto not working with Sponsor Flip Wall plugin

问题

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 */

来源：https://stackoverflow.com/questions/8760694/jquery-prettyphoto-not-working-with-sponsor-flip-wall-plugin

标签

php

jquery-ui

prettyphoto