Lo que estoy haciendo es una slide de imagenes con un div con las imagenes pequeñas que al hacer click en cualquiera se muestre esta imagen pero grande en un div diferente, ademas se muestra un parrafo que esta como hermano de la imagen pequeña, este parrafo debe aparecer en un div caption don de lo meto con .html().
El script es pequeño y me funciona, lo que pasa es qu cuando doy click en todas las imagenes pequeñas al querer volver a dar click en las imagenes ya no aparece el parrafo en el div caption, lo que necesito es saber como hacer para que mostrar los parrafos sea ciclico sin importar si ya vi todas las imagenes.
Este es el codigo html
<body>
<div id="container">
<div id="slider">
<img class="show-img" src="imagenes/base_antienveje_giordani21622_1.png" width="600" height="300" alt="base1" />
</div>
<div id="caption"></div>
<div id="img-caption">
<div class="imagenes">
<img class="img-click"src="imagenes/base_antienveje_giordani21622_1.png" width="100" height="100" alt="base1" rel="<h3>Base Maquillaje Antienvejecimiento Giordani</h3>"/>
<p>Este es un texto de prueba para la primera imagen</p>
</div>
<div class="imagenes">
<img class="img-click" src="imagenes/base_maquillaje_beauty22862_1.png" width="100" height="100" alt="base2" rel="<h3>Base Maquillaje Antienvejecimiento </h3>"/>
<p>Este es un texto de prueba para la segunda imagen</p>
</div>
<div class="imagenes">
<img class="img-click" src="imagenes/base_oxigenante.jpg" width="100" height="100" alt="base3" rel="<h3>Base Maquillaje Antienvejecimiento b3</h3>"/>
<p>Este es un texto de prueba para la tercera imagen</p>
</div>
<div class="imagenes">
<img class="img-click" src="imagenes/base_studioartis_beauty22908_1.png" width="100" height="100" alt="base4" rel="<h3>Base Maquillaje Antienvejecimiento b4</h3>"/>
<p>Este es un texto de prueba para la cuarta imagen</p>
</div>
</div>
</div>
</body>
Y este es el script jquery.
$(document).ready(function(){
// $('#slider img').hide();
// $('.imagenes p').hide();
$('.imagenes img').click(function(){
var $thisPara=$(this);
var $thisText=$thisPara.siblings('p');
var ruta=$thisPara.attr('src');
$('.show-img').attr({src:ruta}).show(2000);
$('#caption').html($(this).siblings('p')).animate({opacity:0.7}, 4000);
//$('#caption').html($(this).attr('rel')).animate({opacity:0.7}, 4000);
});
});
Les agradezco de antemano a quien quiera ayudarme, creo que es problema de colocar un if o un for pero no descubro como hacerlo y ya llevo 2 dias intentandolo.
BENDICIONES..
y despues la remueves($('#slider img:eq(0)').remove()