1

サムネイル (link_to_thumbnail1.jpg) をクリックすると、大きな画像 (link_to_big_image1.jpg) が id の div 内に表示され#imageWrapます。

#imageWrapサムネイル付きのdiv内の現在の画像をjqueryで変更するにはどうすればよいですか?

例: サムネイル 1 (link_to_thumbnail1.jpg) をクリックすると、(Link_to_main_image0.jpg) の現在の画像が#imageWrapサムネイル 1 に変わります。

これを解決する方法があることを願っています。

<script type="text/javascript">
    $(document).ready(function() {
        $('.thumbnail').live("click", function() {
            $('#mainImage').hide();
            $('#imageWrap').css('background-image', "url('/ajax-loader.gif')");
            var i = $('<img />').attr('src',this.href).load(function() {
                $('#mainImage').attr('src', i.attr('src'));
                $('#imageWrap').css('background-image', 'none');
                $('#mainImage').fadeIn();
            });
            return false; 
        });
    });
</script>

<div class="Image" id="imageWrap">    
    <img src="Link_to_main_image0.jpg" alt="" title="" id="mainImage" />     
</div>

<a href="link_to_thumbnail1.jpg" class="thumbnail">
    <img src="link_to_big_image1.jpg" alt="" title="" /> 
</a>

<a href="link_to_thumbnail2.jpg" class="thumbnail">
    <img src="link_to_big_image2.jpg" alt="" title="" />     
</a>

<a href="link_to_thumbnail3.jpg" class="thumbnail">
    <img src="link_to_big_image3.jpg" alt="" title="" /> 
</a>
4

2 に答える 2

1

それはあなたが探しているものですか？:

http://jsbin.com/avofoj/1/edit 

$(document).ready(function(){
  $('.thumbnail').click(function(){
    $('#imageWrap img').empty();
    $('#imageWrap img').attr('src',$(this).attr('src'));
  });
});
于 2013-01-15T09:55:00.757 に答える
0

あなたが何を達成したいのか、私は少し混乱しています。しかし、 a が<div class="imageWrapper"></div>あり、それに何か他のものを含めたい場合は、次の.html()ように関数を使用できます。

$('.imageWrapper').html('<img src="whatever_i_need_to_be_here_now.jpg" />');
于 2013-01-15T09:40:50.287 に答える