I am currently working on a project to enlarge images that have thumbnails within divs.
My issue is that when I click on an image with the .thumbnail class, it enlarges as expected but I want all other products to disappear from view. I attempted adding a class with display: none, but because the image being passed to the function is inside the div, it remains visible. So, I tried using opacity instead, but have not been successful so far. Below, I will include the relevant code snippet.
Any assistance on this matter would be highly appreciated. Thank you.
$(document).ready(function() {
var images = document.querySelectorAll('.thumbnail');
images.forEach(function(image) {
image.addEventListener('click', enlarge);
});
function enlarge(e) {
var image = e.target,
interval,
height = 200,
width = 200,
z = $(this).css("z-index"); //Obtain the current z-index of the image which has been clicked
/*thisProduct = */
$(this).css("z-index", z + 10); //increase the z-index of just the image which has been selected by 10
$('#product-container').addClass('disable-click'); //Stops other products from being enlarged whilst another is
$('.unhidden').not($(this)).addClass('noOpacity');
}
});.noOpacity {
opacity: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product-container">
<div class="product-wrapper">
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/home-bg.jpg" class="thumbnail">
</div>
<div class="product-text">
Mexican Nachos - £6.99
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/enchilada.jpg" class="thumbnail">
</div>
<div class="product-text">
Enchiladas - £10.99
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/quesadilla.jpg" class="thumbnail">
</div>
<div class="product-text">
Quesadilla - £10.99
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/shrimp.jpg" class="thumbnail">
</div>
<div class="product-text">
Shrimp Stir Fry - £10.99
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/tacos.jpg" class="thumbnail">
</div>
<div class="product-text">
Tacos - £5.99
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/tortilla.jpg" class="thumbnail">
</div>
<div class="product-text">
Tortillas - £7.99
</div>
</div>
</div>
</div>
<!-- Product container -->