change image on hover for each image in a gallery? - javascript

I have a page full of images something like this, more or less:
<div class="category">
<ul class="grid">
<li class="item first">
<span><img src="/pic1-1.jpg" data-hover="/pic1-2.jpg" width="243" height="243" /></span>
<h2 class="product-name">PIC1</h2>
</li>
<li class="item">
<span><img src="/pic1.jpg" width="243" height="243" /></span>
<h2 class="product-name">PIC2</h2>
</li>
<li class="item last">
<span><img src="/pic3-1.jpg" data-hover="/pic3-2.jpg"width="243" height="243" /></span>
<h2 class="product-name">PIC3</h2>
</li>
</ul>
For each item in the list, I'd like to have a second image that only shows on mouse hover if another image has been provided for that list item in the html.
How might I do this in the html and the corresponding javascript?

You can try this:
$(function () {
$('img').each(function () {
$(this).data('original', this.src)
}).mouseenter(function () {
$(this)
.attr('src', $(this).data('hover'))
.animate({
marginTop: 0,
marginRight: 0,
marginLeft: 0,
borderWidth: 10
}, 'fast')
}).mouseleave(function () {
$(this)
.attr('src', $(this).data('original'))
.animate({
marginTop: 20,
marginRight: 10,
marginLeft: 10,
borderWidth: 0
}, 'fast')
})
})
working fiddle

With javascript arrays you can make like this
<script>
var a=0;
function show_next()
{
var imgg = new Array();
imgg[0] = "pic1.jpg";
imgg[1] = "pic2.jpg";
imgg[2] = "pic3.jpg";
if (a>imgg.length-1)
{
a=0;
}
document.getElementById("image").src=imgg[a];
document.getElementById("show").title=imgg[a];
document.getElementById("show").href=imgg[a];
document.getElementById("show_2").href=imgg[a];
document.getElementById("name_image").innerHTML=imgg[a];
a=a+1;
}
</script>
<div class="category">
<ul class="grid">
<li class="item first">
<span><img src="" width="243" height="243" id="image" / ></span>
<h2 class="product-name" ><span id="name_image">PIC1</span></h2>
</li>
</ul>

