jQuery Cycle Plugin - Error

Question

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/

dont load jquery from another server. be sure jquery is loaded first by download/copy coad and put in to a file on your server — ggzone, Feb 21 '12 at 14:40
@ggzone That's not the issue. jQuery is being loaded first. However, I have adjusted my markup to call a local hosted version of jQuery and I am still receiving the same errors. Any thoughts? — Patrick Appelman, Feb 21 '12 at 15:52
hm maybe you use some incompatible versions or one of the js files are incorrect or missing. as this is a very common plugin i dont think theres an error on the fly. — ggzone, Feb 21 '12 at 15:58
@ggzone I've updated the question a little bit. The error in Chrome is a result of the second slideshow instance on my init.js file (see notes above). When I comment it out the error is gone. I'm not sure how to work out two instances of the slideshow (even though they are on different pages). However even with the single instance of the slideshow (with no Chrome errors) IE7 doesn't work. All the slides are showing up one below the other. — Patrick Appelman, Feb 21 '12 at 17:11

score 0 · Accepted Answer · answered Feb 21 '12 at 22:36

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/

jQuery Cycle Plugin - Error

1 Answers1