Write jQuery code to change the image source when a thumbnail is clicked

Description: The thumbnails have the big image address in a data-big attribute. Clicking a thumbnail must show the big image.

Hint:

• Use .data('big') and .attr().

---

HTML of the page

<img id="big" src="images/one-big.jpg" alt="One">
<img class="thumb" src="images/one-small.jpg" alt="One" data-big="images/one-big.jpg">
<img class="thumb" src="images/two-small.jpg" alt="Two" data-big="images/two-big.jpg">

Solution

$('.thumb').on('click', function () {
  $('#big').attr({
    src: $(this).data('big'),
    alt: $(this).attr('alt')
  });
});

$('.thumb').eq(1).click();

How it works

• .data('big') reads the data-big attribute of the clicked thumbnail.
• .attr({...}) sets two attributes at the same time.

Read Get Content and Set Content.

• Previous Exercise
• Next Exercise

---

Tutorials
No Content Found.

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.