Hi all,
Iv been shaping up some on my old code lately (after about a year of practice)
This code is one of those pieces but it seems this never wants to work without some little glitch
.
Here is the new code
Old code is this post
<script>
function slideshow()
{
var images = [
'Images/PokemonImage1.jpg',
'Images/PokemonImage2.jpg',
'Images/PokemonImage3.jpg',
'Images/PokemonImage4.jpg',
'Images/PokemonImage5.jpg',
];
var run = FadeImages(0,1);
function FadeImages(Image1Number,Image2Number)
{
var FadeAmount = 0;
var StartFade = window.setInterval(function()
{
FadeAmount = FadeAmount + 0.005
var pausevalue = document.getElementById('pause').value;
if(pausevalue == 1)
{
SwitchImg(Image1Number,Image2Number,false)
}
else
{
var FadeOut = function(){
document.getElementById('image1').style.opacity = (1-FadeAmount).toFixed(2);
}
FadeOut();
var FadeIn = function(){
document.getElementById('image2').style.opacity = FadeAmount.toFixed(2);
}
FadeIn();
if(FadeAmount >= 1)
{
window.clearInterval(StartFade);
SwitchImg(Image1Number,Image2Number,true)
}
}
},10);
}
function SwitchImg(Image1Number,Image2Number,run)
{
var NewImage2Number;
var img1 = document.getElementById('image1')
var img2 = document.getElementById('image2')
if(Image2Number == images.length-1)
{
NewImage2Number = 0;
}
else
{
NewImage2Number = Image2Number + 1;
}
img1.src=images[Image2Number]; // Change so that both images = the one being shown//
img1.style.opacity = 1; // Change so that the new image is now on top (so to speak) //
img2.style.opacity = 0; //Change so that the new image (when switched in) will be un-visible //
img2.src=images[NewImage2Number]; // switch in new image //
if(run == true)
{
FadeImages(Image2Number,NewImage2Number);
}
}
}
slideshow();
function ChangeValue(elm,value,elmInnerHtml)
{
elm.value=value;
elm.innerHTML = elmInnerHtml;
}
</script>
<body>
<div onclick="ChangeValue(this,1,'Paused')" ondblclick="ChangeValue(this,0,'Running..')" id='pause' value='0'>
PauseMe
</div>
<img src='Images/PokemonImage1.jpg' style='position:absolute;top:0xp;left:0px;width:300px;height:300px;' id='image1'>
<img src='Images/PokemonImage2.jpg' style='position:absolute;top:0xp;left:0px;width:300px;height:300px;' id='image2'>
</body>
Hopefully you will agree this is a lot better than my old code but if you run this (you will need to pop some images in) you may notice a small glitch.
Can't see it? well then you are one of 4 things:
Using Google Chome and are blind :S
Using IE
Using Firefox and haven't looked hard enough
to lazy to put images in ...
In case you don't have google chrome (i mean really?). The problem is such: When the switch function is called ever now and again (for what appears to me to be random ( i know its code, that does not happen
) the img1 will have its opacity changed BEFORE the new image is switched over. This results in the old image flashing quickly onto the screen.
In IE this simply doesn't happen (IE is better? wait ... what?)
In FireFox on the 3 image there is a slight judder on the image but it works correctly (thinking this is the clue here).
Anyone wanna have a stab at whats going on here?
Iv commented the important lines of code with how I see the logic
img1.src=images[Image2Number]; // Change so that both images = the one being shown//
img1.style.opacity = 1; // Change so that the new image is now on top (so to speak) //
img2.style.opacity = 0; //Change so that the new image (when switched in) will be un-visible //
img2.src=images[NewImage2Number]; // switch in new image //
its almost as if chrome is getting ahead of itself and tripping over.
Anyway, i'm rambling. Any improvements, as always, would be great and if you think you know what the problem is ... well your a genius.
O! and if you put an alert in this middle of the opacity changing, it works correctly .... yer ....
Thanks! 