Question

I am learning JQuery and trying to create cycling text through images but I have a problem with buttons div (containermain). An example is here: http://jsfiddle.net/zAZst/7/ where last three images are buttons and shouldn’t have any effect on the pictures (first three) above. If you hover over images (first three) it works perfectly but if hovered over buttons (last three images) the script is corrupted and stops working. Could you please help me to fix the script so that if hovered over buttons (last three images) then there is no effect over the cycling text. Thanks.

Answer 1

I see you have these lines:

$('img').on('mouseover', function() {
    clearInterval(intervalId);
    displayTitle($(this).parents('div').attr('id').substring(5));
}).on('mouseout', function() {
    currentImg = $(this).parents('div').attr('id').substring(5);
    startLoop();
})

This makes the mouseover on “any” img in the document to stop the cycling. You could add a class to the images in the cycle, like

class="img_cycle"

and then change the first line of the javascript on() function inserting a selector, like this:

$('img.img_cycle').on('mouseover', function() {
    clearInterval(intervalId);
    displayTitle($(this).parents('div').attr('id').substring(5));
}).on('mouseout', function() {
    currentImg = $(this).parents('div').attr('id').substring(5);
    startLoop();
})

Hope this helps 🙂

EDIT: i made some typo in the funciton. Here is a JSFIddle working version: http://jsfiddle.net/zAZst/8/ 🙂