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.

Changing the function of a button in a website

So below I have some code of what I'm working with. Right now, if you just launch the website, the #picture div has a background image, and if you press any of the buttons, that picture is replaced with something else.
So what I can't figure out is how the buttons would change what they do after pressing a button. Let's say you click on Button 1 and the background image is replaced. I want the buttons to recognize what background image is in that div and change functions accordingly, in my case, I want them to change what pictures they replace the current one with.
If the current background of #picture is X, you have ABC choices, if the background of #picture is Y, you have DEF choices, would be a TLDR explanation maybe.
<div id="adventure">
<div class="picture">
</div>
<div id="choice">
<button class="button1">Val 1</button>
<button class="button2">Val 2</button>
<button class="button3">Val 3</button>
</div>
</div>
$('.button1').click(function() {
$('.picture').css('background-image',
'url("image1")'
);
});
$('.button2').click(function() {
$('.picture').css('background-image',
'url("image2")'
);
});
$('.button3').click(function() {
$('.picture').css('background-image',
'url("image3")'
);
});
I've probably gone about doing this in a bad way but I'm really at a loss on how I would do this. I can only think up of one way of doing it and that is to have a bunch of if statements depending on what background is in the #picture div but I don't know how to implement that.

This demo relies on the class .active which determines which set of buttons (called .group) are visible, whilst the other .groups remain absent. The #switch button will toggle through each group.
You must name your images according to the id of the button it belongs to.
Example:
HTML of Button
<button id="image_of_sky.png">D</button>
URL to Image
http://domain.com/path/to/image_of_sky.png
jQuery img variable
var img = "http://domain.com/path/to/"+btn;
Snippet
$('.button').click(function() {
var btn = $(this).attr('id');
var img = "https://placehold.it/330x150?text=" + btn;
$('.picture').css('background-image',
'url(' + img + ')'
);
});
$('#switch').click(function() {
var act = $('.group.active');
var next = act.next();
act.removeClass('active');
next.addClass('active');
if (act.attr('id') == "choiceGHI") {
$('#choiceABC').addClass('active');
}
});
#adventure {
width: 395px;
}
.picture {
width: 330px;
height: 150px;
border: 1px outset grey;
}
.group {
width: 330px;
display: none;
padding: 0;
}
.button {
width: 32.5%;
margin: 0;
}
.active {
display: block;
}
#switch {
float: right;
margin: -20px 0 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="adventure">
<div class="picture"></div>
<div id="choiceABC" class="group active">
<button id="Image1" class="button">A</button>
<button id="Image2" class="button">B</button>
<button id="Image3" class="button">C</button>
</div>
<div id="choiceDEF" class="group">
<button id="Image4" class="button">D</button>
<button id="Image5" class="button">E</button>
<button id="Image6" class="button">F</button>
</div>
<div id="choiceGHI" class="group">
<button id="Image7" class="button">G</button>
<button id="Image8" class="button">H</button>
<button id="Image9" class="button">I</button>
</div>
<button id="switch">Switch</button>
</div>

Changing button onclick to load an animation

I'm looking to add a gif loading onclick or to delete "changing text on click" with an animation with the same button characteristics and a gif overlayed (eg. Searchbox from airbnb.com) How can i do it?
Thank you!
<input onclick="change()" type="submit" class="submit-form" value="Log in" id="myButton1">
<script type="text/javascript">
function change()
document.getElementById("myButton1").value = "Logging in...";
}
</script>

try with this below code which is having loading image and text as well.
$('#myButton1').click(function(){
$('#myButton1').hide();
$('.load').addClass('loading');
setTimeout(function () {
$('.load').removeClass('loading');
$('#myButton1').show();
}, 2000);
});
.loading{
background-image : url('http://www.fotos-lienzo.es/media/aw_searchautocomplete/default/loading.gif');
background-repeat:no-repeat;
}
.loading:after {
content: "Logging in...";
text-align : right;
padding-left : 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="submit" class="submit-form" value="Log in" id="myButton1">
<div class="load"></div>

<script type="text/javascript">
function change() {
document.getElementById("myButton1").style.background='#000000';
}
</script>

As I can see from your question tags you using JQuery
function change()
$("#myButton1").css({
background-image:url('PATH/TO/LOADING/IMAGE.gif')
});
}
and after finish loading you can create a function to stop loading
function stopLoading()
$("#myButton1").css({
background-image:'none'
});
}

Sorry for the image, it's background is not transparent. I just hope atleast it will give you an idea.
https://jsfiddle.net/3pmpqpwj/
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<img src='http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif' id='overlay' style="display:none;" />
<button id="searchbtn" class="btn btn-default" type="button" onclick="change(); alert('test');">Log In</button>
CSS
#overlay{
position: absolute;
width: 30px;
height: 30px;
top: 2px;
z-index: 3;
left: 32px;
}
JS
$('#searchbtn').click(function(){
$(this).html("Logging in...").prop('disabled',true);
$("#overlay").show();
});

