JQuery - fade in (animate) img with replace and attr change

JQuery - fade in (animate) img with replace and attr change - javascript

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>

Related

Slider Image with link

I have a small problem with a small jQuery script that my slide images. The script itself works very well, but I would like to add link for each image, already try to place <a href> and the </a> tags on each side of the <img> but it doesn't work.
Here is the html:
<div id="content">
<img src="/images/main_banner01.jpg" border="0">
<img src="/images/main_banner02.jpg" border="0">
<img src="/images/main_banner03.jpg" border="0">
<img src="/images/main_banner04.jpg" border="0">
</div>
Here is the script:
<script language="javascript">
$(function(){
var p=$('#content').responsiveSlides({
height:484, // slides conteiner height
background:'#fff', // background color and color of overlayer to fadeout on init
autoStart:true, // boolean autostart
startDelay:0, // start whit delay
effectInterval:5000, // time to swap photo
effectTransition:1000, // time effect
pagination:[
{
active:true, // activate pagination
inner:true, // pagination inside or aouside slides conteiner
position:'B_L', /*
pagination align:
T_L = top left
T_C = top center
T_R = top right
B_L = bottom left
B_C = bottom center
B_R = bottom right
*/
margin:10, // pagination margin
dotStyle:'', // dot pagination class style
dotStyleHover:'', // dot pagination class hover style
dotStyleDisable:'' // dot pagination class disable style
}
]
});
});
</script>
Here is the jquery:
(function($){
$.fn.responsiveSlides = function(options){
var _this=this;
var _int=null;
var im=' !important';
var settings = $.extend({
img:null,
height:$(_this).height(),
background:'#fff',
loadingClassStyle:'',
autoStart:true,
startDelay:0,
effectInterval:5000,
effectTransition:1000,
pagination:[{active:true, inner:true, position:'B_C', margin:10, dotStyle:'', dotStyleHover:'', dotStyleDisable:''}]
},options);
_this.RS_Start=function(){
_this.RS_Stop();
_int=setInterval(function(){
var n=$('.current',$('.tgtimg',_this)).next('img');
if(n.length==0){
n=$('img:first',$('.tgtimg',_this));
}
_this.RS_ShowPhoto(n);
},settings.effectInterval);
};
_this.RS_Stop=function(){clearInterval(_int); _int=null;}
_this.RS_ShowPhoto=function(next){
$('.current',$('.tgtimg',_this)).fadeOut(settings.effectTransition);
next.fadeIn(settings.effectTransition,function(){
$('.current',$('.tgtimg',_this)).removeClass('current');
$(this).addClass('current');
var std=settings.pagination[0].dotStyleDisable;
if(std!=''){
$('.'+std,$('.pagination',_this)).removeClass(std);
$('div:eq('+$(this).index()+')',$('.pagination',_this)).addClass(std);
}else{
$('div',$('.pagination',_this)).css('opacity',1);
$('div:eq('+$(this).index()+')',$('.pagination',_this)).css('opacity',0.5);
}
if(_int==null&&settings.autoStart){_this.RS_Start();}
});
};
//var overstyle='position:absolute'+im+'; height:100%'+im+'; width:100%'+im+'; text-align:center'+im+'; line-height:'+settings.height+'px'+im+'; z-index:2'+im+'; background:'+settings.background+im+';';
var overstyle='position:absolute; height:100%; width:100%; text-align:center; line-height:'+settings.height+'px; z-index:2; background-color:'+settings.background+';';
if(settings.loadingClassStyle==''){
overstyle+='font-family:Arial'+im+'; ';
if(settings.background.toLowerCase()=='#fff'||settings.background.toLowerCase()=='#ffffff'){
overstyle+='color:#000'+im+';';
}else{
overstyle+='color:#fff'+im+';';
}
}
var tgtstyle='position:absolute'+im+'; height:'+settings.height+'px'+im+'; width:100%'+im+'; background:'+settings.background+im+'; z-index:1'+im+'; overflow:hidden'+im;
$(_this).height(settings.height).prepend('<div class="overslide '+settings.loadingClassStyle+'" style="'+overstyle+'">loading..</div><div class="tgtimg" style="'+tgtstyle+'"></div>');
if(settings.img==null || settings.img==undefined || settings.img=='undefined'){
$('img',_this).appendTo($('.tgtimg',_this));
$('img',$('.tgtimg',_this)).each(function(i,e){
$(this).attr('style','position:absolute; z-index:1; top:0px; left:0px; height:'+settings.height+'px; display:'+((i==0)?'block':'none'))
if(i==0){
$(this).addClass('current');
}
});
}else{
$.each(settings.img,function(i,e){
$('.tgtimg',_this).append('<img src="'+e+'" style="position:absolute; z-index:1; top:0px; left:0px; height:'+settings.height+'px; display:'+((i==0)?'block':'none')+'" class="'+((i==0)?'current':'')+'">');
});
}
$('img',$('.tgtimg',_this)).onImagesLoad(function(){
// every images are loaded. can i init
$(window).resize(function(){
$('img',$('.tgtimg',_this)).each(function(i,e){
var l=-(($(e).width()-$(_this).width())/2);
if($(_this).width()>$(e).width()){
l=($(_this).width()-$(e).width())/2;
}
$(e).css('left',l+'px');
});
}).trigger('resize');
var p=settings.pagination[0];
if(p.active){
var pos=(p.position.substring(0,1)=='T')?'top:'+p.margin+'px; ':'bottom:'+p.margin+'px; ';
pos+=(p.position.substring(2,3)=='L')?'left:'+p.margin+'px; ':(p.position.substring(2,3)=='R')?'right:'+p.margin+'px; ':'left:50%; ';
var elm='';
$('img',$('.tgtimg',_this)).each(function(i,e){elm+='<div'+((p.dotStyle=='')?' style="float:left; height:15px; width:15px; background:#fff; margin-left:2px; cursor:pointer"':' class="'+p.dotStyle+'"')+'></div>';});
$(_this).append('<div class="pagination" style="position:absolute; z-index:10; '+pos+'">'+elm+'</div>');
if(p.position.substring(2,3)=='C'){
$('.pagination',_this).css('margin-left','-'+parseInt($('.pagination',_this).width()/2)+'px');
}else if(p.position.substring(2,3)=='R'){
$('.pagination',_this).css('margin-left','-'+($('.pagination',_this).width()+p.margin)+'px');
}
if(!p.inner){
$('.pagination',_this).css('margin-top',-$('.pagination',_this).height()-(p.margin*2)+'px');
$('.pagination',_this).css('margin-bottom',-$('.pagination',_this).height()-(p.margin*2)+'px');
}
$('div',$('.pagination',_this)).mouseover(function(){
if(p.dotStyleHover!=''){$(this).addClass(p.dotStyleHover);}else{$(this).css('background','#CCC');}
}).mouseout(function(){
if(p.dotStyleHover!=''){$(this).removeClass(p.dotStyleHover);}else{$(this).css('background','#fff');}
}).click(function(){
_this.RS_Stop();
_this.RS_ShowPhoto($('img:eq('+$(this).index()+')',$('.tgtimg',_this)));
});
}
// init transition after delay and remove overlayer whit custom bg color
$('.overslide',_this).delay(settings.startDelay).fadeOut(settings.effectTransition,function(){
if(settings.autoStart){_this.RS_Start();}
$('div:eq(0)',$('.pagination',_this)).css('opacity',0.5);
});
});
return _this;
};
}(jQuery));
Any idea ? Thank you all :)

