Originally Posted by
boogyman
Code:
myimages.sort(function() {return 0.5 - Math.random();});
document.write('<img id="rand" onload="setTimeOut(fade(this, \'in\', 100, 2, 30), 3 * 1000);" src="'+myimages[0]+'" border=0></a>')
}
where the magenta(pink) 3 is the number of seconds you wish to wait before each transitional fade
I doubt that will work out very well, did you try it?
Originally Posted by
Sidney
Can you let me know how to loop it please so that the random images are shown at regular intervals 'ad-infinitum' (without reloading the page)?
I tried various similar scripts elsewhere (including Dynamic Drive), but yours seems so much leaner and also the fade is a lot smoother than any other I have seen.
Well the reason it's so lean is that it's only for fading. It includes no code or markup for rotating images.
The reason it's so smooth is, since it was devoted only to fading, it can afford extra code to allow for a greater variation in how fading is accomplished. For the example I gave earlier in this thread, I simply set the parameters to a slow smooth fade. If they were set differently, the fade could be faster, and/or choppier.
If you were to compare my script to the fading units (that part of a fading slide show that actually does the fading) of these other scripts, you would find that my code is actually bulkier. It has more code because I wrote it to work extremely well for what it does do, and for every conceivable browser version that could possibly support it.
But these other scripts, in addition to added slide show code and markup, also include extra features that you don't seem interested in at the moment, like linked images, descriptions, and/or controls, etc.
In most of these other scripts, by editing their fading units, their fade transition could be smoothed out, while preserving their other features.
But, here is a version of my script with a bare bones slide show added. You now have to set the height and width of the images in the style section in the head, and they must all be of the same dimensions:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#randm, #randm img {
width:140px;
height:225px;
}
</style>
<script type="text/javascript">
/* Cross Browser Image Fader © 2007 John Davenport Scheuer
This comment must remain for Legal Use */
var faders=[];
// Preset each image's initial opacity (0 to 100):
// ex: faders[x]=['image_id', initial_opacity];
faders[0]=['rand', 0];
////////////// Stop Editing //////////////
function fade(el, way, op, opinc, speed){
if(!fade.prprt&&!fade.ie)
return;
var id=typeof el=='string'? el : el.id, el=typeof el=='object'? el : document.getElementById(el);
clearTimeout(fade[id+'timer']);
var op_obj=fade.ie6? el.filters[0] : el.style,
waym=way=='in'? 1 : -1, speed=speed? speed*1 : 30, opinc=opinc&&opinc>=1? opinc*(fade.ie? 1 : .01) : opinc? opinc : fade.ie? 5 : .05,
op=op&&fade.ie? op*1 : op&&op*1>=1? Math.min(op*.01, .99) : op? op : waym>0&&fade.ie? 100 : waym>0? .99 : 0;
if(!fade.ie6&&!fade[id+'yet']){
if(fade.prprt)
op_obj[fade.prprt]=Math.min(fade.preset(id)*.01, .99);
else if(fade.ie)
op_obj.filter='alpha(opacity='+fade.preset(id)+')';
fade[id+'yet']=true;
}
if(fade.prprt&&Math.abs(op*1-op_obj[fade.prprt]*1)<opinc)
op_obj[fade.prprt]=op;
else if(fade.prprt)
op_obj[fade.prprt]=fade.ie6? op_obj[fade.prprt]*1 + opinc*waym : Math.min(op_obj[fade.prprt]*1 + opinc*waym, .99);
else if (fade.ie&&Math.abs(op*1 - op_obj.filter.replace(/\D/g,'')*1)<opinc)
op_obj.filter='alpha(opacity='+op+')';
else if (fade.ie)
op_obj.filter='alpha(opacity='+[op_obj.filter.replace(/\D/g,'')*1 + opinc*waym]+')';
else
return;
if(op_obj[fade.prprt]&&op_obj[fade.prprt]*waym<op*waym||!fade.ie6&&fade.ie&&op_obj.filter.replace(/\D/g,'')*waym<op*waym)
fade[id+'timer']=setTimeout(function(){fade(el, way, op, opinc, speed)}, speed);
}
if(document.documentElement&&document.documentElement.style){
fade.d=document.documentElement, fade.t=function(o){return typeof fade.d.style[o]=='string'}; if(fade.d.filters)
document.write('<span id="ie_test" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0);position:absolute;top:-1000px;">p<\/span>');
fade.ie=fade.d.filters&&ie_test.filters[0], fade.ie6=fade.ie&&typeof ie_test.filters[0].opacity=='number',
fade.prprt=fade.t('opacity')||fade.ie6? 'opacity' : fade.t('MozOpacity')? 'MozOpacity' : fade.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
}
fade.set=function(){
var prop=fade.prprt=='opacity'? 'opacity' : fade.prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
document.write('\n<style type="text/css">\n')
for (var i = 0; i < faders.length; i++)
document.write('#'+faders[i][0]+' {\n'+
(fade.ie? 'filter:progid:DXImageTransform.Microsoft.alpha(opacity='+faders[i][1]+')' : prop+':'+Math.min(faders[i][1]*.01, .99))+';\n}\n');
document.write('<\/style>\n')
}
fade.preset=function(id){
for (var i = 0; i < faders.length; i++)
if (id==faders[i][0])
return faders[i][1];
return 0;
}
if(fade.prprt||fade.ie)
fade.set();
</script>
</head>
<body>
<script type="text/javascript">
(function(){
var i=0, myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[0]="files/photo1.jpg"
myimages[1]="files/photo2.jpg"
myimages[2]="files/photo3.jpg"
myimages[3]="files/photo4.jpg"
myimages[4]="files/photo5.jpg"
myimages[5]="files/photo6.jpg"
var change=function(){
document.getElementById('randm').style.backgroundImage="url("+document.getElementById('rand').src+")";
fade('rand', 'out', 0, 150);
setTimeout(function(){document.getElementById('rand').src=myimages[(i++<myimages.length-1? i : i=0)];},30);
}
myimages.sort(function() {return 0.5 - Math.random();});
document.write('<div id="randm"><img id="rand" onload="fade(this, \'in\', 100, 2, 30);" src="'+myimages[i++]+'" border=0><\/div>')
setInterval(function(){change();}, 4000);
})();
</script>
</body>
</html>
Random Images, How To Fade Them In? - Please Help :)
Reply With Quote
Bookmarks