jQuery prettyPhoto无法与Sponsor Flip Wall插件一起使用 [英] 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>

漂亮照片"不会以这种方式触发，但是图片正在新的标签页中加载！ 如果我将Gallery链接放置在.referenceData div之外(例如，在.sponsorFlip div内)，则可以正常工作... 我猜想与.sponsorFlip click()事件和prettyPhoto click()事件有一些冲突?

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 ?

推荐答案

我终于设法修复了Sponsor-flip-wall以与PrettyPhoto一起使用！！！

I Finally managed to fix sponsor-flip-wall to work with 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 has to be initiated inside $('.referenceFlip').live("click",function(){...}. Place the code just before: elem.data('flipped',true);

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

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

！！！现在应该可以正常工作了！！！

---

这是整个js代码，从原始代码略微更改为适合我的需求:

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

这篇关于jQuery prettyPhoto无法与Sponsor Flip Wall插件一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！