...

View Full Version : JS: fading images into images



tinfanide
07-27-2011, 01:48 PM
Please help have a look at the scripts...
Where's gone wrong that whenever an image fades out into 0, it reappears before another image comes out?
I've wanted to make the image disappear shortly before a new image is loaded.
I've worked on this and played around with the scripts, yet no finding...
Please do tell me if you know the answer to it. Thanks.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
var pic = document.getElementById("pic");
document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}

}

var img = new Array();
img[0] = "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png";
img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";
img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";
img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";

var o = 100;
var t;
var p = 0;
var f = 1;

function nextImageFading(){

t = setInterval(
function(){

pic.src = img[p];

pic.style.filter = "alpha(opacity="+o+")";
pic.style.MozOpacity = o/100;
pic.style.opacity = o/100;
o -= 1;

if(o<=0){

clearInterval(t);

if(p<img.length-1){
p = p+1;

}
else {p=0;}

pic.src = img[p];
pic.style.filter = "alpha(opacity=100)";
pic.style.MozOpacity = 1;
pic.style.opacity = 1;

o = 100;

}

},f);

}


</script>
</head>
<body>
<img id="pic" src="" style="width:400px; height:400px;" />
<br style="clear:both;" />
<a id="nextImageFading_btn" href="#">NEXT</a>
</body>
</html>

vwphillips
07-27-2011, 03:29 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
var pic = document.getElementById("pic");
document.getElementById("nextImageFading_btn").onclick = function(){nextImageFading();}

}

var img = new Array();
img[0] = "http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg";
img[1] = "http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg";
img[2] = "http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg";
img[3] = "http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg";

// preload the images
for (var SRC=[],z0=0;z0<img.length;z0++){
SRC[z0]=new Image();
SRC[z0].src=img[z0];
}

var o = 100;
var t;
var p = 0;
var f = 1;

function nextImageFading(){

t = setInterval(
function(){

pic.src = img[p];

pic.style.filter = "alpha(opacity="+o+")";
pic.style.MozOpacity = o/100;
pic.style.opacity = o/100;
o -= 1;

if(o<=0){

clearInterval(t);

if(p<img.length-1){
p = p+1;

}
else {p=0;}

pic.src = img[p];
pic.style.filter = "alpha(opacity=100)";
pic.style.MozOpacity = 1;
pic.style.opacity = 1;

o = 100;

}

},f);

}


</script>
</head>
<body>
<img id="pic" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" style="width:400px; height:400px;" />
<br style="clear:both;" />
<span id="nextImageFading_btn">NEXT</span>
</body>
</html>

tinfanide
07-28-2011, 03:15 PM
It's very helpful.
But could I ask what of preloading images achieves the expected effect?
I cannot see the relationship between preloading images and removing the old image and fading into the new one.

vwphillips
07-28-2011, 03:25 PM
it takes time for an image to load and the old image is visible until the new image has loaded

bullant
07-28-2011, 03:37 PM
Maybe use this demo as a guide.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#ssImg {
display: none;
}
</style>
<script type="text/javascript">
var myPics = ['num1.jpg','num2.jpg','num3.jpg'];
//preload the pics to ensure they are cached by end of page load
var picO = new Array();
for(i=0; i < myPics.length; i++){
picO[i] = new Image();
picO[i].src = myPics[i];
}
var curPic = 0;
var fadeTimer;
var speed = 50;
var opacStep = 0.5;
var dirn = -1;
var curOpac = 10;
function fade(){
if(fadeTimer){clearInterval(fadeTimer);}
fadeTimer = setInterval(setOpacity,speed);
}
function setOpacity() {
curOpac = curOpac + (opacStep * dirn);
if(curOpac < 0){
swapImage();
curOpac = 0;
dirn = 1;
fade();
return;
}
if(curOpac > 10){
curOpac = 10;
clearInterval(fadeTimer);
dirn = -1;
setTimeout(fade,1000);
return;
}
if(typeof(oSsImg.style.opacity) == 'string'){
oSsImg.style.opacity = curOpac/10;
} else {
oSsImg.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
}
}
function swapImage(){
curPic = (++curPic > picO.length-1)? 0 : curPic;
oSsImg.src = picO[curPic].src;
}
window.onload=function(){
oSsImg = document.getElementById('ssImg');
oSsImg.src = picO[curPic].src;
oSsImg.style.display = 'inline';
setTimeout(fade,1000);
}
</script>
</head>
<body>
<div>
<img id="ssImg" src="" alt="" />
</div>
</body>
</html>

