jquery - Load First image on custom Gallery with FadeIn effect

Question

i get this script to custom build some 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, but this site have some administrator, so i need to dinamic load inside the .img_big div the first li image. Another question is: How to put some FadeIn/FadeOut Effect on this script?

Answer 1

要将列表中的第一个图像加载到大图像中，可以执行以下操作：

$(document).ready(function() {

    var image = $("<img />").attr(
       "src", 
       $(".thumbs li:first-child a").attr("href"));

    $("#plantas-img .img_big").html(image);
}

要添加淡入淡出效果，可以使用jquery 淡入淡出功能。只需在您的“onclick”事件中调用他们。

Answer 2

将 javascript 更改为类似这样的内容以加载第一个并淡入

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