We Keep Coding

Jquery zoom, zooms only one image on hover

Im trying to make a product page with gallery (clickable small thumbnails on the side) which opens a large image on the right side.
Jquery zoom only displays the zoom on the first image, when the other images are displayed the zoom is still on the first image.
Here is my code:
HTML
<section class="product-page">
<div class="thumbnails">
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-right-side.png" alt="thumb-air-force-right-side" onclick="right()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-left-side.png" alt="thumb-air-force-left-side" onclick="left()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-bottom-side.png" alt="thumb-air-force-bottom-side" onclick="bottom()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-side.png" alt="thumb-air-force-pair-side" onclick="pairSide()"></div>
<div class="thumb"><img src="img/nike/shoes/Air-force1/Thumbnails/thumb-air-force-pair-top.png" alt="thumb-air-force-pair-top" onclick="pairTop()"></div>
</div>
<div class="img-display">
<span class='zoom' id='shoe1'>
<img id="img-area" src="img/nike/shoes/Air-force1/air-force-right-side.png" alt="air-force-right-side" width="320" height="320">
</span>
<span class='zoom1' id='shoe1'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-left-side.png" alt="air-force-left-side" width="320" height="320">
</span>
<span class='zoom' id='shoe3'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-bottom-side.png" alt="air-force-bottom-side">
</span>
<span class='zoom' id='shoe4'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-side.png" alt="air-force-pair-side">
</span>
<span class='zoom' id='shoe5'>
<img class="hidden" id="img-area" src="img/nike/shoes/Air-force1/air-force-pair-top.png" alt="air-force-pair-top">
</span>
</div>
</section>
JS for image changing while clicking on the thumbnail images
var img = document.getElementById("img-area");
function right(){
img.src='img/nike/shoes/Air-force1/air-force-right-side.png';
}
function left(){
img.src='img/nike/shoes/Air-force1/air-force-left-side.png';
}
function bottom(){
img.src='img/nike/shoes/Air-force1/air-force-bottom-side.png';
}
function pairSide(){
img.src='img/nike/shoes/Air-force1/air-force-pair-side.png';
}
function pairTop(){
img.src='img/nike/shoes/Air-force1/air-force-pair-top.png';
}
And the Jquery code
$(document).ready(function(){
$('#shoe1').zoom();
$('#shoe2').zoom();
$('#shoe3').zoom();
$('#shoe4').zoom();
$('#shoe5').zoom();
});
How to make the changed image zoom in on hover?
Thanks in advance.

