jQuery prettyPhoto无法使用Sponsor Flip Wall插件

时间:2012-01-06 16:04:25

标签: php jquery-ui prettyphoto

我正在使用Sponsor Flip Wall在我的网页上显示引用。 每个参考文献都应该用Pretty Photo lightbox预览少量图片。 在第一个翻转侧有一个参考图片,在它翻转之后,我有参考描述,下面是画廊的链接...

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

    });

有谁知道问题出在哪里?

2 个答案:

答案 0 :(得分:1)

我终于设法修复赞助商翻转墙与PrettyPhoto合作!!!

  • 将“rel”属性设置为href:
<div class="referenceURL">
  <a href="'.$referenca[2].'" rel="reference" title="'.$referenca[3].'">Galerija slika</a>
</div>
  • PrettyPhoto必须在$('。referenceFlip')内启动.live(“click”,function(){...}。 将代码放在之前:elem.data('flipped',true);
  

$( “一个[相对^ = '参考']”)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 :(得分: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 */  

:d