dongqie7806 2012-01-06 08:04
浏览 36
已采纳

jQuery prettyPhoto无法使用Sponsor Flip Wall插件

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 ?

展开全部

  • 写回答

2条回答 默认 最新

  • duangou1953 2012-02-13 17:40
    关注

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

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部