$(".image").on('hover', function(event) {
$(this).attr('src',$(this).next().data('src'));
}
The code above will execute each time you hover one of the images of the page and then fetchs the data attribute form the next element of that image:
<image class="image" src="yourock.jpg">
<span style="display:none" data-src="yousuck.jpg"></span>

With plain javascript it would be something like:
In head section add this:
<script language="javascript" type="text/javascript">
function swapimg(img)
{
/* If second image is not provided stop execution */
if(img.getAttribute('data-hover') == '') return;
var currentSRC = img.src;
img.src = img.getAttribute('data-hover');
img.setAttribute('data-hover', currentSRC);
}
</script>
Then in your code add onmouseover and onmouseout
<div class="category">
<ul class="grid">
<li class="item first">
<span><img src="/pic1-1.jpg" data-hover="/pic1-2.jpg" onmouseover="swapimg(this);" onmouseout="swapimg(this);" width="243" height="243" /></span>
<h2 class="product-name">PIC1</h2>
</li>
<li class="item">
<span><img src="/pic1.jpg" width="243" height="243" onmouseover="swapimg(this);" onmouseout="swapimg(this);" /></span>
<h2 class="product-name">PIC2</h2>
</li>
<li class="item last">
<span><img src="/pic3-1.jpg" data-hover="/pic3-2.jpg"width="243" height="243" onmouseover="swapimg(this);" onmouseout="swapimg(this);" /></span>
<h2 class="product-name">PIC3</h2>
</li>
</ul>
</div>

Related

Bi-directional highlighting of elements with same class

I have 2 lists of items. One is an ordinary <ul> and the other is a grid of images wrapped in <div>s.
I am looking to highlight the item hovered on both lists that will work in both directions.
So if I hover over <li>Apple, both the <li>Apple & <div>Apple get highlighted. And this should also work in the other direction, if I hover over the <div>Apple, both the <div>Apple and <li>Apple is highlighted.
Notes:
I am able to add the unique class name to any element. Either the <li> & <div> or the <a> within.
Highlighting can be either as an .active class or inline styling.
Similar to the below question but works in both directions:
Jquery 'Highlight' element with the same class
<ul>
<li class="app-hover-select">
<a class="item-1" href="">Apples</a>
</li>
<li class="app-hover-select">
<a class="item-2" href="">Pears</a>
</li>
<li class="app-hover-select">
<a class="item-3" href="">Bananas</a>
</li>
<li class="app-hover-select">
<a class="item-4" href="">Pineapples</a>
</li>
</ul>
<div class="wrapper">
<div class="app-hover-select">
<a class="item-1" href="">
<img scr="">
Apples
</a>
</div>
<div class="app-hover-select">
<a class="item-2" href="">
<img scr="">
Pears
</a>
</div>
<div class="app-hover-select">
<a class="item-3" href="">
<img scr="">
Bananas
</a>
</div>
<div class="app-hover-select">
<a class="item-4" href="">
<img scr="">
Pineapples
</a>
</div>
</div>
My current jQuery with current HTML:
jQuery('.app-hover-select > a').hover(function() {
var appClass = jQuery(this).attr("class");
jQuery(appClass).toggleClass('active');
});
My logic is:
On hover of .app-hover-select > a
var appClass = Get the class
Add class active to all elements with the class appClass
In case you want this:
Try this-
jQuery(".app-hover-select > a").hover(function () {
const listOfItems = this.parentElement.parentElement;
const listItem = this.parentElement;
const i = Array.from(listOfItems.children).indexOf(listItem);
jQuery("ul .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
jQuery(".wrapper .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
});

How to minimize function repetition using element data-attribute?

My jQuery code is working but I want to minimal it by data attribute. Please see below my HTML and jQuery code.
The functions below are repeated upto four times and I want to minimize/reduce this repetition. Thanks in advance.
$('.nav-menu-list ul li:nth-child(1)').hover(function() {
$('#item-01').fadeIn();
}, function() {
$('#item-01').fadeOut();
});
$('.nav-menu-list ul li:nth-child(2)').hover(function() {
$('#item-02').fadeIn();
}, function() {
$('#item-02').fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="nav-menu-list">
<ul>
<li data-id="item-01"><h2>home</h2></li>
<li data-id="item-02"><h2>about us</h2></li>
<li data-id="item-03"><h2>category</h2></li>
<li data-id="item-04"><h2>news room</h2></li>
<li data-id="item-05"><h2>blog</h2></li>
<li data-id="item-06"><h2>contact us</h2></li>
</ul>
</span>
<span class="nav-menu-list-details">
<div id="item-01"><img src="images/home-preview.png" alt="" /></div>
<div id="item-02"><img src="images/home-preview.png" alt="" /></div>
<div id="item-03"><img src="images/home-preview.png" alt="" /></div>
<div id="item-04"><img src="images/home-preview.png" alt="" /></div>
<div id="item-05"><img src="images/home-preview.png" alt="" /></div>
<div id="item-06"><img src="images/home-preview.png" alt="" /></div>
</span>
You can use only a single function to control all of them.
But, for this, in the jQuery selector you must use $('.nav-menu-list ul li').
With this selector, hover() context will be the li itself, then, just get the data-id of the current hovered li and then use it to select the div you want to target.
See below, I suggest to use full page ("Expand Snippet") mode on the snippet to better visualization:
$('.nav-menu-list ul li').hover(function() {
let id = "#" + $(this).data("id")
$(id).fadeIn();
}, function() {
let id = "#" + $(this).data("id")
$(id).fadeOut();
});
.nav-menu-list-details div{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="nav-menu-list">
<ul>
<li data-id="item-01"><h2>home</h2></li>
<li data-id="item-02"><h2>about us</h2></li>
<li data-id="item-03"><h2>category</h2></li>
<li data-id="item-04"><h2>news room</h2></li>
<li data-id="item-05"><h2>blog</h2></li>
<li data-id="item-06"><h2>contact us</h2></li>
</ul>
</span>
<span class="nav-menu-list-details">
<div id="item-01"><img src="images/home-preview.png" alt="" />ITEM_1</div>
<div id="item-02"><img src="images/home-preview.png" alt="" />ITEM_2</div>
<div id="item-03"><img src="images/home-preview.png" alt="" />ITEM_3</div>
<div id="item-04"><img src="images/home-preview.png" alt="" />ITEM_4</div>
<div id="item-05"><img src="images/home-preview.png" alt="" />ITEM_5</div>
<div id="item-06"><img src="images/home-preview.png" alt="" />ITEM_6</div>
</span>
You should consider that the event target is the single object, even if the target includes a multitude of items:
$('.nav-menu-list ul li').hover(function() {
var id = $(this).data().id;
$("#"+id).fadeIn();
}, function(){
var id = $(this).data().id;
$('#'+id).fadeOut();
});

Loop through list and create a <li> elements

I have a <ul> list in html as follows:
<ul data-role="listview" data-filter="true" data-input="#element">
<li><a href="">
<div class="item">
<h3>getting up</h3>
<div>
<h6>from bed</h6>
<h6>09:00</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>brushing</h3>
<div>
<h6>with brush</h6>
<h6>09:30</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>COFFEE </h3>
<div>
<h6>nescafe</h6>
<h6>10:30</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>office</h3>
<div>
<h6>work</h6>
<h6>4hours</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>LUNCH</h3>
<div>
<h6>canteen</h6>
<h6>1hour</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>office</h3>
<div>
<h6>work</h6>
<h6>4hours</h6>
</div>
</div>
</a></li>
<li><a href="">
<div class="item">
<h3>dinner</h3>
<div>
<h6>home</h6>
<h6>11hours</h6>
</div>
</div>
</a></li>
</ul>
I want to do the following:
Create <ul> element, the append to <li> section
Loop through the list, and append created <li> to <ul> element?
(creating array and converting to string is good choice but unable to implement)
Can anyone help me through this?
Try something like this:
Add id "list-test" to the list:
<ul id="list-test" data-role="listview" data-filter="true" data-input="#element">
Add a button to test:
<button id="anchor-test" href="#">Add Element</button>
And try this script (with comments) to start off with:
$("#anchor-test").on("click", function (event) {
event.preventDefault();
// Create li element, with class
var liTag = $("<li>", { "class": "test-class" });
// Create anchor element, with blank href
var aTag = $("<a>", { "href": "" });
// Create div element, with class "item"
var itemTag = $("<div>", { "class": "item" });
// Define some text
var txt_one = "rest test";
var txt_two = "play test";
// Insert html, including defined text, into div element
itemTag.html("<h3>office test</h3><div><h6>" + txt_one + "</h6><h6>" + txt_two + "</h6></div>");
// Add div (with html) to anchor, and anchor to li element
liTag.append(aTag.append(itemTag));
// Add whole li element to the list
$("#list-test").append(liTag);
});
Clicking the button will add the defined li element. Hope it helps.
i tried this things
var sessionsList = "<div>emptylist</div>";
var myElement = document.getElementById("#mysessioname");
var view = $(sessionsList );
view.empty();
$(noSessionsCachedMsg).appendTo(view);
var sessionsListSelector = $("#myElement").append('<ul data-role="listview" data-filter="true" data-input="#element"></ul>').find('ul');
for (var i = 0; i < 10; i++)
{
// enter code here
sessionsListSelector.append('<li>something</li>');
}

Slide show add and remove class for change image and button image not work

I want make slide show.
its my code:
java script =>
setInterval(function () {
var activeLi = document.querySelector('li.current');
activeLi.classList.remove('current');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('current');
} else {
activeLi.parentElement.firstElementChild.classList.add('current')
}
var activeIMG = document.querySelector('.active_slider');
activeIMG.classList.remove('active_slider');
if (activeIMG.nextElementSibling ) {
activeIMG.nextElementSibling .classList.add('active_slider');
} else {
activeIMG.parentElement.firstElementChild.classList.add('active_slider')
}
}, 5000);
.active_slider{
display: inline;
}
.current{
color: red;
}
<div id="slider" class="dk-box mrg-bottom">
<div id="dk-slider-div" class="slides center">
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem active_slider">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<footer>
<ul class="tabs">
<li class="tabItem current">
<a>
Slide 1
</a>
</li>
<li class="tabItem">
<a>
Slide 2
</a>
</li>
<li class="tabItem">
<a>
Slide 3
</a>
</li>
</ul>
</footer>
</div>
</div>
buttons was active and changed after 5 sec but image doesn't change
active_slider = active slider
current = active button
how can i make auto change for slider
i want add class for active and remove class for hide
if cant with class i can active with style { display: inline; }
<a class="clickCount active_slider" elementtype="1" data-position="0" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="" data-position="1">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="" data-position="2">
<img src="/f15468d9.jpg" class="slideItem">
</a>
var position = 0;
setInterval(function () {
var activeLi = document.querySelector('li.current');
activeLi.classList.remove('current');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('current');
} else {
activeLi.parentElement.firstElementChild.classList.add('current')
}
position++;
if (position == 3){
position = 0;
}
$('.clickCount').each(function(){
if($(this).attr("data-position") == position){
$(this).addClass('active_slider');
}else{
$(this).removeClass('active_slider');
}
}); }, 1000);
I have aded a data-position attribute for the loop
I think you shout put the active class to the "a" wrapping the img.
setInterval(function () {
ChangePos(true);
}, 6000);
position = 0;
function ChangePos(Next){
var activeLi = document.querySelector('li.current');
activeLi.classList.remove('current');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('current');
} else {
activeLi.parentElement.firstElementChild.classList.add('current')
}
changePosData(Next);
$('.clickCount').each(function(){
if($(this).attr("data-position") == position){
$(this).addClass('active_slider');
}else{
$(this).removeClass('active_slider');
}
});
function changePosData(Next){
if(Next == true){
console.log('forrward');
position++;
if (position == 3){
position = 0;
}
}else{
console.log('back');
if (position == 0){
position = 3;
}
position--;
}
}
}
$('.btnC2').on('click', function(){
ChangePos(true); // for the next BTN
});
$('.btnC').on('click', function(){
ChangePos(false); // for the prev BTN
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="slider" class="dk-box mrg-bottom">
<div id="dk-slider-div" class="slides center">
<!-- <section> -->
<a class="clickCount active_slider" elementtype="1" data-position="0" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="" data-position="1">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="" data-position="2">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<!-- </section> -->
<button type="button" class="btnC" name="button"> ASD</button>
<button type="button" class="btnC2" name="button"> ASD</button>
<footer>
<ul class="tabs">
<li class="tabItem current">
<a>
Slide 1
</a>
</li>
<li class="tabItem">
<a>
Slide 2
</a>
</li>
<li class="tabItem">
<a>
Slide 3
</a>
</li>
</ul>
</footer>
</div>
</div>

Slide show add and remove class for change image and button

I want make slide show.
its my code:
java script =>
setInterval(function () {
var activeLi = document.querySelector('li.current');
activeLi.classList.remove('current');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('current');
} else {
activeLi.parentElement.firstElementChild.classList.add('current')
}
var activeIMG = document.querySelector('.active_slider');
activeIMG.classList.remove('active_slider');
if (activeIMG.nextElementSibling ) {
activeIMG.nextElementSibling .classList.add('active_slider');
} else {
activeIMG.parentElement.firstElementChild.classList.add('active_slider')
}
}, 5000);
.active_slider{
display: inline;
}
.current{
color: red;
}
<div id="slider" class="dk-box mrg-bottom">
<div id="dk-slider-div" class="slides center">
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem active_slider">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<a class="clickCount" elementtype="1" categorytitle="">
<img src="/f15468d9.jpg" class="slideItem">
</a>
<footer>
<ul class="tabs">
<li class="tabItem current">
<a>
Slide 1
</a>
</li>
<li class="tabItem">
<a>
Slide 2
</a>
</li>
<li class="tabItem">
<a>
Slide 3
</a>
</li>
</ul>
</footer>
</div>
</div>
buttons was active and changed after 5 sec but image doesn't change
active_slider = active slider
current = active button
how can i make auto change for slider
i want add class for active and remove class for hide
if cant with class i can active with style { display: inline; }
Try something like this, it will run every 3 second and set the class active to the next element.
setInterval(function(){
var slider = $(".slider");
var active = slider.find(".active");
var sliderCount = slider.find("li").length;
var index = active.index();
active.removeClass("active");
if (index < sliderCount - 1){
active.next().addClass("active")
} else {
slider.find("li:first").addClass("active")
}
}, 3000);
.active{
color: yellow
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<li class="slide1">
<img src"image.png" alt="1">
</li>
<li class="slide2 active">
<img src"image.png" alt="2">
</li>
<li class="slide3">
<img src"image.png" alt="3">
</li>
</div>
Your html is invalid, there is = missing after class, should be class="slide1 active". To invoke function after some time you can use setInterval() adn to modify classes you can modify classList
property:
var x = 1000;
setInterval(function () {
var activeLi = document.querySelector('li.active');
activeLi.classList.remove('active');
if (activeLi.nextElementSibling ) {
activeLi.nextElementSibling .classList.add('active');
} else {
activeLi.parentElement.firstElementChild.classList.add('active')
}
}, x);
.active {
color:red
}
<div class="slider">
<li class="slide1 active">
<img src"image.png">
</li>
<li class="slide2">
<img src"image.png">
</li>
<li class="slide3">
<img src"image.png">
</li>
</div>
On every interval it removes class active from element and checks if element has sibling element (by checking nextElementSibling existence). Depending on it, active class is attached to either sibling or first element (parentElement.firstElementChild).

Categories

Resources