jquery - Load First image on custom Gallery with FadeIn effect -


i script custom build image gallery:

$('#plantas-img a').click(function(){         image = $("<img />").attr("src", $(this).attr("href"));         $("#plantas-img .img_big").html(image);         return false;     }) 

my 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> 

this works fine, site have administrator, need dinamic load inside .img_big div first li image. question is: how put fadein/fadeout effect on script?

to load first image list big image, can that:

$(document).ready(function() {      var image = $("<img />").attr(        "src",         $(".thumbs li:first-child a").attr("href"));      $("#plantas-img .img_big").html(image); } 

to add fade in , out effects, can use jquery fading functions. call them on "onclick" events.


Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -