When I click a certain link I want the background-image to fadeOut, change to another image and then fadeIn.
The code I have:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').css('background-image', 'url('+image+')');
})
I tried this:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').fadeOut('3000').fadeIn('3000').css('background-image', 'url(' + image + ')');
})
but this didn't work, what am I doing wrong? (I'm new to jQuery)
EDIT:
I solved this with Rory McCrossan answer:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').fadeOut('3000', function() {
$(this).css('background-image', 'url('+image+')').fadeIn('3000');
});
});
But now this fadesOut to a white background and and then fadesIn to the image, giving a sensation of a flash? Is there a way to load the image before?
You need to chain the fades by calling the fadeIn after the fadeOut has completed. You can do this by using the callback function parameter. Try this:
$('.link').on('click',function(){
var image = $(this).data('image');
$('#div-with-the-bgimage').fadeOut('3000', function() {
$(this).css('background-image', 'url('+image+')').fadeIn('3000');
});
});
Wouldn't it be much simpler if you append / remove a div with the image you want and not change anything in the background? Just an example:
<div data-image="some-other-image.jpg" class="appendhere" style="position:relative">some content and an image background here</div>
Now using jQuery, you may put the image in the above data attribute on top, with 0 opacity, fade it in and out:
$('.link').on('click',function(){
var image = $(this).data('image');
var appendcode = '<div class="appended" style="display:none;position:absolute;width:200px;height:200px;overflow:hidden"><img src="' + image + '"></div>';
$('#div-with-the-bgimage').append(appendcode);
$('.appended').css({'opacity': 0, 'display':'block', 'z-index': 999}).fadeIn('3000', function() {
$(this).fadeOut('3000');
});
});
I used some inline styles there to point you need to make the wrapper relative positioned and the appended absolute positioned and with a higher z-index, you can make it much more elegant by including these in your CSS of course.
U can combine animate and opacity or use fadeOut and fadeIn functions.
Check out this link jsfiddle to see a working example using fadeOut and fadeIn.
U can also specify a unique img tag with data-gallery attribute storing multiple url's for images to toggle between all of them. Check this other link jsfiddle to see a working example. Click on the button Toggle to change the image.
Hope it useful!
Related
I was working with responsive web design and I wanted to slide some images in a page. I tried some plugins but the problem with plugin is it uses width and height property and some also assign position absolute. So I thought of changing the src of image myself using js and it worked fine, but can I give some transition effect to it?
What I have done is:
var i =0;
var total =2;
window.setInterval(function(){
show_hide();
}, 1000);
function show_hide()
{
var img=$('.image-holder img, .image-holder2 img');
//alert(img.length);
if(i%2==0)
{
img[0].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
img[1].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
i=0;
}
else
{
img[0].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
img[1].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
}
i++;
}
my html
<div class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
<div class="image-holder2" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" />
</div>
Answering the title, giving a fadeIn/fadeOut while changing the src is easy, just let the element fadeOut, change the src and let it fade in again.
Also, I would like to point out that with jQuery, iterating through a class like that, ruins the purpose of using it's own selector ".each()"
$('.image-holder img, .image-holder2 img').each(function() {
$(this).fadeOut(200,function() {
$(this).attr('src', 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png');
$(this).fadeIn(200);
});
});
http://jsfiddle.net/tq9nV/1/
Use jQuery with animate(). You can also run show(N ms) on one of the images and hide(N ms) on the other. You can also choose how to show/hide the images using effects (like fadein and fadeout).
Also, have a look at http://api.jquery.com/fadeIn/ and http://api.jquery.com/fadeOut/
I need to change my background div with some other images.
I want that first, myDiv load the first background image on css style, and then within 2/3 seconds of delay add a fade effect change the background image.
If it's possible, I need to do this with jQuery.
You cannot do fade or any other transitions directly on the background image. You can however add another div with second image as its background and fadeOut() the original one.
Does this do what you you want?
http://jqueryfordesigners.com/image-loading/
EDIT: A bit more Googling - this sounds like what you are trying to do...
http://www.magneticwebworks.com/jquery-rotating-page-background/
Edit: another go - THis? http://css-tricks.com/forums/discussion/9621/solved-is-it-possible-to-add-jquery-cycle-to-background-imagess/p1
this is not fade effect but you can delay and change background image like this.
function changebackground(){
$('#divID').css("background-image", "url(/myimage.jpg)");
}
setTimeout(function() { changebackground();}, 3000);
this might be good workaround
http://jquery.malsup.com/cycle/
after you position on top divs with cycle it can be your background - cycle.js give's you lot of options.
if you want only rotate image's in bacground you must first preload that image and second you must put it in other div so that both divs can animate.
There is no support for this, even if you add all the functionality of jQuery UI.
You could append a temporary image, absolutely positioned inside the div for which u want to change background. Let the image fade in, and once it's fully opaque, swap background image for the div. This will be problematic if you have a repeated background, however.
var im1 = 'picture1.png';
var im2 = 'picture2.png';
$('#divID').css({'background-image': 'url("'+im1+'")', 'position': 'relative'});
$('#divID').on('click', function() {
var img = $('<img />', {
src: im2,
}).css({
position: 'absolute',
top: 0,
left: 0
}).hide();
$(this).append(img);
img.fadeIn('slow', function() {
$(this).parent().css('background-image', 'url("'+im2+'")');
$(this).remove();
});
});
Of course, you should move the CSS I included in my script to a .css file, and use a class instead, for more readable code.
all.
I have.
<div id="imagecontainer" class="header-image-container"> </div>
BG image are specified in css for ich page according on parent class.
.category-1 #imagecontainer {
background: url(_/images/1.jpg);
}
And i have menu. I want to chage BG image ommouse over, and on mouse out return image specified in css for this page according on parent class. I think it could be real using JQuery. For example we have opened category-3 page and move mouse on category-1 menu item and see catefory-1 BG image in #imagecontainer, and then we move mouse out see again category-3 BG image.
I think this will do you want:
$('#menu').mouseenter(function() {
$('#imagecontainer').css({'background':'blue'});
}).mouseleave(function() {
$('#imagecontainer').removeAttr('style');
})
You can see it in action here: http://jsfiddle.net/Cdzk8/
If you have other inline styles on your imagecontainer, it will also remove those on mouseleave. In that case, you will have do something more like what mblase75 is recommending.
Store the current background image as data before swapping it out, and retrieve it from there when you want to swap it back.
$('#imagecontainer').mouseover(function() {
$(this).data('bgimg') = $(this).css('background-image');
$(this).css('background-image','url(my/new/url.jpg)');
}).mouseout(function() {
$(this).css('background-image', $(this).data('bgimg'));
});
I have a simple jQuery image changer, that when you hover over it will make swap all images with their grey version except the one you are on, that one will stay colour (They are all colour to begin with) and when you hover over another image, the last image gets changed to grey and the new one gets changed to colour.
However on IE, when you hover through the images, because it is changing the src IE will display the coloured version for a split second before doing what it is supposed to.
Here is the code:
$(window).load(function() {
//when mouse over the list item...
$('#portfolio ul li').hover(function(){
$(this).find('img').addClass('active');
$(this).siblings().each(function(Idx){
var imgSrc = ""+$(this).find('img').attr('src');
var imgGS = ""+$(this).find('a').attr('rel');
$(this).find('img').attr('src', imgGS);
$(this).find('a').attr('rel', imgSrc);
//alert (imgSrc + " " + imgGS);
});
//when mouse leave...
}, function(){
$(this).find('img').removeClass('active');
$(this).siblings().each(function(Idx){
var imgGS = $(this).find('img').attr('src');
var imgSrc = $(this).find('a').attr('rel');
$(this).find('a').attr('rel',imgGS);
$(this).find('img').attr('src', imgSrc);
//alert (imgSrc + " " + imgGS);
});
});
//when mouse leaves the unordered list...
$('#portfolio ul').bind('mouseleave',function(){
$(this).siblings().each(function(Idx){
var imgSrc = $(this).find('img').attr('src');
var imgGS = $(this).find('a').attr('rel');
$(this).find('img').attr('src', imgSrc);
$(this).find('a').attr('rel',imgGS);
// alert (imgSrc + " " + imgGS);
});
});
});
Any help would be appreciated :)
Thanks.
Try using image sprites for this. This involves putting both grey and colour in the same image and then instead of changing the source you simply change which part of the image gets shown. The solves the problem of your browser having to load images on the fly as they will already be loaded.
You could display the color image as a regular <img> and then the gray version is the css background. On hover, fade it's siblings img's out.
Something like
$('.yourList li').hover(function() {
$(this).siblings().find('img').hide();
},function() {
$(this).siblings().find('img').show();
});
Just make sure you either have content keeping that li from collapsing, or you manually set the dimensions.
Pixastic for catering to standards compliant browsers and css filters for IE should do the trick. dont need multiple images
http://www.pixastic.com/lib/download/
Im creating a nav that uses jquery to replace the image on rollover. Here is the code I am using:
http://peps.ca/blog/easy-image-rollover-script-with-jquery/
basically, you add a suffix (_o) to the filename and when you rollover the src, jquery replaces it with the (_o).png. I want to add fade so when there is a rollover, the transition isn't instant, rather there is a quick, elegant fade. Any ideas?
$('#the_image).hover(function() {
$(this).fadeOut(function() {
$(this).attr('src', $(this).attr('src').replace(".png", "_o.png")).fadeIn();
});
}, function {
$(this).fadeOut(function() {
$(this).attr('src', $(this).attr('src').replace("_o.png", ".png")).fadeIn();
});
});
rather than replace, you'll have to overlay a new image and fade it in, waiting till the transition has completed.
something like...
$('.my_img').parent().append($('.my_img').clone().attr('src','my_img_o.jpg').fadeIn('slow'))
assuming the element is absolutely positioned
You could layer a second (hidden) element over the top of your default image, then see about fading that one in and out with a rollover.