jQuery Cycle Plugin - Error

StackOverflow https://stackoverflow.com/questions/9379004

Frage

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/

War es hilfreich?

Lösung

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/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top