I'm attempting to swap out an image on hover with a fade in / fade out effect. The jQuery below works well because it lazy loads the hover image.
The first example shows a flash of white as the original image is replaced with the new image as it fades in. The second example shows the desired fade in effect by setting the background but somehow loses the fade out effect.
HTML:
<img class="imageHoverLoad lazy"
data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg"
data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" />
jQuery:
$('.imageHoverLoad').mouseenter(function() {
var elem = $(this);
elem.attr('src', elem.attr('data-hover')).hide().fadeIn(400);
});
$('.imageHoverLoad').mouseleave(function() {
var elem = $(this);
elem.attr('src', elem.attr('data-original')).hide().fadeIn(400);
});
Codepen:
http://codepen.io/anon/pen/KVQavM
You're replacing the src before your transition, so there's no time to fade out. And you need to specify the fadeOut and wait for the animation promise to resolve before continuing:
$(function() {
$("img.lazy").lazyload();
});
$('.imageHoverLoad').mouseenter(function() {
var elem = $(this);
elem.fadeOut(400).promise().done(function() {
elem.attr('src', elem.attr('data-hover')).fadeIn(400);
});
});
$('.imageHoverLoad').mouseleave(function() {
var elem = $(this);
elem.fadeOut(400).promise().done(function() {
elem.attr('src', elem.attr('data-original')).fadeIn(400);
});
});
.swap-image {
width: 300px;
height: 300px;
margin-bottom: 100px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>
<div class="swap-image">
<img class="imageHoverLoad lazy" data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg" data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" />
</div>
<div class="swap-image" style="background: url(http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg) no-repeat;">
<img class="imageHoverLoad lazy" data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg" data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" />
</div>
Related
i have this div containing two images.
<div class="pc" id="pc1">
<img src="available.png" alt="Available">
<img src="unavailable.png" alt="UnAvailable">
</div>
when page will load, one image will show and the other will hide. when click on the image which is shown then the showing image will hide and hidden image will show... same process for the other image click event. images must be overlap just because i dont want any extra space. same space for both images simultaneously....
how to code for this....
Since both your images are children of the same element, you could set an event listener on the parent instead.
const toggleImages = () => {
// get the parent wrapper element
const pc1 = document.getElementById('pc1');
// if #pc1 exists
if (pc1) {
// attach an event click
pc1.addEventListener('click', () => {
pc1.classList.toggle('is-active'); // toggle `is-active` class
});
}
};
toggleImages();
#pc1 {
display: inline-block;
}
/* Hide last image by default */
#pc1:not(.is-active) img:last-child {
display: none;
}
#pc1.is-active img:first-child {
display: none;
}
<div class="pc" id="pc1">
<img src="https://via.placeholder.com/175/000000?text=First+Image" alt="Available">
<img src="https://via.placeholder.com/175/33414D?text=Second+Image" alt="UnAvailable">
</div>
try this:
first of all include jquery in your head tag:
<head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head>
ok now set an class to the first img and a class to the other img and set for the second image the style to display none
<div class="pc" id="pc1">
<img class="img1" src="available.png" alt="Available">
<img class="img2" src="unavailable.png" alt="UnAvailable"
style="display:none">
</div>
now you need to add an script for that:
<script>
$( ".img1" ).click(function() {
$( ".img1" ).hide();
$( ".img2" ).show();
});
$( ".img2" ).click(function() {
$( ".img2" ).hide();
$( ".img1" ).show();
});
</script>
<style>
.pc {
position: relative;
}
.visible, .unvisible {
display: block;
position: absolute;
top: 0;
left: 0;
}
.unvisible {
display: none;
}
</style>
<script>
// add event listener to wait when page is load
document.addEventListener("DOMContentLoaded", () => {
// get instances of both images
const img1 = document.getElementById("img1")
const img2 = document.getElementById("img2")
/**
* this method toggle visibility of image
*/
const toggleImage = (image) => {
image.classList.toggle("unvisible")
}
// hide visible image #1
toggleImage(img1)
// show unvisible image #2
toggleImage(img2)
// Add event listener for user press a mouse key on image #2
img2.addEventListener("mousedown, mouseup", () => {
// hide visible image #1
toggleImage(img1)
// show hidden image #2
toggleImage(img2)
})
});
</script>
<div class="pc" id="pc1">
<img id="img1" src="available.png" alt="Available">
<img id="img2" class="unvisible" src="unavailable.png" alt="UnAvailable">
</div>
so, you can use DOM model to toggle class "unvisible" and hide one image and show other.
Here's the thing, I want some of the pictures in my HTML file to be hidden at first leaving a black at its position. And it's shown after clicking on it. I can put js code in my layout file but to keep the code clean and extremely readable, there shouldn't be div span tags or id or class, just add parameters like 'onclick' in img tags.
Current code:
<script type="text/javascript">
function toggle_visibility() {
if ( this.style.visibility == 'hidden' )
this.style.visibility = 'visible';
else
this.style.visibility = 'hidden';
}
</script>
<img onclick="toggle_visibility();" src="IMG.jpg"/>
Add specific class to each element that needs that functionality. In my example this class is 'image'.
Also you need to have draggable set to false for images, else you can still see the image when dragging.
document.addEventListener('click', function(e) {
if (e.target.classList.contains('image')) {
e.target.style.filter = 'brightness(100%)';
}
});
img.image {
height: 100px;
filter: brightness(0%);
}
<img class="image" src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/ draggable="false">
<img class="image" src="https://dictionary.cambridge.org/images/thumb/chick_noun_002_06563.jpg?version=4.0.44"/ draggable="false">
I have a div act like button that contain an image. I want when I click the div the image inside it will change I put a jquery but my jquery only work in 1 way it can switch to second image but cant switch back to first image.
HTML :
<div class="post-like m-30">
<img class="img-responsive" src="img/like.png" alt="">
<h4 class="bold text-center capital">appreciate this!</h4>
</div>
CSS :
.post-like{
cursor: pointer;
}
.post-like img{
margin: auto;
}
JS :
$(document).ready(function() {
$('.post-like').click(function(){
$(".post-like img").attr('src',"img/like.jpg");
return false;
});
});
Can you teach me why my jquery didnt work?
To toggle between the both src attributes, you could add condition in your click event :
$(document).ready(function() {
$('.post-like').click(function(){
var src = $(".post-like img").attr('src');
if(src=="https://upload.wikimedia.org/wikipedia/commons/2/2f/MRT_Singapore_Destination_1.png")
$(".post-like img").attr('src',"https://upload.wikimedia.org/wikipedia/commons/1/10/MRT_Singapore_Destination_2.png");
else
$(".post-like img").attr('src',"https://upload.wikimedia.org/wikipedia/commons/2/2f/MRT_Singapore_Destination_1.png");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-like m-30">
<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/MRT_Singapore_Destination_1.png" alt="">
<h4 class="bold text-center capital">appreciate this!</h4>
</div><!-- post-like -->
Grab the value of the src attribute and store it in a variable. Use this variable as your reference in an if statement to determine which image to switch to:
$(document).ready(function() {
$('.post-like').click(function(){
var img=$(this).attr('src');
if(img=="img/like.jpg"){
$(".post-like img").attr('src',"img/like.jpg");
return false;
}else{
$(".post-like img").attr('src',"img/otherimage.jpg");
return false;
}
});
});
There was nothing wrong with your code, it changed the source just fine.
In order to create a 'click to toggle'-flow, you need to know both sources, I tend to do this by having two variables (one with the 'special' source and one empty, which is set on first use).
$(function() {
var specialSrc = 'http://lorempixel.com/image_output/nightlife-q-g-160-100-10.jpg',
img = $('.post-like img'),
normalSrc;
$('.post-like').click(function(){
var src = img.attr('src');
if (!normalSrc) {
normalSrc = src;
}
img.attr('src', src === normalSrc ? specialSrc : normalSrc);
return false;
});
});
.post-like{
cursor: pointer;
}
.post-like img{
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post-like m-30">
<img class="img-responsive" src="http://lorempixel.com/image_output/nightlife-q-c-160-100-4.jpg" alt="">
<h4 class="bold text-center capital">appreciate this!</h4>
</div><!-- post-like -->
I've also stored the image in the img variable, so you don't need to look for it every click, and I've replace $(document).ready(function() {..}) with the shorter syntax $(function() {..}) which does the same thing)
make it simpler and do toggle
$(".post-like").click(function() {
$(this).find('img').toggle();
});
TOGGLE
HTML:
<td>
<div class="content" style=""><img src="FoodBlockPic.png" style="max-width: 100%;"></div>
</td>
<td>
<div class="content" style=""><img src="DeliveryBlockPic2.png" style="max-width: 100%;" id="deliveryPIC"></div>
</td>
<td>
<div class="content" style=""><img src="PickupBlockPic2.png" style="max-width: 100%;"></div>
</td>
</tr>
JQuery:
<script>
$(document).ready(function(){
$('#deliveryPIC').hover(function() {
var src = $(this).attr("src").replace("DeliveryBlockPic2.png", "DeliveryBlockPicAlt.png");
$(this).attr("src", src);
// $('#deliveryPIC').fadeIn("slow");
// $('#deliveryPIC').hide();
$('#deliveryPIC').fadeIn();
}, function() {
var src = $(this).attr("src").replace( "DeliveryBlockPicAlt.png", "DeliveryBlockPic2.png");
$(this).attr("src", src).stop();
// $('#deliveryPIC').fadeIn("slow");
// $('#deliveryPIC').hide();
$('#deliveryPIC').fadeIn();
});
});
</script>
I would simply like to animate the transition between the original picture and it's replaced src picture on hover and animate again when off hover. I am having trouble figuring out how to do this b/c just fade in does not work, fade in with hide makes the transition kind of glitchy, and the top fade in statement also does nothing by itself... Would mouseon, mouseoff be best here, and if so, how would I animate that transition? With my current code, the image swap works properly, but I can't seem to figure out the animation/fade-in/fade-out. Thanks for the help!!! :D
If you want to replace the src attribute you need to know that you have to wait until the image will finish the fadeOut animation before you can replace the src ,otherwise, the image just disappear but not with animation.
$('img').hover(function(){
var img = $(this);
img.fadeOut(function(){
img.attr('src', img.attr('data-src2')).fadeIn();
});
}, function(){
var img = $(this);
img.fadeOut(function(){
img.attr('src', img.attr('data-src1')).fadeIn();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.stack.imgur.com/1JQvA.png" data-src1="http://i.stack.imgur.com/1JQvA.png" data-src2="http://i.stack.imgur.com/Y4qVb.png" />
If you want that the fadeIn and the fadeOut will occurred simultaneously, you have to put the both of the images and hide the second. When mouse over you can animate them both simultaneously. Something like this:
$('.wrapper').hover(function(){
$('img').fadeToggle('slow');
}, function(){
$('img').fadeToggle('slow');
});
.wrapper {
position:relative;
width:69px;
height:68px;
}
.wrapper img {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.wrapper img:last-child {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<img src="http://i.stack.imgur.com/1JQvA.png" />
<img src="http://i.stack.imgur.com/Y4qVb.png" />
</div>
This is my first post. My code works in chrome and safari, but the slideshow won't stop in firefox. I want to show a live version of this code to make it easier, but I'm working locally. I'm wondering if its because I wrote it with hover instead of mouseover and mouseleave, but I dont know how to write it out correctly that way. There may even be an error in this code, but the browser is not detecting it.
HTML:
<div class="fadelinks">
<img src=""/>
<img src=""/>
<img src=""/>
<img src=""/>
</div>
jQuery:
jQuery(document).ready(function($) {
$(".fadelinks").each(function(){
var $this = this;
$($this).hover(function(){
$('> :gt(0)', $this).hide();
timer = setInterval(function(){$('> :first- child',$this).fadeOut()
.next().fadeIn().end().appendTo($this);}, 1500);
}, function() {
clearInterval(timer);
});
});
});
a simpler way to achieve is to add onmouseover = "mouseoverFunction();" onmouseout = "mouseoutFunction()" to each img tag
then in javascript
mouseoverFunction()
loop through image array
show next
wait
mouseoutFunction()
stop looping
you do not need the a tags
well you want that on mouse hover your images start sliding here is another code i am not so good in jquery but here is the code:
css
#fadelinks{
width: 100px;
height: 100px;
overflow: hidden;
}
set your image height and width equal to the width and height of fadelinks
HTML
<div class="fadelinks">
<a id="same1" href="#"> <img src=""/> </a>
<a id="same2" href="#"> <img src=""/> </a>
<a id="same3" href="#"> <img src=""/> </a>
<a id="same4" href="#"> <img src=""/> </a>
</div>
<button onclick="slid1">image1<button>
<button onclick="slid2">image2<button>
<button onclick="slid3">image3<button>
<button onclick="slid4">image4<button>
jquery
var slide1 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same1").fadeIn();
});
}
var slide2 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same2").fadeIn();
});
} var slide3 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same3").fadeIn();
});
} var slide4 = function(){
$(document).ready(function(){
$("#same1, #same2, #same3, #sam4").fadeout(100);$("#same4").fadeIn();
});
you will understand what will this do but as i told you i am not so good in jquery so i have done this in you know in noob style. but from this you might get the idea and you can intregate this with event handler mousehover and mouseout and also use setinterval to slide automatically.
thanks.