Hide Previous div and toggle next div on click a button?

I have a number of buttons in my html. Each button referring to a particular DIV. I want an easy way to hide the previously open DIV when another button is clicked. So far I have written a code in jquery, but I have a strange feeling that am putting in a lot of code into a simply achievable task. Is there a simpler way to do this than what I have tried to accomplish?
Here is what I have done so far.
My HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TODO supply a title</title>
<meta name="viewport" content="width=device-width"/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
</head>
<body>
<div id="body">
<input type="button" name="division1" value="div1" class="buttons" id="button1"/>
<input type="button" name="division2" value="div2" class="buttons" id="button2"/>
<input type="button" name="division3" value="div3" class="buttons" id="button3"/>
<input type="button" name="division4" value="div4" class="buttons" id="button4"/>
<input type="button" name="division5" value="div5" class="buttons" id="button5"/>
<input type="button" name="division6" value="div6" class="buttons" id="button6"/>
<div id="div1" class="divs"></div>
<div id="div2" class="divs"></div>
<div id="div3" class="divs"></div>
<div id="div4" class="divs"></div>
<div id="div5" class="divs"></div>
<div id="div6" class="divs"></div>
</div>
</body>
</html>
My CSS:
#body{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
}
.buttons{
width: 10%;
height: 5%;
position: relative;
left: 10%;
cursor: pointer;
z-index: 500;
}
.divs{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}
#div1{
background-color: #377D9F;
}
#div2{
background-color: #02B0E6;
}
#div3{
background-color: #4b9500;
}
#div4{
background-color: #aaa;
}
#div5{
background-color:#aa0000;
}
#div6{
background-color: aquamarine;
}
My Jquery:
$(document).ready(function () {
$("#button1").click(function () {
$('#div1').toggle(100);
$("#div2,#div3,#div4,#div5,#div6").hide();
});
$("#button2").click(function () {
$("#div2").toggle(100);
$("#div1,#div3,#div4,#div5,#div6").hide();
});
$("#button3").click(function () {
$("#div3").toggle(100);
$("#div1,#div2,#div4,#div5,#div6").hide();
});
$("#button4").click(function () {
$("#div4").toggle(100);
$("#div1,#div2,#div3,#div5,#div6").hide();
});
$("#button5").click(function () {
$("#div5").toggle(100);
$("#div1,#div2,#div3,#div4,#div6").hide();
});
$("#button6").click(function () {
$("#div6").toggle(100);
$("#div1,#div2,#div3,#div4,#div5").hide();
});
});
I kind of have around 50 DIV's in my html like the above ones. And I think using the above JQUERY is a waste of coding lines. I know there will be a better way to do this. My code seems to work well, but is there any way in jquery to just hide the previous DIV, no matter which button user clicks?

$(document).ready(function(){
$(".buttons").click(function () {
var divname= this.value;
$("#"+divname).slideToggle().siblings('.divs').hide("slow");
});
});

Going with this sentence I kind of have around 50 DIV's in my html like the above ones
This would be a lot more clean as well as convenient if you use a select tag, instead of using button to show and hide each div
Demo
HTML
<select id="show_divs">
<option>Select to show a div</option>
<option value="1">Show 1</option>
<option value="2">Show 1</option>
</select>
<div class="parent">
<div id="show1">This is the first div</div>
<div id="show2">This is the second div</div>
</div>
jQuery
$('#show_divs').change(function() { //onChange execute the function
var showDiv = $(this).val(); //Store the value in the variable
$('div.parent > div').hide(); //Hide all the div nested inside .parent
$('#show' + showDiv ).show(); //Fetch the value of option tag, concatenate it with the id and show the relevant div
});
CSS
div.parent > div {
display: none; /* Hide initially */
}
If you want to avoid using id's, you can also create your custom attribute, like data-show="1" and data-show="2" so on...

Try this
$(document).ready(function() {
$(".divs").hide();
$(".buttons").click(function() {
$(".divs").hide().eq($(this).index()).show();
});
});
DEMO

<input type="button" value="div1" class="buttons" id="button1" />
<input type="button" value="div2" class="buttons" id="button2" />
<input type="button" value="div3" class="buttons" id="button3" />
<input type="button" value="div4" class="buttons" id="button4" />
<input type="button" value="div5" class="buttons" id="button5" />
<input type="button" value="div6" class="buttons" id="button6" />
<div id="div1" class="divs">div1</div>
<div id="div2" class="divs">div2</div>
<div id="div3" class="divs">div3</div>
<div id="div4" class="divs">div4</div>
<div id="div5" class="divs">div5</div>
<div id="div6" class="divs">div6</div>
<script language="javascript">
$(document).ready(function () {
$(".buttons").click(function () {
$('.divs').hide();
$('#div'+$(this).attr('id').replace('button','')).toggle(100);
})
})
</script>

