Menu
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
622
Answer: Use the jQuery attr() Method You can use the attr() method to change the image source (i.e. the src attribute of the <img> tag) in jQuery. The following example will change the image src when you clicks on the image.
You can use: $('#id'). attr('src', 'newImage. jpg');
With jQuery, you can dynamically create a new image element and append it at the end of the DOM container using the . append() method.
The most you could do is to trigger a background image change when hovering the LI. If you want something to happen upon clicking an LI and then staying that way, then you'll need to use some JS. I would name the images starting with bw_ and clr_ and just use JS to swap between them.
Change the src of the image, not of the div:
$('#image-zoom img').attr("src",loc); change line 3 to reference the image instead of its container:
$('#image-zoom img').attr("src",loc); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