Try something like this
Create a attribute to store your url for that image, using windows.location navigate to tat page
html:
<div id="content">
<img data-href="/url1" src="/images/main_banner01.jpg" border="0">
<img data-href="/url2" src="/images/main_banner02.jpg" border="0">
<img data-href="/url3" src="/images/main_banner03.jpg" border="0">
<img data-href="/url4" src="/images/main_banner04.jpg" border="0">
</div>
js:
$('#content img').click(function(){
window.location =$(this).attr('data-href');
});

Yes, you can use data-href attribute to each of your image element where you want to target.
<img src="/images/main_banner01.jpg" data-href='#' border="0">
And in js file you need to add following code to target on click event on image
$('#content img').click(function(){
window.location.href = $(this).data('href');
});
So now on click you can target to your data-href attribute of selected image.

Swap images on hover with fade

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>

Simple Slideshow on Hover, Slideshow stops on mouseleave

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.

Create a falling div (that works in IE)

Below is my original question and code but per CoreyRS's comment let me add some detail. I want to create a div that falls own the page and disappears like a rock falling through the air. The catch is it must work in IE 9 and 8. I have found some CSS3 animations that work great in all but IE. Any help is appreciated. Please provide code examples.
Original Question and Code
I am attempting to use the slideDown animation in jQuery to animate a div. The idea is a div will show then slide down the page and then fade out. Preferably it would fade out while falling but I cannot even get the div to fall. Here is my code:
JS:
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() { //fade out loading div
$j("#content-wrap").fadeIn("slow", function() { // show content div
setTimeout( function() { // delay slideDown effect
$j('#animate').slideDown('slow', function() {
// script to fade out or hide animate div
}, 2000 );
});
});
});
});
HTML:
<div id="loading">
<h2 class="textcenter">Loading...</h2>
<img id="loading-image" class="center" src="/images/ajax-loader.gif" />
</div>
<div id="content-wrap" class="hide">
<div id="animate">
<img class="fear" src="/sign.png" />
</div>
<div class="img-center">
<img class="feature-image" src="/Prairie-Grass.jpg" />
</div>
</div>
What am I doing wrong and I will take any advice that will create a falling div on the screen that fades out that will work in IE 9 and 8.