jQuery - Simple Image Rotator

On fiddle I found a simple rotator and trying to make it work in my death-simple HTML page.
The page example is here:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
img { max-height: 100px }
.rotator img { max-height: 200px; border: dashed 5px pink; }​
</style>
<script>
$(document).ready(function() {
alert('aaa');
var $rotator = $(".rotator");
$rotator.find("img:gt(0)").hide();
setTimeout(Rotate, 1000);
function Rotate() {
var $current = $rotator.find("img:visible");
var $next = $current.next();
if ($next.length == 0) $next = $rotator.find("img:eq(0)");
$current.hide();
$next.show();
setTimeout(Rotate, 5000);
}​
});
</script>
</head>
<body>
<img src="http://2.bp.blogspot.com/-XI9yzJrwLac/TkLKLZF_kDI/AAAAAAAACFE/PxPDRzwa4tQ/s1600/cute+cats+pictures+3.jpg"/>
<img src="http://2.bp.blogspot.com/-NOD8B0m7MEE/TrvJAVAPYWI/AAAAAAAAAuE/KoffoIdQfNk/s640/cute-kittens-in-cups-pics.jpg"/>
<img src="http://1.bp.blogspot.com/_cWcuJM9QIG4/S7rOVzM1YcI/AAAAAAAAAgQ/RJx5oR55Ekk/s640/Animal+wallpapers%252Bcat+wallpapers%252Bmobile+wallpapers%252Bpc+wallpapers%252Bmobile+themes%252Bpc+themes+15cc.jpg"/>
<div class="rotator">
<a href="http://google.com">
<img src="http://2.bp.blogspot.com/-XI9yzJrwLac/TkLKLZF_kDI/AAAAAAAACFE/PxPDRzwa4tQ/s1600/cute+cats+pictures+3.jpg"/>
</a>
<a href="http://google.com">
<img src="http://2.bp.blogspot.com/-NOD8B0m7MEE/TrvJAVAPYWI/AAAAAAAAAuE/KoffoIdQfNk/s640/cute-kittens-in-cups-pics.jpg"/>
<a>
<a href="http://google.com">
<img src="http://1.bp.blogspot.com/_cWcuJM9QIG4/S7rOVzM1YcI/AAAAAAAAAgQ/RJx5oR55Ekk/s640/Animal+wallpapers%252Bcat+wallpapers%252Bmobile+wallpapers%252Bpc+wallpapers%252Bmobile+themes%252Bpc+themes+15cc.jpg"/></a>
</div>
<label />​
</body>
</html>
The simple script should regularly switch images, but instead of that are just displayed all 3 images. And the alert message is not displayed.
I've tried to debug the code and when I remove the function Rotate(), an alert message appears on the page.
Why the function Rotate() is not working?

$.next() gets the immediate element in the set. Your set only contains visible images - i.e. only one. How could there be a next element?
Working fiddle: http://jsfiddle.net/gjzd7/
All I have done is changed the $.next() call into an $.index() request and modulo-ed it by the number of images (so you'll never get a non-existent image). Let me know if you need anything else modified to it or any explanations!

You could also cache the images in a jQuery array and iterate over them like below.
var imgs = $(".slides"); // images to be rotated
var current = 0;
function rotate( ) {
// set current to next image
current = current >= imgs.length ? 0 : current + 1;
$(".rotator").prop("src", $(imgs.get(current)).prop("src") );
setTimeout( rotate, 5000 );
}
rotate();
Example here

Use this simple script to rotate image using buttons
function rotateImage(degree) {
$('#demo-image').animate({ transform: degree }, {
step: function(now,fx) {
$(this).css({
'-webkit-transform':'rotate('+now+'deg)',
'-moz-transform':'rotate('+now+'deg)',
'transform':'rotate('+now+'deg)'
});
}
});
}
<style>
#demo-image{padding:35px 15px;}
.btnRotate {padding: 15px 20px;border:1px solid #000; background-color:#999;color: #000;cursor: pointer;}
</style>
<div style="height:600px; width:800px; background-color:#CCC; border:1px solid #000; border-radius:6px; margin-left:auto; margin-right:auto;">
<div style="width:550px; margin-left:auto; margin-right:auto;">
<label>Rotate Image:</label>
<input type="button" class="btnRotate" value="30" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="60" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="90"onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="180" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="-180" onClick="rotateImage(this.value);" />
<input type="button" class="btnRotate" value="360" onClick="rotateImage(this.value);" />
</div>
<div style="width:350px; margin-left:auto; margin-right:auto; margin-top:25px;"><img src="image-rotating-script-using-jquery .jpg" id="demo-image" /></div>
</div>