Change img src on click jquery
Change img src on click jquery
I have a gallery of images, when I click one of the gallery items a popup window shows up, each item has a different image src. I'd like to make this gallery dynamic so when the user click on an item, the image of the corresponding item should show in the popup window. I hope this doesn't sound confusing, here's an image to illustrate what I'm trying to say:
And the HTML:
<div class="gallery__flex">
<div class="gallery__item">
<img src="img/gallery-1.jpeg" alt="" class="gallery__img">
</div>
<div class="gallery__item">
<img src="img/gallery-2.jpeg" alt="" class="gallery__img">
</div>
<div class="gallery__item">
<img src="img/gallery-3.jpeg" alt="" class="gallery__img">
</div>
<div class="gallery__item">
<img src="img/gallery-4.jpeg" alt="" class="gallery__img">
</div>
</div>
<div class="gallery__flex">
<div class="gallery__item">
<img src="img/gallery-5.jpeg" alt="" class="gallery__img">
</div>
<div class="gallery__item">
<img src="img/gallery-6.jpeg" alt="" class="gallery__img">
</div>
<div class="gallery__item">
<img src="img/gallery-7.jpeg" alt="" class="gallery__img">
</div>
<div class="gallery__item">
<img src="img/gallery-8.jpeg" alt="" class="gallery__img">
</div>
<!-- popup window -->
<div class="popup">
<img src="img/gallery-1.jpeg" alt="" class="popup__img">
<span class="popup__close-icon" id="closeIcon">×</span>
</div>
How can I do this using Jquery?
2 Answers
2
You can try the following code, when you click img it show popup of img
$(document).ready(function(){
$(".gallery__item>img").click(function(){
var img = $(this).attr('src');
$(".popup>img.popup__img").attr('src',img);
$(".popup").show();
});
$("#closeIcon").click(function(){
$(".popup").hide();
});
});
.gallery__img{
width:80px;
height:80px;
float:left;
}
.popup{
margin-top:10px;
width:100%;
float:left;
border:1px solid #ccc;
padding:10px;
box-sizing:border-box;
position:relative;
display:none;
}
.popup__img{
width:80px;
height:80px;
left:0;
right:0;
top:0;
display:block;
margin:auto;
}
#closeIcon{
position:absolute;
right:0;
top:0;
z-index:1;
font-size:18px;
background:rgba(0,0,0,0.4);
color:#fff;
padding:2px;
box-sizing:border-box;
o
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="gallery__flex">
<div class="gallery__item">
<img src="https://cdn2.tgdd.vn/Products/Images/42/166247/samsung-galaxy-a8-star-2018-600x600.jpg" alt="" class="gallery__img">
</div>
<div class="gallery__item">
<img src="https://cdn1.tgdd.vn/Products/Images/42/155261/oppo-f7-bac-600x600.jpg" alt="" class="gallery__img">
</div>
<div class="gallery__item">
<img src="https://cdn3.tgdd.vn/Products/Images/42/84798/samsung-galaxy-j7-prime-hh-600x600.jpg" alt="" class="gallery__img">
</div>
<div class="gallery__item">
<img src="https://cdn.tgdd.vn/Products/Images/42/154260/huawei-nova-3e-2-600x600.jpg" alt="" class="gallery__img">
</div>
</div>
<div class="gallery__flex">
<div class="gallery__item">
<img src="https://cdn2.tgdd.vn/Products/Images/42/177047/samsung-galaxy-s9-tim-1-600x600.jpg" alt="" class="gallery__img">
</div>
</div>
<!-- popup window -->
<div class="popup">
<img src="img/gallery-1.jpeg" alt="" class="popup__img">
<span class="popup__close-icon" id="closeIcon">× </span>
</div>
$(".gallery__item>img")
What happens is that you (in your code) are attaching the click event to the
<div> element. The div has no "src" property, so you code does not work. by $(".gallery__item>img") you attach the click event to the image inside the div, not the div itself.– Dknacht
Jul 1 at 3:35
<div>
$(".gallery__item>img")
Ohh I see, that makes sense. Thank you very much for the explaining that to me.
– Gilbert
Jul 1 at 3:39
@Dknacht say correct
– skipperhoa
Jul 1 at 4:17
I made an example:
https://codepen.io/dknacht/pen/dKaONp
Use the $.prop function to access the source attribute and change it.
If you bind the image with a click event, then src = $(this).prop("src") will return the source.
You will have to set the source, to the image, in the popup as $("idToImageInPopup").prop("src", src).
src = $(this).prop("src")
$("idToImageInPopup").prop("src", src)
$("img").click(function (){
$("#imageDialog").prop("src", $(this).prop("src"))
$("#dialog").dialog("open")
});
Thank you for replying @Dknacht, this is the code that I'm using and it's not working:
// Popup open $('.gallery__item').click(function() { $('.popup').css({ 'opacity': '1', 'visibility': 'visible'}); $('body').css('overflow', 'hidden'); $(".popup").prop("src", $(this).prop("src")) })– Gilbert
Jul 1 at 3:06
// Popup open $('.gallery__item').click(function() { $('.popup').css({ 'opacity': '1', 'visibility': 'visible'}); $('body').css('overflow', 'hidden'); $(".popup").prop("src", $(this).prop("src")) })
Replace
$('.gallery__item').click( with $('.gallery__item>img').click( to attach the click event to the image, not the div containing the image. What happens is that you (in your code) are attaching the click event to the <div> element. The div has no "src" property, so you code does not work. by $(".gallery__item>img") you attach the click event to the image inside the div, not the div itself.– Dknacht
Jul 1 at 3:37
$('.gallery__item').click(
$('.gallery__item>img').click(
<div>
$(".gallery__item>img")
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Thank you very much, this works perfectly. Now do you mind explaining what this piece of code actually does
$(".gallery__item>img")– Gilbert
Jul 1 at 3:28