jQuery image change not working

[otester]

Basically when the page loads it starts with the "man-on-camel" image, fades in/out then displays the "man-on-camel" image again?

 

Why doesn't it start with the "17th-century-brothel-pub.png" image?

 

$("#site_dynamic_content").css("background-image", "url(../images/17th-century-brothel-pub.png)");
$("#site_dynamic_content").fadeIn(2000);
$("#site_dynamic_content").fadeOut(2000);
$("#site_dynamic_content").css("background-image", "url(../images/man-on-camel.png)");
$("#site_dynamic_content").fadeIn(2000);

 

 

Any ideas would be great!

 

Thanks,

 

otester

[radar]

there are a few generic ways to get this done..  one being:

 

$('img.over').each(function(){ 
    var t=$(this); 
    var src1= t.attr('src'); // initial src 
    var newSrc = src1.substring(src1.lastIndexOf('/'), src1.lastIndexOf('.')); // let's get file name without extension 
    t.hover(function(){ 
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension        
    }, function(){ 
        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name 
    }); 
}); 

 

you may want to change the class of images from first line. If you need more image classes (or different path) you may use

$('img.over, #container img, img.anotherOver').each(function(){ 

 

or if you want a bit simpler way of achieving something like this...  use CSS

 

#element { 
    width: 100px; /* width of image */ 
    height: 200px; /* width of image */ 
    background-image: url(/path/to/image.jpg); 
} 

#element:hover { 
    background-image: url(/path/to/other_image.jpg); 
} 

 

[otester]

there are a few generic ways to get this done..  one being:

 

$('img.over').each(function(){ 
    var t=$(this); 
    var src1= t.attr('src'); // initial src 
    var newSrc = src1.substring(src1.lastIndexOf('/'), src1.lastIndexOf('.')); // let's get file name without extension 
    t.hover(function(){ 
        $(this).attr('src', newSrc+ '-over.' + /[^.]+$/.exec(src1)); //last part is for extension        
    }, function(){ 
        $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(src1)); //removing '-over' from the name 
    }); 
}); 

 

you may want to change the class of images from first line. If you need more image classes (or different path) you may use

$('img.over, #container img, img.anotherOver').each(function(){ 

 

or if you want a bit simpler way of achieving something like this...  use CSS

 

#element { 
    width: 100px; /* width of image */ 
    height: 200px; /* width of image */ 
    background-image: url(/path/to/image.jpg); 
} 

#element:hover { 
    background-image: url(/path/to/other_image.jpg); 
} 

 

 

I was trying to make a basic slide show but I did something similar in CSS like you posted, basically making two CSS bits, one with either background and by default set to "display:none", then used jquery to do the fading in/out of either CSS bits along with a JS loops.

 

To stop them both appearing at the same time I had to interleave them (here's code if it'll help anyone else):

 

JavaScript/jQuery:

 

function dynamic() {
	$("#site_dynamic_content").fadeIn(4000);
	$("#site_dynamic_content").fadeOut(4000, function() {
		$("#site_dynamic_content2").fadeIn(5000);
		$("#site_dynamic_content2").fadeOut(2000, function() {
			looper();
		});
	});
}

function looper() {
	dynamic();
}

$(document).ready(function(){  
dynamic();
});

 

CSS:

 

#site_dynamic_content {
	display:none;
	background-image:url(../images/17th-century-brothel-pub.png);
	background-repeat:no-repeat;
	width:654px;
	height:300px;
	cursor:pointer;
}
#site_dynamic_content2 {
	display:none;
	background-image:url(../images/man-on-camel.png);
	background-repeat:no-repeat;
	width:654px;
	height:300px;
	cursor:pointer;
}

 

Thanks for help!