Jquery: Incrimentation para cada conjunto de elementos en más de 1 div

Question

Estoy haciendo una presentación de diapositivas Jquery. En él se enumeran las miniaturas, que cuando se hace clic, revela la imagen de gran tamaño como una superposición. Para que coincida con los pulgares con las imágenes grandes que estoy añadiendo atributos a cada miniatura y la imagen grande. Los atributos contienen un número que coincide con cada pulgar a su imagen de gran tamaño correspondiente. Funciona cuando una presentación de diapositivas está presente en una página. Pero yo quiero que funcione si más de una presentación de diapositivas está presente.

Este es el código para añadir atributos a los pulgares y las grandes imágenes:

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);
});

Esto funciona. Para hacer el trabajo de incremento cuando hay dos presentaciones de diapositivas en una página, pensé que podría pegar este código en una función de cada uno ...

$('.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);
    });
});

El problema con esto es que el operador incrimenting no se restablece para el div segunda presentación (.slideshow), por lo que terminan con los pulgares en la primera div .slideshow estando numerados 1,2,3 etc .. y en los pulgares la segunda div .slideshow estando numerados 4,5,6 etc. ¿Cómo hago que los números en el segundo reinicio .slideshow div y empezar de nuevo 1?

Esto es muy difícil de explicar de forma concisa. Espero que alguien se lo esencial.

Answer 1

En su cada, bajar un nivel, asegúrese de que está con ámbito de cada una presentación de diapositivas de esta manera:

$('.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++);
    });
});

Esto les pone a 0 en el interior de cada bloque .slideshow_content y bucles en su interior en lugar de establecer que en general y luego bucle a través de todos los bloques.