onmouseover para mudar imagens

[Luiz Guilherme Schiefler de Arruda]

Ola pessoal, tudo bem??

Estou desenvolvendo uma loja virtual para minha tia e ela esta querendo fazer com que quando o visitante passe o mouse pela imagem de determinado produto, outras imagens do produto passem a cada segundo (cada produto tem cerca de 3 fotos).

Consegui fazer o que estava querendo quando tenho apenas uma imagem.

O problema está quando tenho mais de uma imagem. Por exemplo, em uma pesquisa por um produto X, eu tenho como resposta 2 produtos. Alguém conseguiria dar uma ajuda quanto a isso? Abaixo segue como está meu código.

HTML:

    <div id="foto">

        <a href="/"><img id="thumbnail" src="{% static 'img/thumbnail-1.jpg' %}"></a>   

        <a href="/"><img id="thumbnail" src="{% static 'img/thumbnail-2.jpg' %}"></a>

    </div>

jQuery:

$(document).ready(function(){

var interval;

        // Função que faz mudar a imagem do produto quando o mouse está sobre a imagem do produto

$('#thumbnail').on({

    'mouseover': function(){

     var thisId = 0; // Representa a imagem que esta sendo exibida no momento, até o limite de 3

     interval = window.setInterval(updateImage, 1000);

     function updateImage() {

        $('#thumbnail').attr('src', "/static/img/produto-1-" + thisId + ".jpg"); // local onde muda a imagem.

        thisId++;

        if (thisId == 3) thisId = 0;

     }

    }

});

        // Função que faz mudar voltar a imagem principal quando o mouse sai da imagem do produto.

$('#thumbnail').on({

    'mouseout': function(){

     clearInterval(interval);

        $('#thumbnail').attr('src','/static/img/thumbnail-1.jpg').fadeIn(100);

    }

});

});

Desde ja agradeço pela ajuda pessoal.

Luiz Guilherme

[felipe huggler]

Opa.

1) Tire o id repetido, trabalhe com class, class="thumbnail", 

2) coloque um evento atrelado a div pai #foto, nesse momento vc faz um (#foto .thumbnail) .length pra saber q quantidade de imagens que vc tem.

3) faca o seu timeout com base nisso

Ta resumido ;-)

--
--
Grupo de jQuery Brasil.
 
REGRAS: https://docs.google.com/document/d/1VfvTDmeHTSj-L5ouZJjQQ4OkjTCU1Hr2XtPYBNGVHH4/edit
 
USE O JSBIN.COM / JSFIDDLE.NET PARA CÓDIGOS.
 
Email: jque...@googlegroups.com
Biba: jquery-br+unsubscribe@googlegroups.com
Site: http://groups.google.com/group/jquery-br?hl=pt-BR

---
Você recebeu essa mensagem porque está inscrito no grupo "jQuery (Brasil)" dos Grupos do Google.
Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para jquery-br+unsubscribe@googlegroups.com.
Para mais opções, acesse https://groups.google.com/d/optout.

[Luiz Guilherme Schiefler de Arruda]

Antes de mais nada gostaria de agradecer pela ajuda.

Consegui resolver de uma outra maneira, não sei se é melhor ou não em termos de processamento. Resumindo, o que fiz foi criar uma classe única para as fotos e utilizar um id diferente para cada produto. Abaixo segue código:

HTML:

<div class="thumb">

<img class="thumbnail" id="produto1" src="">

<img class="thumbnail" id="produto2" src="">

<img class="thumbnail" id="produto3" src="">

</div>

jQuery:

$(document).ready(function(){

var interval;

var imagem_src;

var imagem_id;

$('.thumbnail').on({

   'mouseover': function(){

    var thisId = 0;

    imagem_src = $(this).attr('src');

    imagem_id = $(this).attr('id'); // Busca o id do produto. Este id deve ser uma coluna no banco de dados.

    interval = window.setInterval(updateImage, 500);

    function updateImage() {

var thumb_src = '/static/imagens/thumbnail/' + imagem_id + '-' + thisId + '.jpg';

$('#' + imagem_id).attr('src', thumb_src);

       thisId++;

       if (thisId == 9) thisId = 0;

    }

   }

});

$('.movie_thumb').on({

   'mouseout': function(){

    clearInterval(interval);

       $('#' + imagem_id).attr('src',imagem_src).fadeIn(100);

   }

});

});

Luiz Guilherme