0

私は3つの画像のコレクションを手に入れました.2つの小さな画像と大きな画像です。小さい画像をクリックすると、大きい画像に取って代わるように設定したいと思います。問題は、これら 3 つの画像のうちの 3 つのコレクションを持っているため、小さな画像をクリックすると、3 つの大きな画像すべての場所が表示されることです。セクション内の大きな画像のスポットのみを取得するための提案はありますか? いくつかのコードがあります。ありがとう！

$(document).ready(function(){
        $('img').click(function(){
        var url = $(this).attr('src');
        $(this).parents('.picture-container').find('.large-picture > img').attr('src', url);
        $('.large-picture > img').attr('src', url);
        $(this).attr('src', bigUrl);
        });
        });

写真のセクション (これらの 3 つがあります)

   <div class = 'picture-container'>
        <div class = 'large-picture' style = 'width:50%;height:100%;float:left;'>
            <img src = 'close_table_dupontstudios.png' width = '100%' height = '100%'>
        </div>
        <div class = 'picture-content' style = 'float:right;width:45%;height:100%;'>
            <div class='picture-title'>BOUTIQUE PRODUCTION STUDIO</div>
            <div class='picture-text'>We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.</div>
            <div class = 'small-picture-wrapper'>
                <div class = 'small-picture' style = 'float:left;height:100%;'>
                    <img src = 'hair_and_makeup_dupontstudios.png' width = '100%' height = '100%'>
                </div>
                <div class = 'small-picture' style = 'float:right;height:100%;'>
                    <img src = 'infinity_wall_dupontstudios.png' width = '100%' height = '100%'>
                </div>
            </div>
        </div>
    </div>
4

2 に答える 2

0

img src以外のhtmlで何も変更していないと思うので、これはうまくいくはずです:

 <script>

       $(document).ready( function(){

          $(".small-picture > img").click( function(){ 

              var small_img = $(this);
              var small_img_src = small_img.attr("src"); 

              var img_container = small_img.closest(".picture-container");

              var large_img = img_container.find(".large-picture > img");
              var large_img_src = large_img.attr("src");

              large_img.attr("src", small_img_src);
              small_img.attr("src", large_img_src);

         });
     });


    </script>
于 2013-07-15T19:28:08.777 に答える
0

必要なことを行うjquery スライドショー/カルーセルプラグインがたくさんあります。

この 1 つのことだけを行うためのスニペットが必要な場合は、必要なものを明確にする必要があるかもしれません。

私が収集したものから、常に3つの画像しかないはずです。1 つは大きく、他の 2 つは小さい (サムネイルのようなものですか?)。小さな画像をクリックして、大きな画像を置き換えたいとします（小さな画像が大きな画像と同じくらい大きくなり、その位置になりますか？）。

大きな画像を縮小して、選択したばかりの画像の代わりにします。

小さな子供と同じように説明してください。

于 2013-07-15T04:17:56.580 に答える