Carregar a primeira imagem na Galeria personalizada com efeito FadeIn
Eu recebo este script para criar uma galeria de imagens personalizada:
$('#plantas-img a').click(function(){
image = $("<img />").attr("src", $(this).attr("href"));
$("#plantas-img .img_big").html(image);
return false;
})
meu html:
<div id="plantas-img" class="product-img">
<div class="img_big">
<img src="plantas/image_1.jpg"/>
</div>
<div class="wrap_thumbs_plantas">
<ul class="thumbs">
<li><a href="plantas/image_1.jpg"><img src="plantas/thumb_image_1.jpg"/></a></li>
<li><a href="plantas/image_2.jpg"><img src="plantas/thumb_image_2.jpg"/></a></li>
<li><a href="plantas/image_1.jpg"><img src="plantas/thumb_image_1.jpg"/></a></li>
<li><a href="plantas/image_2.jpg"><img src="plantas/thumb_image_2.jpg"/></a></li>
<li><a href="plantas/image_1.jpg"><img src="plantas/thumb_image_1.jpg"/></a></li>
<li><a href="plantas/image_2.jpg"><img src="plantas/thumb_image_2.jpg"/></a></li>
<li><a href="plantas/image_1.jpg"><img src="plantas/thumb_image_1.jpg"/></a></li>
<li><a href="plantas/image_2.jpg"><img src="plantas/thumb_image_2.jpg"/></a></li>
<li><a href="plantas/image_1.jpg"><img src="plantas/thumb_image_1.jpg"/></a></li>
<li><a href="plantas/image_2.jpg"><img src="plantas/thumb_image_2.jpg"/></a></li>
</ul>
</div>
</div>
Isso funciona bem, mas este site tem algum administrador, então eu preciso carregar dinamicamente dentro do.img_big
div o primeiroli
imagem. Outra questão é: Como colocar algum efeito FadeIn / FadeOut neste script?