zoom each image using java script

zoom each image using java script - javascript

i have a main div under which i have three different div, each sub div contain image and text. i want to zoom image of that particular sub div to scale(1.1) whenever i hover on a that sub div. for now when i hover on any sub div all the three images of all sub div are scaled.
html for my code is
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="...">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="...">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="...">
<p>abz</p>
</div>
</div>
and jquery is
$(".sub-div").each(function(){
$(this).hover(function(){
$('.img').css('transform','scale(1.1)');
},function(){
$('.img').css('transform','scale(1.0)');
});
});

If you absolutely have to use Javascript, use the selector this :
$(".sub-div").hover(function(){
$('.img',this).css('transform','scale(1.1)');
},function(){
$('.img',this).css('transform','scale(1.0)');
});
But you can do the same with CSS :
.sub-div:hover .img{
transform: scale(1.1);
}
Working JSFiddle here : https://jsfiddle.net/26zdf038/

Why jquery? .simply do with css :hover
.sub-div img{
transition:all 0.2s ease-in;
transform:scale(1.0);
width:100px;
height:100px;
}
.sub-div:hover img{
transform:scale(1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>abz</p>
</div>
</div>

Try this It will help you,
div:hover .picture{
transform: scale(1.1);
}
<div>
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>
<div >
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>
<div>
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>

You don't need to loop with each. Just assign a hover event for .sub-div
Use $(this) to refer to the current object you interact with and find img inside of it.
$(".sub-div").hover(function(){
$(this).find('.img').css('transform','scale(1.1)');
},function(){
$(this).find('.img').css('transform','scale(1.0)');
});
.sub-div {
float: left;
width: 33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>abz</p>
</div>
</div>

The problem is your selector for the image selects all the images, while you have to select only the child one:
$(".sub-div").each(function() {
$(this).hover(function() {
$(this).find('.img').css('transform', 'scale(1.1)');
}, function() {
$(this).find('.img').css('transform', 'scale(1.0)');
});
});
However in that case I would recommend you to use CSS because of performance:
.sub-div img { transition: 0.3s ease }
.sub-div:hover img { transfrom: scale(1.1) }

Related

Hide and show images on hover

jQuery(document).ready(function(){
jQuery(".artists-main .artists-name1 a ").mouseover(function(){
jQuery(".artists-image .artists-img1").show();
});
jQuery(".artists-main .artists-name1 a ").mouseout(function(){
jQuery(".artists-image .artists-img1").hide();
});
jQuery(".artists-main .artists-name2 a ").mouseover(function(){
jQuery(".artists-image .artists-img2").show();
});
jQuery(".artists-main .artists-name2 a ").mouseout(function(){
jQuery(".artists-image .artists-img2").hide();
});
jQuery(".artists-main .artists-name3 a ").mouseover(function(){
jQuery(".artists-image .artists-img3").show();
});
jQuery(".artists-main .artists-name3 a ").mouseout(function(){
jQuery(".artists-image .artists-img3").hide();
});
jQuery(".artists-main .artists-name4 a ").mouseover(function(){
jQuery(".artists-image .artists-img4").show();
});
jQuery(".artists-main .artists-name4 a ").mouseout(function(){
jQuery(".artists-image .artists-img4").hide();
});
});
.artists-image img{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="artists-main">
<div class="artists-name1">Artist 1</div>
<div class="artists-name2">Artist 2</div>
<div class="artists-name3">Artist 3</div>
</div>
<div class="artists-image">
<img class="artists-img1" src="https://picsum.photos/200/300?random=1">
<img class="artists-img2" src="https://picsum.photos/200/300?random=2">
<img class="artists-img3" src="https://picsum.photos/200/300?random=3">
</div>
Hide and show images on hover. Class artists-main has artists names and class artists-image has images of the artists. It's working fine but my code is lengthy. I have round about 50+ artists and page will be filled by jQuery code. I want to shorten it.

use same class name
$.each($(".artists-main .artists-name a"), function(index, element) {
$(element).mouseover(function() {
$('.artists-image .artists-img:eq(' + index + ')').show();
})
$(element).mouseout(function() {
$('.artists-image .artists-img:eq(' + index + ')').hide();
})
})
.artists-image img{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="artists-main">
<div class="artists-name">Artist 1</div>
<div class="artists-name">Artist 2</div>
<div class="artists-name">Artist 3</div>
</div>
<div class="artists-image">
<img class="artists-img" src="https://picsum.photos/200/300?random=1">
<img class="artists-img" src="https://picsum.photos/200/300?random=2">
<img class="artists-img" src="https://picsum.photos/200/300?random=3">
</div>

You can also use native javascript code:
let images = document.querySelectorAll(".artists-img");
images.forEach(x => x.classList.add("no-display"));
function changeHover(idx) {
images.forEach(x => x.classList.add("no-display"));
document.getElementById("img" + idx).classList.remove("no-display");
}
.no-display {
display: none;
}
<div class="artists-main">
<div class="artists-name"><a onmouseover="changeHover(1)" href="#">Artist 1</a></div>
<div class="artists-name"><a onmouseover="changeHover(2)" href="#">Artist 2</a></div>
<div class="artists-name"><a onmouseover="changeHover(3)" href="#">Artist 3</a></div>
</div>
<div class="artists-image">
<img class="artists-img" id="img1" src="https://i.picsum.photos/id/474/536/354.jpg?hmac=wmJxGqF8CZdMBSMLHMqolt46tKerJulEfjVeecZJHyE">
<img class="artists-img" id="img2" src="https://i.picsum.photos/id/266/536/354.jpg?hmac=sWDqtbQOm-fz6eG3de_B6hdMz4PpEHoxp0qn2v-C9gQ">
<img class="artists-img" id="img3" src="https://i.picsum.photos/id/573/536/354.jpg?hmac=DLmhMwWbQZVtjZxUi5BvgENG7DfyeVxKcBdEKHIQ9k8">
</div>
Fiddle snippet

You can use the index of the element, and control visibility by adding CSS class:
jQuery(document).ready(function(){
jQuery(".artists-main > div").mouseover(function(){
var current_index = $(this).index();
$('.artists-image > div').removeClass('visible-artist');
$('.artists-image > div').eq(current_index).addClass('visible-artist');
});
});
.artists-image > div.visible-artis {
display: none;
}

using index() and avoiding to number your class:
$(".artists-main .artists-name a").on("mouseover mouseout", function(e){
var index = $(this).closest('div').index();
if(e.type == "mouseover"){
$(".artists-image .artists-img").eq(index).show();
}
else{
$(".artists-image .artists-img").eq(index).hide();
}
});
.artists-image img{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="artists-main">
<div class="artists-name">Artist 1</div>
<div class="artists-name">Artist 2</div>
<div class="artists-name">Artist 3</div>
</div>
<div class="artists-image">
<img class="artists-img" src="https://picsum.photos/200/300?random=1">
<img class="artists-img" src="https://picsum.photos/200/300?random=2">
<img class="artists-img" src="https://picsum.photos/200/300?random=3">
</div>

This is a no effort solution. But I really recommand that you settle this up with pure CSS (pseudo-elements).
CSS = Presentation
JS = Behaviour
$(document).ready(function () {
$('.artists-name1').hover(function() {
$('.artists-img1').toggle();
});
$('.artists-name2').hover(function() {
$('.artists-img2').toggle();
});
$('.artists-name3').hover(function() {
$('.artists-img3').toggle();
});
});
.artists-image img{display: none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="artists-main">
<div class="artists-name1">Artist 1</div>
<div class="artists-name2">Artist 2</div>
<div class="artists-name3">Artist 3</div>
</div>
<div class="artists-image">
<img class="artists-img1" src="https://picsum.photos/200/300?random=1">
<img class="artists-img2" src="https://picsum.photos/200/300?random=2">
<img class="artists-img3" src="https://picsum.photos/200/300?random=3">
</div>

The SIMPLEST way to do this would be using purely CSS, you may follow the example given here :
.artists-img1 {
display : none;
}
.artists-name1:hover + .artists-img1 {
display: block
}
<div class="artists-main">
<div class="artists-name1">Artist 1</div>
<div class="artists-name2">Artist 2</div>
<div class="artists-name3">Artist 3</div>
</div>
<div class="artists-image">
<img class="artists-img1" src="https://picsum.photos/200/300?random=1">
<img class="artists-img2" src="https://picsum.photos/200/300?random=2">
<img class="artists-img3" src="https://picsum.photos/200/300?random=3">
Solution reference :
https://www.w3schools.com/howto/howto_css_display_element_hover.asp

.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Display an Element on Hover</h2>
<div class="myDIV">Hover over me.</div>
<div class="hide">
<img src="https://images.unsplash.com/photo-1580820726687-30e7ba70d976?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1500&q=80" id="picture2" width="20%" height="auto" /></div>
</body>
</html>

How to get link from an element and add to all elements of parent element using JavaScript

I have many divs with a class and every div contains diferent elements including a link.
what I want is to get the link and add it to all Elments of parent div such as img, headline etc. (using JavaScript)
Ex:
.myClass{
background-color:red;
display:inline-block;
width:150px;
overflow:hidden;
}
<div class="myClass">
<div></div>
<div></div>
<div><h1>test</h1></div>
<div><img src="https://scx1.b-cdn.net/csz/news/800/2019/2-nature.jpg" alt="">
Link1
</div>
</div>
<div class="myClass">
<div></div>
<div></div>
<div><h1>test</h1></div>
<div><img src="https://scx1.b-cdn.net/csz/news/800/2019/2-nature.jpg" alt="">
Link2
</div>
</div>

This is the fastest
Note I use function where I want to get at this or $(this)
$(function() { // on page load
$(".ecs-event").on("click", function() { // click any ecs-event container
location = $(this).find("a[rel=bookmark]").attr("href"); // find the bookmark
})
});
.myClass {
background-color: red;
display: inline-block;
width: 150px;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ecs-events compact compact-1">
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">6</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/12/01-03-hannover-schulparty-1-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Hannover Schulparty – abgesagt!</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">7</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/10/001-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Eno und Sero el Mero – abgesagt</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
</div>
Plain JS
window.addEventListener("load", () => { // on page load
[...document.querySelectorAll(".ecs-event")].forEach(div => { // find all ecs-event
div.addEventListener("click", function(e) { // add a click handler
location = this.querySelector("a[rel=bookmark]").getAttribute("href"); // find the bookmark
})
})
});
.myClass {
background-color: red;
display: inline-block;
width: 150px;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ecs-events compact compact-1">
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">6</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/12/01-03-hannover-schulparty-1-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Hannover Schulparty – abgesagt!</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">7</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/10/001-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Eno und Sero el Mero – abgesagt</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
</div>

How to remove or hide element using jquery or css

Hi i have some code that needs to be hidden. I have tried the code below, but that not fit on my scenario.
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">Want to hid this div</div>
<div style=""/>Want to hid this div too </div>
</div>
I want to hide the last div but this div doesn't have an id or class. I also can't use the div:first(or :eq(0)').hide() method as there are lot of divs and it's not possible to tell which nth-child this div will be. Is there any method to link with zoomer div and hide it? Thanks

Both examples are with background-color: red just for the example.
You can use the :last-child pseudo-class:
#zoomer div:last-child {
background: red;
}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
Same with jquery:
$(function() {
$('#zoomer div:last-child').css('background', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
update
After the change of the question - this will hide the last 2 divs:
#zoomer div:last-child, #zoomer div:nth-last-child(2) {
background: red;
}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>

You can user here :last-child, :nth-child pseudo-class
#zoomer div:last-child{display:none}
#zoomer2 div:nth-child(4){display:none;}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
<div id="zoomer2" style="margin-top:20px" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>

I want to hide the last div but this div have no id or class
you can use the last-child pseudo class or last method of jquery
$("#zoomer div").last().remove();
or hide
$("#zoomer div").last().hide();
To hide the second last div also using prev
$("#zoomer div").last().prev().hide();

with css you can hide the last 2 div
#zoomer:nth-last-child(-n+2) {
display: none
}

You can use CSS :nth-child() selector or :last-child selector.
Example:
#zoomer div:nth-child(4) {
display: none;
}
<div id="zoomer">
<div class="nice">Which show image</div>
<img src="" id="img" />
<div style="">nice to see it</div>
<div>Want to hid this div</div>
</div>

Use :last-child pseudo class on #zoomer and set in display: none and it works

How Can I Create a Coordinate Grid of Clickable Divs Using HTML, CSS, Javascript and If Useful JQuery?

Link to the code on JFiddle: http://jsfiddle.net/4v2n7wk9/1/
<html>
<head>
<title>A Grid Button Example</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<style>
div{
display:inline-block;
margin-left:-2px;
margin-right:-2px;
margin-top:-4px;
margin-bottom:-4px;
position:relative;
}
.inl{
position:absolute;
display:block;
}
.top{
position:absolute;
z-index:auto;
}
.feature_layer{
position:absolute;
z-index:-2;
}
.unit_layer{
position:absolute;
z-index:-1;
}
.first_column{
position:absolute;
margin-left:0;
}
.second_column{
position:absolute;
margin-left:64px;
}
.third_column{
position:absolute;
margin-left:128px;
}
#first_row{
position:absolute;
margin-top:0;
}
#second_row{
position:absolute;
margin-top:64px;
}
#third_row{
position:absolute;
margin-top:128px;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$("#first_row").on("click",function(){
console.log("First row clicked.");
});
$("#second_row").on("click",function(){
console.log("Second row clicked.");
});
$("#third_row").on("click",function(){
console.log("Third row clicked.");
});
$(".first_column").on("click",function(){
console.log("First column clicked.");
});
$(".second_column").on("click",function(){
console.log("Second column clicked.");
});
$(".third_column").on("click",function(){
console.log("Third column clicked.");
});
});
</script>
Menu Below<br>
<div id="first_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="second_column" id="first_row" > <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="first_row" class="third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="second_row" class="third_column"> <img " src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div id="third_row" class="third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
</body>
</html>
I have been thoroughly stumped. I have a simple example above (not tags, not sure they'd work, they're merely organizational, the CSS is properly loaded from a seperate .css in the actual implementation, and of course is simply inserted sans- into the CSS field on JSFiddle).
Nine divs, arranged in a simple three-by-three pattern, each an image. There are three types of IDs and three types of classes corresponding to rows and columns.
This works as expected for the first column, providing console logs (inspect the result field*) of row and column for the first column. However, only columns are noted for the two columns to the right, as if they didn't have row IDs.
I've been trying to wrap my head around this seemingly simple problem and simply can't. Help! Thanks.
*In Chrome right click on JSFiddle's Result screen (lower-right hand of the four panes) and then click on Inspect Element, along with other information the window will have a console that records console.log() calls.

Here's an updated version of that JSFiddle which uses classes instead of ids for the rows: http://jsfiddle.net/troygizzi/4v2n7wk9/5/
Modified excerpts below.
HTML:
<div class="first_row first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="second_row first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="third_row first_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="first_row second_column" > <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="second_row second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="third_row second_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="first_row third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="second_row third_column"> <img " src="http://i.imgur.com/WZfLsKD.gif"/> </div>
<div class="third_row third_column"> <img src="http://i.imgur.com/WZfLsKD.gif"/> </div>
JavaScript:
$(".first_row").on("click",function(){
console.log("First row clicked.");
});
$(".second_row").on("click",function(){
console.log("Second row clicked.");
});
$(".third_row").on("click",function(){
console.log("Third row clicked.");
});
CSS:
.first_row{
position:absolute;
margin-top:0;
}
.second_row{
position:absolute;
margin-top:64px;
}
.third_row{
position:absolute;
margin-top:128px;
}

jQuery animate img margin-top

I am trying to animate 1 column of boxes aka placeholder.png down with margin-top but it animates all 9 of the boxes down instead of 3 in a column. Here is the code: http://jsfiddle.net/MgL3E/1
$(document).ready(function()
{
$("span").click(function()
{
$("#1").animate(
{
"margin-top": "300px"
}, 1000);
});
});

You should layout columns first, eg
<div>
<div class="column">
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
</div>
<div class="column">
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
</div>
<div class="column">
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
</div>
</div>
And CSS
.column {
float:left;
width: 98px;
}
http://jsfiddle.net/MgL3E/2/

Two errors:
registering on span click, but theres no span element in your fiddle
ids cannot start with a digit
This js runs fine for me, when changing id="1" to id="t1". Testwise its registered on all img tags.. Replace it with whatever should cause the animation to spin in.
$(document).ready(function() {
$("img").click(function() {
$("#t1").animate({
"margin-top": "300px"
}, 1000);
});
});

Develop Reference

JavaScript is the programming language of the Web.

zoom each image using java script - javascript

Related

Hide and show images on hover

How to get link from an element and add to all elements of parent element using JavaScript

How to remove or hide element using jquery or css

How Can I Create a Coordinate Grid of Clickable Divs Using HTML, CSS, Javascript and If Useful JQuery?

jQuery animate img margin-top

Categories

Resources