Pergunta

Estou fazendo uma apresentação de slides jQuery. Ele lista as miniaturas, que, quando clicadas, revelam a imagem grande como uma sobreposição. Para combinar os polegares com as imagens grandes, estou adicionando atributos a cada miniatura e imagem grande. Os atributos contêm um número que corresponde a cada polegar à sua imagem grande correspondente. Funciona quando uma apresentação de slides está presente em uma página. Mas quero que funcione se mais de uma apresentação de slides estiver presente.

Aqui está o código para adicionar atributos aos polegares e imagens grandes:

thumbNo = 0;
largeNo = 0;
$('.slideshow_content .thumbs img').each(function() {            
   thumbNo++;
   $(this).attr('thumbimage', thumbNo);
   $(this).attr("title", "Enter image gallery");
});
$('.slideshow_content .image_container .holder img').each(function() {   
   largeNo++;
   $(this).addClass('largeImage' + largeNo);
});

Isso funciona. Para fazer a incremento funcionar quando houver duas apresentações de slides em uma página, pensei em colocar esse código em uma função ...

$('.slideshow').each(function() {
    thumbNo = 0;
    largeNo = 0;
    $(this + '.slideshow_content .thumbs img').each(function() {            
       thumbNo++;
       $(this).attr('thumbimage', thumbNo);
       $(this).attr("title", "Enter image gallery");
    });
    $(this + '.slideshow_content .image_container .holder img').each(function() {   
       largeNo++;
       $(this).addClass('largeImage' + largeNo);
    });
});

O problema com isso é que o operador de incorporação não é redefinido para a segunda apresentação de slides Div (.Slideshow), então acabo com os polegares na primeira divisão .Slideshow sendo numerada 1,2,3 etc. e polegares no segundo. Div da apresentação de slides sendo numerada 4,5,6 etc. Como faço os números no segundo .Slideshow div reset e comece de 1 novamente?

Isso é realmente difícil de explicar de forma concisa. Espero que alguém seja a essência.

Foi útil?

Solução

Em cada um deles, desça um nível, verifique se está escopo para cada apresentação de slides como esta:

$('.slideshow_content').each(function() {
    thumbNo = 0;
    largeNo = 0;
    $(this).find('.thumbs img').each(function() {
       $(this).attr('thumbimage', thumbNo++);
       $(this).attr("title", "Enter image gallery");
    });
    $(this).find('.image_container .holder img').each(function() {   
       $(this).addClass('largeImage' + largeNo++);
    });
});

Isso os define para 0 dentro de cada .slideshow_content Bloqueie e bloqueie dentro dele, em vez de configurá -lo em geral e, em seguida, entre todos os blocos.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top