Web Design 1 - HTML Lesson 17 - Revolving Photo Gallery

Adding a revolving photo gallery

There are several ways to do this, but here is some simple code. All you need to have ready are some images that match the size of your gallery display settings, and the HTML/JavaScript code.

We are using the <script></script> tag - this allows you to run another program on your webpage

In this case we are enclosing a javascript program. You already know HTML, Javascript is just another language: You don't have to know how to write javascript - just edit the code where noted.

To get started I resized three photos so they are all 300px wide by 200px high -
When doing this in photoshop, if you uncheck the constrain proportions box then you can control the exact width/height sizes

So, here are three images for practice. You can just copy them for this first exercise.


Now add the following code to your web page

Place it wherever you want the photos to show up:

<script language="JavaScript1.2">
var slideshow_width='300px' //SET IMAGE WIDTH
var slideshow_height='200px' //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (6000=6 seconds)

var fadegraphics=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadegraphics[0]="images/random-1.jpg"
fadegraphics[1]="images/random-2.jpg"
fadegraphics[2]="images/random-3.jpg"

////NO need to edit beyond here/////////////

var preloadedgraphics=new Array()
for (p=0;p<fadegraphics.length;p++){
preloadedgraphics[p]=new Image()
preloadedgraphics[p].src=fadegraphics[p]
}

var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadegraphics[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1

function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadegraphics[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadegraphics.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.graphics.defaultslide.src=fadegraphics[curimageindex]
curimageindex=(curimageindex<fadegraphics.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadegraphics[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>