jQuery Cycle 插件 - 错误

发布于 2025-01-07 20:06:24 字数 3401 浏览 0 评论 0原文

这是我的第一个问题，所以我会尝试尽可能具有描述性...我正在使用 jQuery Cycle 插件与 Joomla 一起。它在IE7中彻底崩溃了。虽然它在 Chrome 中似乎工作得很好，但我在检查控制台时注意到以下错误。

Uncaught TypeError: Cannot read property 'cycleW' of undefined

该幻灯片似乎可以在 Chrome 17.0.963.56、Firefox 9.0.1 和 Safari 5.1.3 中运行。我还没有在 IE8+ 中测试过它，因为我没有可以轻松访问的 Windows 计算机。我在标题中使用外部 js 文件调用幻灯片，如下所示...

<head>
        <script type="text/javascript" src="js/jquery.min.js" /></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript" src="js/init.js"></script>
</head>

这是 init.js：

$(document).ready(function() { 

    $('#slideshow').cycle({ 
        fx:        'fade', 
        speed:     '900', 
        timeout:   4000,
        pause:     1, 
        pager:     '#nav',
        slideExpr: 'div.slide',
        next:      '#forward', 
        prev:      '#backward',
    });

    $('#slideshow').hover(function() {
        $("#backward").fadeIn(400);
        $("#forward").fadeIn(400);
    },
        function() {
        $("#backward").fadeOut(300);
        $("#forward").fadeOut(300);
    });

    $('#imax').before('<ul id="nav_imax">').cycle({ 
        fx:        'scrollHorz', 
        speed:     '1000', 
        timeout:   5000,
        pause:     1, 
        pager:     '#nav_imax',
        slideExpr: 'div.slide',

        // callback fn that creates a thumbnail to use as pager anchor
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>';
        },

    });

});

最后，这是标记。 “moduletable”和“custom”div 由 CMS 生成。但是，我的 SlideExpr 应该绕过这些，因为它应该以“slide”类为目标 div。

<div id="slideshow">
    <div id="nav"></div>
    <a id="backward">Backward</a>
    <a id="forward">Forward</a>
    <div class="moduletable">
        <div class="custom">
            <div class="slide"><a href="#"><img src="01.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="02.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="03.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="04.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="05.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="06.jpg" width="860" height="400" border="0" /></a></div>
        </div>
    </div>
</div>

我希望我涵盖了一切。如果我可以提供任何其他有用的信息，请告诉我。谢谢你！

更新：我最初并没有包含这样一个事实：我正在使用另一个 ID 为“imax”的幻灯片以及另一个页面上的备用参数。由于这些不在同一页面上，因此我没有将其包含在内。然而，当我注释掉 $('#imax') 函数时，错误在 Chrome、FF 等中消失。幻灯片在 IE7 中仍然无法工作...

所以我认为这实际上是两个问题...

这是测试链接：http://jsfiddle.net/V6EeS/3/

原文

This is my first question so I'll try to be as descriptive as possible... I am using the jQuery Cycle Plugin with Joomla. It completely blows up in IE7. Although it seems to work perfectly in Chrome, I noticed the following error when inspecting the Console.

Uncaught TypeError: Cannot read property 'cycleW' of undefined

The slideshow appears to work in Chrome 17.0.963.56, Firefox 9.0.1, and Safari 5.1.3. I haven't tested it in IE8+, as I don't have a windows computer easily accessible to me. I'm calling the slideshow with an external js file in the header like so...

<head>
        <script type="text/javascript" src="js/jquery.min.js" /></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript" src="js/init.js"></script>
</head>

Here's init.js:

