We Keep Coding

How do I display hidden image when i click list on html using JS

for example, all images are hidden and when I click list, it should pop up. if I click "Hello1" text then image1 should popup
<li class nav-1>Hello1</li>
<li class nav-1>Hello2</li>
<li class nav-1>Hello3</li>
<img src="images/1.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>

I would add id's to your images and put in a basic hide/unhide script:
<script>
function toggleHide(elementid){
a=document.getElementById(elementid).style.visibility;
if (a=="hidden"){
document.getElementById(elementid).style.visibility="visible";
}else{
document.getElementById(elementid).style.visibility="hidden";
}
}
</script>
<style>
/* hide all images */
#img1{
visibility:hidden;
}
#img2{
visibility:hidden;
}
#img3{
visibility:hidden;
}
</style>
<li class nav-1>Hello1</li>
<li class nav-1>Hello2</li>
<li class nav-1>Hello3</li>
<img src="images/1.jpg" id="img1" alt=""/>
<img src="images/2.jpg" id="img2" alt=""/>
<img src="images/3.jpg" id="img3" alt=""/>

In the example below, I used div instead of img, but the concept is the same...
Read the comments for more details please:
// Get the buttons and the images
let buttons = document.querySelectorAll('.btn');
let images = document.querySelectorAll('.image');
// For each button:
buttons.forEach(btn => {
// Onclick event:
btn.addEventListener('click', () => {
// Get all the images and remove the 'active' class
images.forEach(image => { image.classList.remove('active'); });
// Get the id of the clicked button (which is the data-image of the target image)
let target = btn.getAttribute('id');
// Add the class 'active' to the image
document.querySelector(`[data-image="${target}"]`).classList.add('active');
});
});
.image {
width: 100px;
height: 100px;
border: 1px solid;
opacity: 0;
transition: all 0.2s;
display: none;
}
.image.active {
opacity: 1;
display: block;
}
<button class="btn" id="image1">Image 1</button>
<button class="btn" id="image2">Image 2</button>
<button class="btn" id="image3">Image 3</button>
<div class="image" data-image="image1">1</div>
<div class="image" data-image="image2">2</div>
<div class="image" data-image="image3">3</div>

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.

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/

Image Height now changing with jQuery

I'm trying to change the height and width of an image when clicked on a certain button. So far I got the basics, but I think I don't have them in the right order. The image and the other text are moving, but the image size isn't changing. Right now it mostly the white space around the image changing.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//image
function shrinkImage() {
$('#dog_image').height(200);
$('#dog_image').width(307);
}
</script>
</head>
<div id="dog_image">
<img src="dog.jpg" alt="turle">
</div>
<div id="image_buttons">
<button type="button" id="shrink" onclick="shrinkImage();">Shrink Image</button>
</div>

This isn't you want?
img{
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//image
function shrinkImage() {
$('#nickel_image').height(200);
$('#nickel_image').width(307);
}
function enlargePic() {
$('#nickel_image').height(450);
$('#nickel_image').width(580);
}
function restorePic() {
$('#nickel_image').height(300);
$('#nickel_image').width(460);
}
</script>
</head>
<div id="nickel_image">
<center><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="turle"></center>
</div>
<div id="image_buttons">
<p>Image:</p>
<button type="button" id="shrink" onclick="shrinkImage();">Shrink Image</button>
<button type="button" id="enlarge" onclick="enlargePic();">Enlarge Pic</button>
<button type="button" id="restore" onclick="restorePic();">Restore Pic</button>
</div>

Here's a nice way to do that :
$('.pictureclass').click(function (e) {
if ($(e.target).hasClass('expanded')) {
$(".pictureclass").removeClass('expanded').stop().animate({
width: 300,
height: 300
}, 300);
} else {
$(".pictureclass").addClass('expanded').stop().animate({
width: $(e.target).attr("width"),
height: $(e.target).attr("height")
}, 200);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="mrbean" class="pictureclass" src="http://2.bp.blogspot.com/-C6KY8tsc8Fw/T-SVFnncxjI/AAAAAAAAANw/FMiNzA8Zecw/s640/mr.bean.jpg" width="50" height="50" />

Movement between Images in Gallery with Next & Prev Buttons

i have how many images in gallery that when click on the any image,image displayed on the other bigger img tag.i would like to implement a previous and next button that i could movement between images.i think could use next() method in javascript and i found below Example but i'm beginner in js and i could not dose this work.
<script>
var interval = undefined;
$(document).ready(function () {
interval = setInterval(getNext, 2000); // milliseconds
$('#next').on('click', getNext);
$('#prev').on('click', getPrev);
$('.slideshow a').onclick(function () {
var src=$('a img').attr("src");
$('#bigImage img').attr("src",src);
});
});
function getNext() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
transition($curr, $next);
}
function getPrev() {
var $curr = $('.slideshow img:visible'),
$next = ($curr.prev().length) ? $curr.prev() : $('.slideshow img').last();
transition($curr, $next);
}
function transition($curr, $next) {
clearInterval(interval);
$next.css('z-index', 2).fadeIn('slow', function () {
$curr.hide().css('z-index', 0);
$next.css('z-index', 1);
});
}
</script>
<div class="slideshow">
<img src="first-image.jpg" width="150" height="150" alt="first image">
<img src="second-image.jpg" width="150" height="150" alt="second image">
<img src="third-image.jpg" width="150" height="150" alt="third image">
<img src="fourth-image.jpg" width="150" height="150" alt="fourth image">
...
</div>
<button type="button" Id="prev">Previous</button>
<button type="button" Id="next">Next</button>
<div id="bigImage">
<img src="#" width="800" height="600" alt="Big Image">
</div>
<style>
.slideshow {
position: relative; /* necessary to absolutely position the images inside */
width: 500px; /* same as the images inside */
height: 100px;
}
.slideshow img {
position: absolute;
display: none;
}
.slideshow img:first-child {
display: block; /* overrides the previous style */
}
</style>
Please Guide Me!
thanks!