0

私はこのスクリプトを取得して、いくつかの画像ギャラリーをカスタムビルドします:

$('#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_bigdiv内に動的にロードする必要があります。li別の質問: このスクリプトに FadeIn/FadeOut エフェクトを追加するにはどうすればよいですか?

4

2 に答える 2

0

リストから最初の画像を大きな画像にロードするには、次のようにします。

$(document).ready(function() {

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

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

フェードインおよびフェードアウト効果を追加するには、jquery フェード関数を使用できます。「onclick」イベントでそれらを呼び出すだけです。

于 2013-08-13T03:29:02.910 に答える