CODEWITHSUNDEEP
javascriptjqueryhtml
Cem
Cem

Reputation: 65

Select image for larger view using HTML & JavaScript/JQuery

I would like a simple code using plain html5 and JavaScript/jQuery (without plugins) that upon clicking on an image of a list of images, the clicked image will be shown in a larger image area above.

Here is a HTML snippet:

    <!-- 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>

So, initially the above code will display the default outside photo in the larger area. However, I'm having problems in that, if one of the range pictures is selected, to have the initial default larger photo replaced by the selected picture (and if possible to also have the default photo info replaced by the selected picture info).

Thanks for any help.

Upvotes: 0

Views: 238

Answers (1)

Gerard
Gerard

Reputation: 15806

This should work

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

Upvotes: 1

Related Questions