HTML＆JavaScript/JQueryを使用して拡大表示する画像を選択

Question

プレーンhtml5とJavaScript/jQuery（プラグインなし）を使用して簡単なコードを表示したい場合は、画像リストの画像をクリックすると、上記の大きな画像領域。

<!-- Large image holder --> 
    <div class="large-picture-left"> 

     <p>Property View</p>   

     <!-- Initially the default picture for the property will be shown --> 
     <img src="../images/properties/f0001-default.jpg" alt="Property Picture"></a>   
    </div> 

    <!-- Text info for the current larger picture --> 
    <div class="large-picture-left-text"> 

     <br><br> 

     <!-- Initial default info for default picture --> 
     <p>Location: <b>London</b></p> 

     <p>Bedrooms: <b>2</b></p> 

     <p>Type: <b>Flat</b></p> 

     <p>Price: <b>£365,000</b></p> 

     <p>Ref: <b>F0001</b></p> 

    </div> 

    </div> 


    <div style="clear: both"></div> 

    <br><br> 


    <div class="container"> 

     <div class="picture-range"> 

     <h2>Photo Range</h2> 

     <!-- When one of the images below is clicked, to have it shown in the large-picture-left class image holder--> 

     <div class="img"> 
      <img src="../images/properties/f0001-default.jpg" alt="Default" width="300" height="200"> 
      <div class="desc">Outside<br>5m<sup>2</</sup></div> 
     </div> 

     <div class="img"> 
      <img src="../images/properties/f0001-bed1.jpg" alt="Bedroom 1" width="300" height="200"> 
      <div class="desc">Bed 1<br>3m<sup>2</</sup></div> 
     </div> 

     <div class="img"> 
     <img src="../images/properties/f0001-bed2.jpg" alt="Bedroom 2" width="300" height="200"> 
      <div class="desc">Bed 2<br>10m<sup>2</</sup></div> 
     </div> 

     <div class="img"> 
     <img src="../images/properties/f0001-lounge.jpg" alt="Lounge" width="300" height="200"> 
      <div class="desc">Lounge<br>4m<sup>2</</sup></div> 
     </div> 

     <div class="img"> 
     <img src="../images/properties/f0001-kitchen.jpg" alt="Kitchen" width="300" height="200"> 
      <div class="desc">Kitchen<br>3m<sup>2</</sup></div> 
     </div> 

     <div class="img"> 
     <img src="../images/properties/f0001-bathroom.jpg" alt="Bathroom" width="300" height="200"> 
      <div class="desc">Bathroom<br>25m<sup>2</</sup></div> 
     </div> 

     </div> 

    </div> 

    <div style="clear: both"></div> 

だから、最初に上記のコードは、より広い領域での写真の外側のデフォルトが表示されます。ここでは

は、HTMLスニペットです。しかし、範囲の写真の1つを選択すると、選択した画像で最初の大きな写真が置き換えられます（可能であれば、デフォルトの写真情報を選択した画像情報に置き換えることもできます）。

ありがとうございました。

Answer 1

これは動作するはず

$(document).on("click", ".img", function() { 
    var newImage = $(this).find("src").attr("src"); 
    var currentImage = $(".large-picture-left img").attr.("src"); 
    $(".large-picture-left img").attr("src", newImage); 
    $(this).find("src").attr("src", currentImage); 
});