CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hariss
Hariss

Reputation: 273

Set image src to another image jquery

I have a div with some images, and when I clicked on those images I want another div to open with that Image that I clicked.

JS

$('.examples img').click(function() {
    var loc = $(this).attr("src");
    $('#image-zoom').attr("src",loc);
});

HTML

<div class="container examples"  >
    <div id="image-zoom">
        <img class="img-thumbnail zoom" src="" alt="dental">
    </div>
    <div class="row">
        <div class="col-sm-12">
            <img id="zoom" class="img-thumbnail zoom" src="images/01.png" alt="dental">
            <img class="img-thumbnail zoom" src="images/02.png" alt="dental">
            <img class="img-thumbnail zoom" src="images/03.png" alt="dental">
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <img class="img-thumbnail zoom" src="images/04.png" alt="dental">
            <img class="img-thumbnail zoom" src="images/05.png" alt="dental">
            <img class="img-thumbnail zoom" src="images/06.png" alt="dental">
        </div>
    </div>
</div>

When I try to Hide the div its working, so I have error in syntax I think

Upvotes: 24

Views: 106422

Answers (3)

AyushM.
AyushM.

Reputation: 1

#image-zoom is an id for a div tag, which doesn't have a src attribute. So in order to change the image you've to traverse to img: 

$('#image-zoom img').attr("src",loc);

Upvotes: 0

Sagi_Avinash_Varma
Sagi_Avinash_Varma

Reputation: 1509

change line 3 to reference the image instead of its container:

$('#image-zoom img').attr("src",loc);

Upvotes: 4

Callidior
Callidior

Reputation: 2904

Change the src of the image, not of the div:

$('#image-zoom img').attr("src",loc);

Upvotes: 58

Related Questions