$(document).ready(function() { 

    $('#slideshow').cycle({ 
        fx:        'fade', 
        speed:     '900', 
        timeout:   4000,
        pause:     1, 
        pager:     '#nav',
        slideExpr: 'div.slide',
        next:      '#forward', 
        prev:      '#backward',
    });

    $('#slideshow').hover(function() {
        $("#backward").fadeIn(400);
        $("#forward").fadeIn(400);
    },
        function() {
        $("#backward").fadeOut(300);
        $("#forward").fadeOut(300);
    });

    $('#imax').before('<ul id="nav_imax">').cycle({ 
        fx:        'scrollHorz', 
        speed:     '1000', 
        timeout:   5000,
        pause:     1, 
        pager:     '#nav_imax',
        slideExpr: 'div.slide',

        // callback fn that creates a thumbnail to use as pager anchor
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>';
        },

    });

});

And lastly, here's the markup. The "moduletable" and "custom" divs are generated by the CMS. However, my slideExpr should bypass those as it should be targeting divs with the class "slide".

<div id="slideshow">
    <div id="nav"></div>
    <a id="backward">Backward</a>
    <a id="forward">Forward</a>
    <div class="moduletable">
        <div class="custom">
            <div class="slide"><a href="#"><img src="01.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="02.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="03.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="04.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="05.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="06.jpg" width="860" height="400" border="0" /></a></div>
        </div>
    </div>
</div>

I hope I covered everything. If there is any additional helpful information I can provide, please let me know. Thank you!

UPDATE: I didn't initially include the fact that I am using another slideshow with the ID "imax" and alternate parameters on another page. Since these weren't on the same page I didn't include it. However when I comment out the $('#imax') function, the errors go away in Chrome, FF, etc. The slideshow still DOES NOT work in IE7 however...

So I think this is actually two issues...

Here's a test link: http://jsfiddle.net/V6EeS/3/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

恋你朝朝暮暮 2025-01-14 20:06:24

我解决了IE7的问题。最后一个参数选项不应有逗号 (,)。我不知道为什么 Chrome 仍然给我这个错误，但至少幻灯片在每个浏览器中独立运行。

$(document).ready(function() { 

    $('#slideshow').cycle({ 
        fx:        'fade', 
        speed:     '900', 
        timeout:   4000,
        pause:     1, 
        pager:     '#nav',
        slideExpr: 'div.slide',
        next:      '#forward', 
        prev:      '#backward' // Comma has been removed
    });

    $('#slideshow').hover(function() {
        $("#backward").fadeIn(400);
        $("#forward").fadeIn(400);
    },
        function() {
        $("#backward").fadeOut(300);
        $("#forward").fadeOut(300);
    });

    $('#imax').before('<ul id="nav_imax">').cycle({ 
        fx:        'scrollHorz', 
        speed:     '1000', 
        timeout:   5000,
        pause:     1, 
        pager:     '#nav_imax',
        slideExpr: 'div.slide',

        // callback fn that creates a thumbnail to use as pager anchor
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>';
        }  // Comma has been removed

    });

});

这是工作链接： http://jsfiddle.net/V6EeS/4/

I figured out the IE7 issue. The last parameter option should not have a comma (,). I don't know why Chrome is still giving me the error, but at least the slideshow functions independently in each browser.

$(document).ready(function() { 

    $('#slideshow').cycle({ 
        fx:        'fade', 
        speed:     '900', 
        timeout:   4000,
        pause:     1, 
        pager:     '#nav',
        slideExpr: 'div.slide',
        next:      '#forward', 
        prev:      '#backward' // Comma has been removed
    });

    $('#slideshow').hover(function() {
        $("#backward").fadeIn(400);
        $("#forward").fadeIn(400);
    },
        function() {
        $("#backward").fadeOut(300);
        $("#forward").fadeOut(300);
    });

    $('#imax').before('<ul id="nav_imax">').cycle({ 
        fx:        'scrollHorz', 
        speed:     '1000', 
        timeout:   5000,
        pause:     1, 
        pager:     '#nav_imax',
        slideExpr: 'div.slide',

        // callback fn that creates a thumbnail to use as pager anchor
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>';
        }  // Comma has been removed

    });

});

Here is the working link: http://jsfiddle.net/V6EeS/4/

回复收藏 0 原文

~没有更多了~