Home/ Questions/Q 7551079
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T10:23:12+00:00

This is my first question so I’ll try to be as descriptive as possible…

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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