Coda Slider 和 Fancybox 冲突答案

【问题标题】：Coda Slider and Fancybox ConflictCoda Slider 和 Fancybox 冲突
【发布时间】：2011-01-08 04:47:56
【问题描述】：

我在使用 Coda Slider 和 Fancybox 时遇到了一些问题。我使用 Fancybox 在 Iframe 中加载外部站点，而 Coda Slider 用于起始页上的内容滑块。

如果我在我的 Head fpr Coda Slider 中调用了 jquery-easing 插件，则 Fancybox 不起作用。当我删除指向 jquery-easing-1.3 的链接时，Coda Slider 会引发异常，但 Fancybox 工作正常

这是一些代码：

<script type="text/javascript" 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>

不知道为什么这不能正常工作:) 希望你们知道=)

【问题讨论】：

解决了另一个不使用 jquery-easing 插件的内容滑块的问题 :)

标签： jquery fancybox coda-slider jquery-easing

【解决方案1】：

这个bug的具体原因是CodaSlider的crossLinking设置默认为true。如果您在对插件的 js 调用中设置 crossLinking: false，它将起作用。不确定交叉链接对您有多重要，但 Fancybox 正在 DOM 中搜索与其自身相关的页面，因此在您单击 coda-slider 导航后它会失败，因为这样做会在面板编号上附加一个 # 哈希标记，例如http://myurl.com/#1 如果您单击 coda-slider 的幻灯片 1。我的代码如下所示：

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

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


</script>

【讨论】：