Something as simple as this could be achievable without causing repetitive strain injury.
For obvious reasons I haven't considered image preloading, etc, but this is something I hope you can take inspiration from.
Your img-display should be treated as a canvas. Bind a single event handler to links wrapped around thumbs who's href attribute contains the larger image you want to load in the canvas area. This event handler simply rotates your thumbnails, but uses the larger image and passes that to both the canvas image and the jQuery zoom plugin API whilst toggling active states of thumbs (as an aesthetic suggestion).
Why href? As an example, screen readers still need to be able to follow these links. I'm thinking accessibility ftw.
Images courtesy of JD Sports.
$(function() {
$('.zoom').zoom();
$('.thumb').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
img {
display: block;
height: auto;
max-width: 100%;
}
.product-page {
display: flex;
}
.img-display {
flex-grow: 1;
max-width: 372px;
}
.thumb {
opacity: .7;
margin: 0 .25rem .25rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.thumb:hover,
.thumb.active {
opacity: 1;
}
.zoom {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<section class="product-page">
<div class="thumbnails">
<div class="thumb active">
<a href="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="thumb-air-force-right-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_b?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-left-side">
</a>
</div>
<div class="thumb">
<a href="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1">
<img src="https://i8.amplience.net/i/jpl/jd_334285_e?qlt=92&w=950&h=673&v=1" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="img-display">
<span class="zoom">
<img src="https://i8.amplience.net/i/jpl/jd_334285_a?qlt=92&w=750&h=531&v=1" alt="">
</span>
</div>
</section>

#perocvrc
Please try below code it works perfectly as per your requirement.
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
height: auto;
max-width: 100%;
}
.main-view-page {
display: flex;
}
.full-screen-img {
flex-grow: 1;
max-width: 500px;
}
.sideimg {
opacity: .7;
margin: 0 .1rem .1rem 0;
width: 120px;
transition: opacity .25s ease-out;
}
.sideimg:hover,
.sideimg.active {
opacity: 1;
width:135px;
}
.zoom-in {
display: inline-block;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js"></script>
<script>
$(function() {
$('.zoom-in').zoom();
$('.sideimg').on('click', 'a', function(e) {
e.preventDefault();
var thumb = $(e.delegateTarget);
if (!thumb.hasClass('active')) {
thumb.addClass('active').siblings().removeClass('active');
$('.zoom-in')
.zoom({
url: this.href
})
.find('img').attr('src', this.href);
}
});
});
</script>
</head>
<body>
<section class="main-view-page">
<div class="thumbnails">
<div class="sideimg">
<a href="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg">
<img src="https://st2.depositphotos.com/2038977/8502/i/950/depositphotos_85027142-stock-photo-goats-grazing-on-the-alpine.jpg" alt="thumb-air-force-right-side">
</a>
</div>
<div class="sideimg active">
<a href="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="thumb-air-force-left-side">
</a>
</div>
<div class="sideimg">
<a href="https://jooinn.com/images/cabin-with-beautiful-view.jpg">
<img src="https://jooinn.com/images/cabin-with-beautiful-view.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
<div class="sideimg">
<a href="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg">
<img src="https://www.principlesinsight.co.uk/wp-content/uploads/2019/07/clouds-conifer-daylight-371589.jpg" alt="thumb-air-force-bottom-side">
</a>
</div>
</div>
<div class="full-screen-img">
<span class="zoom-in">
<img src="https://wallpaperplay.com/walls/full/b/1/c/162815.jpg" alt="main-view-images">
</span>
</div>
</section>
</body>
</html>
I hope above code will be useful for you.
Thank you.

Iterate matching elements to control custom slick carousels

I am using slick carousel with some custom code to provide pagination. It's working great but now I want to have multiple carousels per page and although I've found solutions, I'm having trouble getting them to work with the customisations in my code.
There is an example [here] (Multiple Slick Sliders Issue) that iterates over all elements with a particular class and assigns an ID, but I just can't get it working with the custom pagination code I have.
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
var first = $('.slick-active:first > div:first').get(0);
var last = $('.slick-active:last > div:last').get(0);
if($(last).html() == '')
last = $('.slick-active:last > div:not(:empty)').get(0);
let start,end;
$('.slick-slide > div').each(function(i,v){
if(first === $(v).get(0)) {
start = i+1;
}
if(last === $(v).get(0)) {
end = i+1;
}
});
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>

You could create a wrapper container to isolate instances
<div class="slider">
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
</div>
Then to initialize use an each loop for isolation
$('.slider').each(function() {
var $slider = $(this),
// arrows within this instance
$nArrow = $slider.find('.next'),
$pArrow = $slider.find('.prev');
// initialize this carousel instance with appropriate arrows
$slider.find('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $pArrow,
nextArrow: $nArrow
});
})
For the events , look up to the container class and use find() for the elements within that instance
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
var $slider = $(this).parent();
// examples finding elements within this instance
let total = $slider.find('.carousel .item').length;
var first = $slider.find('.slick-active:first > div:first').get(0);
var last = $slider.find('.slick-active:last > div:last').get(0);
// use find for other elements also
......
})

How to temporarily disable hover during a .animate command?

I am trying to code a central navigation that allows for 4 tiles to appear from behind an image when the image is clicked. I am having an issue in which the tiles have a CSS styling of hover that can interrupt their toggle animation and wondered how I could temporarily disable the hover while the animation is running.
https://jsfiddle.net/Destinneh/4tgs2L5y/10/
http://sendvid.com/xodtv69a A video of what I'm trying to avoid.
$('#button').click(function(){
if($(this).attr("trigger")==="0"){
$('#navDown').animate({"top":"90%"},600);
$('#navUp').animate({"top":"10%"},600);
$('#navRight').animate({"left":"10%"},600);
$('#navLeft').animate({"left":"90%"},600);
$(this).attr("trigger","1");
}
else{
$('#navUp').animate({"top":"50%"},600);
$('#navDown').animate({"top":"50%"},600);
$('#navLeft').animate({"left":"50%"},600);
$('#navRight').animate({"left":"50%"},600);
$(this).attr("trigger","0");
}
});

You can introduce new class
Use it to play with hover
Remove class when you start animation
Add class back when animation ends
For example, change JS code to code below:
const navIds = ['#navDown', '#navUp', '#navRight', '#navLeft'];
function onAnimateStart() {
for (const id of navIds) {
$(id).removeClass('hoverOn');
}
}
function onAnimateComplete() {
for (const id of navIds) {
$(id).addClass('hoverOn');
}
}
$('#button').click(function() {
onAnimateStart();
if ($(this).attr("trigger")==="0") {
$('#navDown').animate({"top":"90%"}, 600);
$('#navUp').animate({"top":"10%"}, 600);
$('#navRight').animate({"left":"10%"}, 600);
$('#navLeft').animate({"left":"90%"}, 600, function() {
onAnimateComplete()
});
$(this).attr("trigger","1");
} else {
$('#navUp').animate({"top":"50%"}, 600);
$('#navDown').animate({"top":"50%"}, 600);
$('#navLeft').animate({"left":"50%"}, 600);
$('#navRight').animate({"left":"50%"}, 600, function() {
onAnimateComplete();
});
$(this).attr("trigger","0");
}
});
Change CSS part
.centreNav:hover{
transition: 0.25s;
width: 105px;
height: 105px;
border:2px solid white;
}
To:
.hoverOn:hover {
transition: 0.25s;
width: 105px;
height: 105px;
border: 2px solid white;
}
HTML part to (basically add hoverOn to your centreNav elements):
<div id="containerCent">
<a id="button" trigger="0" href="#"><img src="images/Logo.png" alt=" logo"></a>
<div id="spiralNav">
<a href="#">
<div id="navUp" class="centreNav hoverOn">
<h2></h2>
</div>
</a>
<a href="#">
<div id="navLeft" class="centreNav hoverOn">
<h2></h2>
</div>
</a>
<a href="#" target="_blank">
<div id="navRight" class="centreNav hoverOn">
<h2></h2>
</div>
</a>
<a href="#">
<div id="navDown" class="centreNav hoverOn">
<h2></h2>
</div>
</a>
</div>
</div>
JSFiddle with all changes from above:
https://jsfiddle.net/g3p2erfo/

How to adjust width of the image on the slick-track

I have a problem about the width of slick.js Where the box on the slick-track exceeds the page on the website.
Please pay attention to the image I uploaded this:
for the use of my program code more or less like this:
jQuery('.image-slider').slick({
slidesToShow: 1.7,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
arrows: false,
dots: false,
});
.image-slider .slick-slide {
margin: 0 2px;
display: inline-block;
}
.image-slider a {
display: block;
width: 100%;
}
.image-slider img {
width: 860px;
height: auto;
margin-top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class='image-slider'>
<div class='overlay-container'>
<a href='#'><img src='http://www.sixteenconsulting.com/sixteenblog/wp-content/uploads/2017/10/veille_complexe-800x533.jpg' />
<div class='overlay'>
<div class='text' />
</div>
</a>
</div>
<div class='overlay-container'>
<a href='#><img src=' http://www.herbusiness.co.ke/wp-content/uploads/2017/10/battlefield_africa_winners-800x533.jpg '/>
<div class='overlay '>
<div class='text '/>
</div>
</a>
</div>
<div class='overlay-container '>
<a href='# '><img src='https://disrupts.com/wp-content/uploads/2016/08/00948135202729.56ed9d795bc5b-2-800x533.jpg '/>
<div class='overlay '>
<div class='text '/>
</div>
</a>
</div>
</div>

I couldn't work this out for ages myself. I was changing the
<img width="200px" href="myimage.png">
in the div's but that didn't work. Also I'm using tables so its even more complicated. This can create lots of white space after the images.
Because the whole thing is responsive you need to use width with a percentage to make them work correctly, so that it scales as you change your screen width.
<img width="100%" href="myimage.png">
or some percentage of the screen.

Why does my button cannot disable overflow-y:hidden?

I'm trying to achieve that my button will be responsive. In precise, on first click when menu opens it darkens the entire screen and highlight the menu, as well as overflow-y:hiddenstarts working since my goal is to make sure when menu opens it won't have any scroll. There when the main issue starts to appear, overflow hidden takes place and I cannot switch off when I click on menu button again.
How to achieve this ?
my previous jquery:
$("#button").click(function(){
$('.slide').fadeToggle(500);
$('.darklayer').toggleClass('active');
$('body').css({'overflow-y': 'hidden'});
});
here is my new jquery:
$("#button").click(function(){
var $dark = $('.darklayer');
$('.slide').fadeToggle(500);
($dark).toggleClass('active');
if($dark.is(':active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').off('click');
}
}});
My HTML:
<div class="darklayer"></div>
<header id="main_menu">
<div id="menu">
<ul class="slide">
<li>Поиск строения</li>
<li>Оплатить ком услуги</li>
<li><a href=#>Обратиться за помощью</a></li>
<li><a href=#>Управляющая компания</a></li>
<li>Обратиться в Акимат</li>
<li><a href=#>Объявления</a></li>
<li>Информация о строении</li>
<li><a href=#>Обсуждения</a></li>
<li><a href=#>Помощь</a></li>
</ul>
</div>
<section id="main_header">
<div class="left_header">
<img src="svg/logo.svg" alt="logo" style="height: 16px; padding-left: 15px;">
<p class="text_ru">ru</p>
</div>
<div class="right_header">
<img class="btn search" src="svg/search.svg" alt="search" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer; ">
<img class="btn" src="svg/pro.svg" alt="pro" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
<img id="button" class="btn" src="svg/sandwich.svg" alt="sandwich" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;">
</div>
</section>
</header>

try this: user hasClass as shown below
$("#button").click(function(){
var $dark = $('.darklayer');
$('.slide').fadeToggle(500);
$dark.toggleClass('active');
if($dark.hasClass('active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').off('click');
}
}});

I think your problem in if statement you can use
if($dark.hasClass('active'))
instead of
if($dark.is(':active'))

Can you try this?
if($dark.is(':active')) {
$('body').css({'overflow-y': 'hidden'});
}
else {
$('body').css({'overflow-y': 'visible'});
}