IE7 does it all wrong - why?
I've created a slideshow with hover items. Works fine in Chrome, FF but not in IE7.
The slideshow normally goes to the next item and so forth however in IE7 is doubles it.
Where did I make a mistake?
Live example: http://www.pauwert.nl/index.php?option=com_content&view=category&layout=blog&id=11&Itemid=24
Jquery script is in the page source or below:
- $jquery('ul.show_pictures li').filter(':not(:first)').hide().end().filter(':first').addClass('showing');
$jquery('ul.show_menu li').filter(':first').addClass('showing_menuitem');
rotate = function(){
$jquery('ul.show_menu li').removeClass('showing_menuitem');
$activeM.addClass('showing_menuitem');
$jquery('ul.show_pictures li').removeClass('showing').fadeOut();
$active.addClass('showing').fadeIn();
};
rotateSwitch = function(){
play = setInterval(function() {
$active = $jquery('ul.show_pictures li.showing').next();
$activeM = $jquery('ul.show_menu li.showing_menuitem').next();
if ($active.length === 0) {
$active = $jquery('ul.show_pictures li:first');
$activeM = $jquery('ul.show_menu li:first');
}
rotate();
}, 5000);
};
rotateSwitch();
$jquery('ul.show_pictures li').hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$jquery('ul.show_menu li').hover(function() {
$activeM = $jquery(this);
$activeMnr = $jquery('ul.show_menu li').index(this);
//alert($activeMnr);
$active = $jquery('ul.show_pictures li').eq($activeMnr);
clearInterval(play);
rotate();
rotateSwitch();
});