tinfanide
07-28-2011, 04:15 PM
But the old image is faded into 0 of opacity before the new image is loaded.



if(o<=0){

clearInterval(t);

if(p<img.length-1){
p = p+1;

}
else {p=0;}

pic.src = img[p];
pic.style.filter = "alpha(opacity=100)";
pic.style.MozOpacity = 1;
pic.style.opacity = 1;

o = 100;

}

tpeck
07-28-2011, 04:18 PM
There's also a jquery fade images plugin here:

http://medienfreunde.com/lab/innerfade/

bullant
07-29-2011, 12:21 AM
But the old image is faded into 0 of opacity before the new image is loaded.


Then you just need to do some Basic Debugging 101 (http://www.codingforums.com/showthread.php?p=1082858#post1082858) to find and fix the problem.

The demo I posted works fine. If you want you can easily add stop/pause and left/right buttons or onmouseover events to control the slideshow.

vwphillips
07-29-2011, 12:39 PM
if(o<=0){

clearInterval(t);

if(p<img.length-1){
p = p+1;

}
else {p=0;}

pic.src = img[p]; // this takes time to load
pic.style.filter = "alpha(opacity=100)";
pic.style.MozOpacity = 1;
pic.style.opacity = 1; // the opacity is 1 before the new image has loaded

o = 100;

}

tinfanide
07-29-2011, 01:33 PM
I see. Do you mean even I p++, it takes time to load the new image and if the new image is by chance not ready yet, the old image would be set to full opacity?

Then, the question will be:
Why is



if(o<=0){

clearInterval(t);

if(p<img.length-1){
p = p+1;

}
else {p=0;}

pic.src = img[p]; // this takes time to load
pic.style.filter = "alpha(opacity=100)";
pic.style.MozOpacity = 1;
pic.style.opacity = 1; // the opacity is 1 before the new image has loaded

o = 100;

}


needed? Are these codes needed for the new image's opacity?
Then, does it mean the preloading of images sync the time of loading new images and that of opacity changing?

tinfanide
07-31-2011, 09:36 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS: Image Slider</title>
<style>
myPics {
display: none;
width: 500px;
height: 500px;}
</style>
<script>

var myPics = [];
myPics[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png",
cap: "",
url: "",
des: ""
};
myPics[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png",
cap: "",
url: "",
des: ""
};
myPics[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg",
cap: "",
url: "",
des: ""
};
myPics[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg",
cap: "",
url: "",
des: ""
};


var pic0 = new Array();
for (i=0; i<myPics.length; i++){
pic0[i] = new Image();
pic0[i].src = myPics[i].src;
}
var curPic = 0;

var fadeTimer;
var speed = 50; // speed rate for each slide
var dirn = -1; // fade direction (*+1 = fade in; *-1 = fade out;)

var opacStep = 0.5; // opacity fade rate;
var curOpac = 10; // opacity of the current slide;

function fade(){
if (fadeTimer){
clearInterval(fadeTimer);
}
fadeTimer = setInterval(setOpacity,speed);
}



function setOpacity(){

curOpac = curOpac + (opacStep*dirn);

if (curOpac<0) {

randSwap[rand];

curOpac = 0;
dirn = 1;
fade();
return;

}

if (curOpac>10) {
curOpac = 10;
clearInterval(fadeTimer);
dirn = -1;
setTimeout(fade,1000);
return;
}

if (imgSlider.style.opacity=="string") {
imgSlider.style.opacity = curOpac/10;
}
else {imgSlider.style.filter = "alpha(opacity="+curOpac*10+")";}
imgSlider.style.MozOpacity = curOpac/10;
}

function prevSwap(){
curPic = (--curPic < 0)? pic0.length-1 : curPic;
imgSlider.src = pic0[curPic].src;
}

function nextSwap(){
curPic = (++curPic > pic0.length-1)? 0 : curPic;
imgSlider.src = pic0[curPic].src;
}

window.onload = function(){

var imgSlider = document.getElementById("imgSlider");

var prev = prevSwap;
var next = nextSwap;
var randSwap = new Array(prev,next);

var rand = Math.ceil(Math.random()*2)-1;


imgSlider.src = pic0[curPic].src;
imgSlider.style.display = "inline";

}

</script>
</head>
<body>
<myPics id="imgSlider" src="" />
</body>
</html>


I tried to put on a random play function to the demo.
But it just cannot work.
Can you tell me where I've got wrong?

vwphillips
07-31-2011, 10:41 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS: Image Slider</title>
<style>
myPics {
display: none;
width: 500px;
height: 500px;}
</style>
<script>

var myPics = [];
myPics[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png",
cap: "",
url: "",
des: ""
};
myPics[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png",
cap: "",
url: "",
des: ""
};
myPics[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg",
cap: "",
url: "",
des: ""
};
myPics[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg",
cap: "",
url: "",
des: ""
};


var pic0 = new Array();
for (i=0; i<myPics.length; i++){
pic0[i] = new Image();
pic0[i].src = myPics[i].src;
}
var curPic = 0;

var fadeTimer;
var speed = 50; // speed rate for each slide
var dirn = -1; // fade direction (*+1 = fade in; *-1 = fade out;)

var opacStep = 0.5; // opacity fade rate;
var curOpac = 10; // opacity of the current slide;

function fade(){
if (fadeTimer){
clearInterval(fadeTimer);
}
fadeTimer = setInterval(setOpacity,speed);
}



function setOpacity(){

curOpac = curOpac + (opacStep*dirn);

if (curOpac<0) {

var r=curPic;
while (r==curPic){
curPic=Math.floor(Math.random()*(myPics.length)); // change to a random image
}
imgSlider.src = pic0[curPic].src;
curOpac = 0;
dirn = 1;
fade();
return;

}

if (curOpac>10) {
curOpac = 10;
clearInterval(fadeTimer);
dirn = -1;
setTimeout(fade,1000);
return;
}

if (imgSlider.style.opacity=="string") {
imgSlider.style.opacity = curOpac/10;
}
else {imgSlider.style.filter = "alpha(opacity="+curOpac*10+")";}
imgSlider.style.MozOpacity = curOpac/10;
}

function prevSwap(){
curPic = (--curPic < 0)? pic0.length-1 : curPic;
imgSlider.src = pic0[curPic].src;
}

function nextSwap(){
curPic = (++curPic > pic0.length-1)? 0 : curPic;
imgSlider.src = pic0[curPic].src;
}

var imgSlider; // this variables need to be global

window.onload = function(){

imgSlider = document.getElementById("imgSlider");

imgSlider.src = pic0[curPic].src;
imgSlider.style.display = "inline";
fade();
}

</script>
</head>
<body>
<img id="imgSlider" src="" />
</body>
</html>

tinfanide
07-31-2011, 11:02 AM
While you're answering my question, I may be working the similar way as you're just doing so.

I finally worked out something like this:
This produces another kind of similar effect (either prev or next image sliding) but I see yours's a shuffle one, which is what I want to think about next.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS: Image Slider</title>
<style>
img {
display: none;
width: 500px;
height: 500px;}
</style>
<script>

window.onload = function(){
var imgSlider = document.getElementById("imgSlider");
imgSlider.src = pic0[curPic].src;
imgSlider.style.display = "inline";
setTimeout(fade,1000);
}

var myPics = [];
myPics[0] = {src: "http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png",
cap: "",
url: "",
des: ""
};
myPics[1] = {src: "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png",
cap: "",
url: "",
des: ""
};
myPics[2] = {src: "http://www.techlifeweb.com/facebook_logo.jpg",
cap: "",
url: "",
des: ""
};
myPics[3] = {src: "http://www.thetechherald.com/media/images/201115/Adobe_2.jpg",
cap: "",
url: "",
des: ""
};

var pic0 = new Array();
for (i=0; i<myPics.length; i++){
pic0[i] = new Image();
pic0[i].src = myPics[i].src;
}
var curPic = 0;
var rand = Math.ceil(Math.random()*2)-1;

var fadeTimer;
var speed = 50; // speed rate for each slide
var dirn = -1; // fade direction (*+1 = fade in; *-1 = fade out;)

var opacStep = 0.5; // opacity fade rate;
var curOpac = 10; // opacity of the current slide;

function fade(){
if (fadeTimer){
clearInterval(fadeTimer);
}
fadeTimer = setInterval(setOpacity,speed);
}

function setOpacity(){
curOpac = curOpac + (opacStep*dirn);

if (curOpac<0) {

if(rand==0){
prevSwap();
}
else{nextSwap();}

curOpac = 0;
dirn = 1;
fade();
return;
}

if (curOpac>10) {
curOpac = 10;
clearInterval(fadeTimer);
dirn = -1;
setTimeout(fade,1000);
return;
}

if (imgSlider.style.opacity=="string") {
imgSlider.style.opacity = curOpac/10;
}
else {imgSlider.style.filter = "alpha(opacity="+curOpac*10+")";}
imgSlider.style.MozOpacity = curOpac/10;
}

function prevSwap(){
curPic = (--curPic < 0)? pic0.length-1 : curPic;
imgSlider.src = pic0[curPic].src;
}

function nextSwap(){
curPic = (++curPic > pic0.length-1)? 0 : curPic;
imgSlider.src = pic0[curPic].src;
}

</script>
</head>
<body>
<img id="imgSlider" src="" />
</body>
</html>

tinfanide
08-08-2011, 05:50 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#ssImg {
display: none;
}
</style>
<script type="text/javascript">
var myPics = ['num1.jpg','num2.jpg','num3.jpg'];
//preload the pics to ensure they are cached by end of page load
var picO = new Array();
for(i=0; i < myPics.length; i++){
picO[i] = new Image();
picO[i].src = myPics[i];
}
var curPic = 0;
var fadeTimer;
var speed = 50;
var opacStep = 0.5;
var dirn = -1;
var curOpac = 10;
function fade(){
if(fadeTimer){clearInterval(fadeTimer);}
fadeTimer = setInterval(setOpacity,speed);
}
function setOpacity() {
curOpac = curOpac + (opacStep * dirn);
if(curOpac < 0){
swapImage();
curOpac = 0;
dirn = 1;
fade();
return;
}
if(curOpac > 10){
curOpac = 10;
clearInterval(fadeTimer);
dirn = -1;
setTimeout(fade,1000);
return;
}
if(typeof(oSsImg.style.opacity) == 'string'){
oSsImg.style.opacity = curOpac/10;
} else {
oSsImg.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
}
}
function swapImage(){
curPic = (++curPic > picO.length-1)? 0 : curPic;
oSsImg.src = picO[curPic].src;
}
window.onload=function(){
oSsImg = document.getElementById('ssImg');
oSsImg.src = picO[curPic].src;
oSsImg.style.display = 'inline';
setTimeout(fade,1000);
}
</script>
</head>
<body>
<div>
<img id="ssImg" src="" alt="" />
</div>
</body>
</html>


I must thank for your codes again as long as I've been dragging myself in fading and sliding JS things these days. The script is helpful in the way that it is so thought-provoking.

When I add something new based on your scripts, something occurred to my mind. If you're free, please do teach me a thing.

The first question:
When it reaches if (curOpac > 10)
You reset curOpac to 10
and the if statement is finished, is curOpac reset back to its global value 10 as in var curOpac = 10;

Second question:
Why return is needed?
I am always confused by the use of "return;" in if statements.
To the best of my knowledge, "return;" means stop the function (in this case) as it returns nothing.
What does it mean in your script?

Thank you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum