开发者

Coda Slider and Fancybox Conflict

开发者 https://www.devze.com 2023-02-03 08:25 出处:网络
i have some issues with Coda Slider and Fancybox. I use Fancybox to load an external Site within an Iframe and Coda Slider is for the Content Slider on the Startpage.

i have some issues with Coda Slider and Fancybox. I use Fancybox to load an external Site within an Iframe and Coda Slider is for the Content Slider on the Startpage.

If i have the jquery-easing Plugin called in my Head fpr the Coda Slider, the Fancybox doesn't work. When i delete the link to jquery-easing-1.3 the Coda Slider throws an Exception but the Fancybox works perfectly

Here is some Code:

<script type="text/javascrip开发者_如何转开发t" src="<?php bloginfo('template_directory') ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/js/coda-slider.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/js/jquery.easing.1.3.js"></script>
<script>
    $(document).ready(function(){

        $(".book a").fancybox({
            'width'         :   '75%',
            'height'        :   '75%',
            'speedIn'       :   600, 
            'speedOut'      :   200, 
            'overlayShow'   :   true,
            'type'          :   'iframe',
            'autoscale'     :   false,
            'hideOnOverlayClick' : true
        });


        $('#coda-slider').codaSlider({
            autoSlide: true,
            autoSlideInterval: 5500,
            autoHeightEaseDuration: 2500,
            autoHeightEaseFunction: "easeInOutElastic",
            slideEaseDuration: 2500,
            slideEaseFunction: "easeInOutElastic",
            dynamicArrows: false,
            dynamicTabs: false
        });
    });
</script>

Don't know why this doesn't work as it should :) Hope you Guys know =)


The specific reason for this bug is the crossLinking setting of CodaSlider which defaults to true. If you set crossLinking: false in your js call to the plugin, it will work. Not sure how important crossLinking is to you, but Fancybox is searching the DOM for a page that is relative to itself, therefore it fails after you click the coda-slider navigation because doing so appends a # hash mark with the panel number e.g. http://myurl.com/#1 if you click slide 1 of your coda-slider. My code looks like this:

<script type="text/javascript">
$().ready(function() {

    // set up events slider                
       $('#home_slider').codaSlider({
           autoSlide: true,
           autoSlideInterval: 5500,
           slideEaseDuration: 1450,
           autoSlideStopWhenClicked: true,
           crossLinking: false
       });


</script>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号