2012-01-06 15 views
0

私のウェブページに参​​考文献を表示するのにSponsor Flip Wallを使用しています。 すべての参照には、Pretty Photo lightboxでプレビューされた写真はほとんどありません。 は、第1のフリップフロッ側では、参照ピクチャが存在し、それがひっくり返さだ後、私は参照の説明と、その下のギャラリーへのリンクを持っている...jQuery prettyPhotoはSponsor Flip Wallプラグインと連携していません

<?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> 

プリティ写真は、このように解雇されませんが、画像が新しいタブに読み込まれています! ギャラリーリンクを.referenceData divの外に置いた場合(例:.sponsorFlip div内)、正常に動作します... .sponsorFlip click()イベントとprettyPhoto click()イベントとの競合がありますか?問題だのはここ

は参照をひっくり返すためのコードです...

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

    }); 

誰でも知っていますか?

答えて

1

私は最後に、PrettyPhotoで動作するスポンサーフリップウォールを修正することができました!

  • のhrefに "REL" 属性を置く:( 'referenceFlip')
<div class="referenceURL"> 
    <a href="'.$referenca[2].'" rel="reference" title="'.$referenca[3].'">Galerija slika</a> 
</div> 
  • PrettyPhotoは$の内部で開始する必要がある "クリック"(生きます、。 function(){...}。 コードを直前に置く:elem.data( '反転、真);

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

!!!それは今働いているはずです!ここで


全体jsのコードは少し私のニーズ合ったオリジナルから変更された:これは多くを助けた

//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); 
    } 
}); 
1

、同じ修正をライトボックスのために働く、ちょうど使用:

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

の代わり

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

関連する問題