Haven't tested but give this a go. You'll need to edit the width/height properties etc to your needs, and obviously don't use inline styling if you have a css stylesheet.
<style>
#animate {
width:100px;
height:100px;
position:fixed;
top:-100px;
left:50%;
margin-left:50px;
z-index:1;
}
</style>
<script>
var $j = jQuery.noConflict();
$j(window).load(function() {
$j('#loading').fadeOut('slow', function() {
$j("#content-wrap").fadeIn("slow", function() {
$j('#animate').delay(2000).animate({'top':'50%'}, 500);
$j('#animate').delay(2000).fadeOut(500);
});
});
});
</script>

Hide Content Loading Gif

I have two large image files in a div on a page that take several seconds to load. How can I hide the loading content while a "loading gif" appears and then have the content appear once it has fully loaded?
I don't really know anything about javascript but I tried using this code. It did half of what I wanted it to do. The "loading gif" worked but the problem was that the content was visible as it was loading.
http://aaron-graham.com/test2.html
<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;">
<img src="img/parallax/ajax-loader.gif" border=0>
</div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
Any help would be greatly appreciated!

Use jquery, with code like:
$(document).ready(function(){
$('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});
With the html like:
<img id="pic1" />
It works by running when document's ready function is called (which is called after the DOM and other resources have been constructed), then it will assign the img's src attribute with the image's url you want.
Change the nyquil.org url to the image you want, and add as many as needed (just don't go overboard ;). Tested Firefox 3/chrome 10.
Here is the demo: http://jsfiddle.net/mazzzzz/Rs8Y9/1/

Working off your HTML structure I added a notifyLoaded class for the two images so you can watch for when both have loaded via an onload event. Since css background images don't get that event I've created a hidden img using the background's path so we can test when that image is loaded
HTML:
<div id="loading">
<img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" />
</div>
<div id="vertical">
<div>
<div class="panel">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" />
</div>
</div>
</div>
<div id="imgLoader">
<img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" />
</div>
You have reference to jQuery in your page already so I've replaced your script to the following.
jQuery:
$(document).ready(function() {
var $vertical = $('#vertical');
var $imgs = $('.notifyLoaded');
var imgCount = $imgs.length;
var imgLoadedCount = 0;
$vertical.backgroundparallax(); // Activate BG Parallax plugin
$imgs.load(function() {
console.log(this);
imgLoadedCount++;
if (imgCount == imgLoadedCount) {
// images are loaded and ready to display
$vertical.show();
// hide loading animation
$('#loading').hide();
}
});
});
I've also set #Vertical to a default display:none; which gets changed when images have loaded
CSS:
body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}

We Keep Coding

JavaScript is the programming language of the Web.

JQuery - fade in (animate) img with replace and attr change - javascript

Related

Slider Image with link

Swap images on hover with fade

Simple Slideshow on Hover, Slideshow stops on mouseleave

Create a falling div (that works in IE)

Hide Content Loading Gif

Categories

Resources