Develop Reference

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 a value of inner element when clicked on li using JQuery

This is my li element. I want to get only the value of class 'preview' when clicking on the li element using jquery.
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
Output should be: john#gmail.com
I tried below code:
$('li.contact').on("click", function(e) {
e.preventDefault();
var data = $('.preview').val($(this).text());
})
Am getting the entire li items click event list as output.
Please help on this. Thanks.

You'd want to attach the click event handler to each list node, then a few ways could find the child nodes text value, one approach would be using the event.target to get access to the clicked list node, or my approach would be iterating over the list node collection as the following example illustrates.
const theLinkContains = email => document.querySelector('h2 span').textContent = email;
(() =>
{
document.querySelectorAll('li.contact')
.forEach(link =>
{
link.addEventListener('click', () =>
{
theLinkContains(link.querySelector('.preview').textContent);
});
});
})();
ul {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
}
li {
position: relative;
display: block;
padding-left: 5px;
margin-bottom: -1px;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, .125);
}
.preview {
display: none;
}
<h2>Result: <span></span></h2>
<ul>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">Bob</p>
<p class="preview">Bob#gmail.com</p>
</div>
</div>
</li>
</ul>

The issue in your code is using .val() which is wrong to have it here, what you need is to select the <li> tag and then perform .find() to get the child .preview and then get its text using .text()
This is what you should have in your code:
$('li.contact').on("click", function(e) {
e.preventDefault();
var data = $(this).find('.preview').text();
console.log(data);
})
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>

Javascript: Image error handling & nesting

I want an error handling script. If the image is not found, delete(or invisible) the failed loaded tag. I would appreciate any help!
HTML DOM:
<div class="swiper-slide" data-index="2" style="width: 145px; margin-right: 10px;">
<div class="swiper-slide-inside ">
<div class="align-vertical">
<img src="images/product_images/gallery_images/0690-05-bx_3.jpg" alt="Mobile" data-magnifier-src="images/product_images/popup_images/0690-05-bx_3.jpg">
</div>
</div>
</div>
JS:
document.querySelectorAll(".swiper-slide .img-responsive")[0].addEventListener("error", myFunction);
function myFunction() {
console.log('Image not found.');
document.querySelectorAll('.swiper-slide')[0].style.visbility = "hidden";
}

There are a couple of issues
img tag doesn't have the class you are using in your selector
you are trying to hide first swiper-slide, rather than parent swiper-slide
Demo
document.querySelectorAll(".swiper-slide img")[0].addEventListener("error", myFunction);
function myFunction(event) {
console.log('Image not found.');
//use document.querySelector('.swiper-slide').style.display = "none" if there is only one such element and discard below line
event.target.parentNode.parentNode.parentNode.style.display = "none";
}
<div class="swiper-slide" data-index="2" style="width: 145px; margin-right: 10px;">
<div class="swiper-slide-inside ">
<div class="align-vertical">
<img src="images/product_images/gallery_images/0690-05-bx_3.jpg" alt="Mobile" data-magnifier-src="images/product_images/popup_images/0690-05-bx_3.jpg">
</div>
</div>
</div>

zoom each image using java script

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) }

jQuery left and right button scroll

I've been trying to figure this out for a couple days now and can't seem to make any headway. I am trying to do a simple left and right scroll using images as the scrollers but I can't seem to get it to work. Here is my code: http://jsfiddle.net/7GrTM/1/
HTML
<div class="outerwrapper">
<div class="innerwrapper">
<div class="productsbox">
<img class="box_image" src="images/productsbox1.png" style="width:222px" alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox2.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox3.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox4.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox5.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox6.png" style='width:221px' alt="this"/>
</div>
</div>
</div>
<div class="productspace">
<img src="images/arrowleft.png" id="#left" alt="left"/>
<img src="images/arrowright.png" id="#right" style="padding-left: 10px;" alt="right"/>
</div>
JS
$(function () {
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$("#outerwrapper").stop().animate({ scrollLeft: dir + '422' }, 1000);
});
});
CSS
.spacer {
width: 20px;
height: 319px;
display: inline-block;
}
.outerwrapper {
margin: 0px auto;
width: 1050px;
height: 323px;
display: inline-block;
overflow: hidden;
}
.innerwrapper {
width: 1600px;
height: 322px;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
Any help will be appreciative.

Your IDs are wrong, you have named them #left and #right, not simply left and right. In your JSfiddle you have managed to set this as the id: #left1 and #right1.
Solution: Change the ID's to say left and right, so you will have:
<div class="productspace">
<img src="images/arrowleft.png" id="left" alt="left"/>
<img src="images/arrowright.png" id="right" style="padding-left: 10px;" alt="right"/>
</div>
You are also trying to access your div with class outerwrapper as a id, not as a class. Either change outerwrapper to be an ID so <div id="outerwrapper"> or change the jquery to look for the class: $(".outerwrapper") (the prior solution is in my mind superior, so change div id).