PDA

View Full Version : Random Images, How To Fade Them In? - Please Help :)



countryfan
09-02-2007, 03:09 PM
So, here's the problem. I'm using the following script to make images appear randomly each time the page is loaded. But I'm not really a wiz at writing code and am not sure how I make the images fade-in each time. I don't want a slideshow, I'd just like them to fade-in using HTML.

Any help is greatly appreciated, and I THANK YOU in advance. :D
--------------------------------------------------------------------------
<script language="JavaScript">

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="img1.jpg"
myimages[2]="img2..jpg"
myimages[3]="img3.jpg"

//specify corresponding links below
var imagelinks=new Array()
var ry=Math.floor(Math.random()*myimages.length)

if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0></a>')
}

random_imglink()
</script>

Ryan Fitton
09-02-2007, 09:22 PM
this code is not html it is javascript anf I think you are only going to be able to make the images fade in using javascript not just html on it own. :)

jscheuer1
09-02-2007, 10:31 PM
<!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">
<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 random_imglink(){
var 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.sort(function() {return 0.5 - Math.random();});
document.write('<img id="rand" onload="fade(this, \'in\', 100, 2, 30);" src="'+myimages[0]+'" border=0></a>')
}

random_imglink()
</script>
</body>
</html>

Sidney
09-11-2007, 12:36 PM
Hey John,

This is a great little script :)

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.

Many thanks in advance,

Sidney

boogyman
09-11-2007, 12:57 PM
myimages.sort(function() {return 0.5 - Math.random();});
document.write('<img id="rand" onload="fade(this, \'in\', 100, 2, 30);" src="'+myimages[0]+'" border=0></a>')
}

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

jscheuer1
09-11-2007, 03:01 PM
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?


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:


<!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>

Sidney
09-12-2007, 02:16 PM
Hi John,
Thank you that is superb :)
I've got it working great in IE, but in Firefox it goes a bit crazy (fades stop short, images seem to load suddenly with no fade), and even crashed my Firefox (v 2.0.0.6 running on XP). Any ideas?
Many Thanks again,
Sid

madina
09-13-2007, 05:30 AM
This is great!
However is it possible to add a URL link to each of the images?