使用FadeIn效果将第一张图片加载到自定义图库中 [英] Load First image on custom Gallery with FadeIn effect

问题描述

我得到此脚本以自定义构建一些图像库:

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

我的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>

这工作正常，但是该站点有一些管理员，因此我需要在.img_big div内动态加载第一个li图像.另一个问题是:如何在此脚本上放置一些FadeIn/FadeOut效果?

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?

推荐答案

将javascript更改为类似的格式，以加载第一个并淡入

Change javascript to something like this to load first one and fade in

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

这篇关于使用FadeIn效果将第一张图片加载到自定义图库中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！