See also Floating Image Gallery2
The images can be set to scroll in a randomly selected direction or seqencially down, left, up, or right
You can select the number of images to be shown by changing the value of variable numOfPics
The script can be set to show the images at random or in sequence from the selection contained in the array.
A random scroll speed and opacity value is chosen every time an image changes.
Dial-up users may notice a delay while the 8 example images load.
Please be patient as this may take a minite, thank you.
<HTML>
<HEAD>
<TITLE>Floating Image Gallery</TITLE>
<script type="text/javascript">
<!--
// Jeff
// www.huntingground.freeserve.co.uk
oPics=new Array()
oPics[oPics.length]="pic01.jpg"
oPics[oPics.length]="pic02.jpg"
oPics[oPics.length]="pic03.jpg"
oPics[oPics.length]="pic04.jpg"
oPics[oPics.length]="pic05.jpg"
oPics[oPics.length]="pic06.jpg"
oPics[oPics.length]="pic07.jpg"
oPics[oPics.length]="pic08.jpg"
numOfPics=4 // how many images to scroll
imageSize=25 // % size image is shown at, if set to zero picWidth and picHeight are used
picWidth=100 // applies to all image widths
picHeight=100 // applies to all image heights
randomPics = 0 // 0 = sequencial, 1 = random
randomEntry=0 // 0 = sequencial, 1 = random, images entry point, top right bottom left
op=100 // set to zero for random opacity or set value
maxStep=5 // scroll steps
startPos=0
if(numOfPics>oPics.length){
numOfPics=oPic.length
}
var storedImage=new Array()
for(var i=0;i<oPics.length;i++) {
storedImage[i]=new Image()
storedImage[i].src=oPics[i]
}
op=0
posX=new Array()
posY=new Array()
stepX=new Array()
stepY=new Array()
for(var i=0;i<numOfPics;i++){
document.write("<img id='Obj" + i + "' src='' style='position:absolute;left:0; top:0;visibility:hidden;filter:alpha(opacity="+op+");-moz-opacity:"+op/100+"'>")
}
function initFloat(){
pageWidth=(!window.innerWidth?document.body.clientWidth:window.innerWidth)
pageHeight=(!window.innerHeight?document.body.clientHeight:window.innerHeight)
for(var j=0;j<numOfPics;j++){
posX[j]=-1000
posY[j]=0
stepX[j]=0
stepY[j]=0
}
animate()
}
picNum= -1
function animate(){
for(var k=0;k<numOfPics;k++){
posX[k]+=stepX[k]
posY[k]+=stepY[k]
imgObj=document.getElementById("Obj"+k)
if (posX[k]<-imgObj.offsetWidth || posX[k]>pageWidth || posY[k]<-imgObj.offsetHeight || posY[k]>pageHeight){ // edge
if(randomPics==1){
picNum=Math.floor(Math.random()*oPics.length)
}
else{
picNum++
if(picNum==oPics.length){
picNum=0
}
}
imgObj.src=storedImage[picNum].src
if(imageSize!=0){
imageWidth=storedImage[picNum].width/100*imageSize
imageHeight=storedImage[picNum].height/100*imageSize
}
else{
imageWidth=picWidth
imageHeight=picHeight
}
if(picHeight==0){
imageHeight=storedImage[picNum].height
}
else{
imageHeight=picHeight
}
imgObj.style.width=imageWidth
imgObj.style.height=imageHeight
if(randomEntry==0){
startPos++
if(startPos==5){startPos=1}
}
else{
startPos=1+Math.floor(Math.random()*4)
}
switch(startPos){
case 1: // top
posX[k]=Math.floor(Math.random()*(pageWidth-imageWidth))
posY[k]=-imageHeight
stepX[k]=0
stepY[k]=Math.floor(5+Math.random()*maxStep)
break;
case 2: // right
posX[k]=pageWidth
posY[k]=Math.floor(Math.random()*(pageHeight-imageHeight))
stepX[k]=-Math.floor(5+Math.random()*maxStep)
stepY[k]=0
break;
case 3: // bottom
posX[k]=Math.floor(Math.random()*(pageWidth-imageWidth))
posY[k]=pageHeight
stepX[k]=0
stepY[k]=-Math.floor(5+Math.random()*maxStep)
break;
case 4: // left
posX[k]=-imageWidth
posY[k]=Math.floor(Math.random()*(pageHeight-imageHeight))
stepX[k]=Math.floor(5+Math.random()*maxStep)
stepY[k]=0
break;
}
if(op==0){
op=25+Math.floor(Math.random()*75)
}
if(!window.innerWidth){imgObj.filters.alpha.Opacity=op}
else{imgObj.style.MozOpacity=(op/100)-0.001}
}
imgObj.style.left=posX[k] // x position
imgObj.style.top=posY[k] // y position
imgObj.style.visibility="visible"
}
setTimeout("animate()", 60) // speed
}
// add onload="initFloat()" to the opening BODY tag
// -->
</script>
<style>
body{overflow:hidden}
</style>
</HEAD>
<BODY onload="initFloat()">
<h1>Floating Image Gallery</h1>
</BODY>
</HTML>