Slideshow
Version 1.07
written by Gerald Holdsworth

When you have a collection of photographs (or other images), but do not want to display them all at the same time, you could put them in a slideshow. This fades the pictures in and out, and has a nice border.

Click here for a demo

Stylesheet for 'Slideshow':
.slideshow
{
 overflow:hidden;
}
.ssimages
{
 visibility:hidden;
 position:absolute;
 width:0px;
 height:0px;
 overflow:hidden;
}
Javascript for 'Slideshow':
// Enclose your pictures in a div. id will be the name of the slideshow referenced by the initSlideshow function. The style's width and height should be
// bigger than the biggest picture, with space to spare for any descriptions, if you have any. The other attributes are:
// fadetime : Time (in ms) between successive fadings (a complete fade will take 10 times this value)
// slidetime : Time (in ms) that a slide will stay on screen for
// maxsize : maximum size of picture (along longest side). Pictures will be scaled to fit.
// random : Whether to start at the beginning (set to '0') or a random starting point ('1')
// hcentre and vcentre : Whether to centralise the pictures within the parent div (horizontal and vertical - 0 for no, and 1 for yes)
//
// add the onLoad event into the last image. This will ensure that the pictures will load before the slideshow starts.
// The only attribute that should be passed in this function is the id of the slideshow div.
// You will also need the transparent.gif file, which prevents visitors from right-clicking and saving your pictures.
//
function changePicture(elName)
{
 var maxsize=document.getElementById(elName).getAttribute('maxsize');
 var div_el=document.getElementById(elName);
 var i,el,j;
 for (i=0;i<document.getElementById(elName).childNodes.length;i++)
  if (document.getElementById(elName).childNodes[i].id=='ssloading') el=document.getElementById(elName).childNodes[i];
 if (el) document.getElementById(elName).removeChild(el);
 for (i=0;i<div_el.childNodes.length;i++)
 {
  if (div_el.childNodes[i].id=='picture')
  {
   el=div_el.childNodes[i];
   j=i;
  }
  if (div_el.childNodes[i].id=='pictitle') var el_tit=div_el.childNodes[i];
  if (div_el.childNodes[i].id=='picdesc') var el_des=div_el.childNodes[i];
 }
 var o=parseFloat(el.style.opacity);
 o=Math.round(o*10)/10;
 if (o>=1) ss_fadeOut(elName,j);
 if (o==0)
 {
  var curr=el.src;
  i=0;
  while (div_el.childNodes[i].tagName!=='DIV')
  {
   i++;
  }
  var pics_el=div_el.childNodes[i];
  var pictures=new Array();
  var titles=new Array();
  var picwid=new Array();
  var pichei=new Array();
  var desc=new Array();
  for (i=0;i<pics_el.childNodes.length;i++)
  if (pics_el.childNodes[i].tagName=='IMG')
  {
   pictures.push(pics_el.childNodes[i].src);
   picwid.push(pics_el.childNodes[i].width);
   pichei.push(pics_el.childNodes[i].height);
   titles.push(pics_el.childNodes[i].title);
   desc.push(pics_el.childNodes[i].getAttribute('desc'));
  }
  var index=0;
  while (curr!==pictures[index] && index<pictures.length)
  {
   index++;
  }
  if (curr=='')
  {
   if (document.getElementById(elName).getAttribute('random')=='1') index=Math.floor(Math.random()*pictures.length);
   else index=-1;
  }
  if (index>=pictures.length-1) index=-1;
  el.src=pictures[index+1];
  var magnify;
  if (picwid[index+1]>pichei[index+1]) magnify=maxsize/picwid[index+1];
  else magnify=maxsize/pichei[index+1];
  var w=Math.round(picwid[index+1]*magnify);
  var h=Math.round(pichei[index+1]*magnify);
  el.style.width=w+'px';
  el.style.height=h+'px';
  if (document.getElementById(elName).getAttribute('vcentre')=='1')
   el.style.top=((Math.round(div_el.offsetHeight-h)/2)+getPosition(div_el,0))+'px';
  else
   el.style.top=getPosition(div_el,0)+'px';
  if (document.getElementById(elName).getAttribute('hcentre')=='1')
   el.style.left=((Math.round(div_el.offsetWidth-w)/2)+getPosition(div_el,1))+'px';
  else
   el.style.left=getPosition(div_el,1)+'px';
  el_tit.innerHTML=titles[index+1];
  if (desc[index+1]!==null) el_des.innerHTML=desc[index+1];
  else el_des.innerHTML='';
  el_des.style.top=(getPosition(el,0)+h+8)+'px';
  el_des.style.left=(getPosition(div_el,1)+8)+'px';
  el_tit.style.width=(w-16)+'px';
  el_tit.style.top=((getPosition(el,0)+h)-el_tit.offsetHeight)+'px';
  el_tit.style.left=(getPosition(el,1)+12)+'px';
  ss_fadeIn(elName,j);
 }
}
function ss_fadeOut(elName,i)
{
 var fadeTime=document.getElementById(elName).getAttribute('fadetime');
 var el=document.getElementById(elName).childNodes[i];
 var o=parseFloat(el.style.opacity);
 o=Math.round(o*10)/10;
 if (o>0)
 {
  if (o<=0.7) document.getElementById(elName).childNodes[i+1].style.opacity=o-0.1;
  el.style.opacity=o-0.1;
  document.getElementById(elName).childNodes[i+2].style.opacity=o-0.1;
  setTimeout('ss_fadeOut(\''+elName+'\','+i+')',fadeTime);
 }
 else changePicture(elName);
}
function ss_fadeIn(elName,i)
{
 var fadeTime=document.getElementById(elName).getAttribute('fadetime');
 var el=document.getElementById(elName).childNodes[i];
 var o=parseFloat(el.style.opacity);
 o=Math.round(o*10)/10;
 if (o<1)
 {
  el.style.opacity=o+0.1;
  if (o<=0.7) document.getElementById(elName).childNodes[i+1].style.opacity=o+0.1;
  document.getElementById(elName).childNodes[i+2].style.opacity=o+0.1;
  setTimeout('ss_fadeIn(\''+elName+'\','+i+')',fadeTime);
 }
}
function initSlideshow(elName)
{
 var slideTime=document.getElementById(elName).getAttribute('slidetime');
 var i,el;
 var e=document.createElement('img');
 e.id='picture';
 e.style.position='absolute';
 e.style.border='5px ridge';
 e.style.opacity='0';
 e.style.src='';
 document.getElementById(elName).appendChild(e);
 e=document.createElement('div');
 e.id='pictitle';
 e.style.position='absolute';
 e.style.fontWeight='bold';
 e.style.color='#FFFFFF';
 e.style.backgroundColor='#000000';
 e.style.textAlign='center';
 e.style.opacity='0.7';
 document.getElementById(elName).appendChild(e);
 e=document.createElement('div');
 e.id='picdesc';
 e.style.position='absolute';
 e.style.width=document.getElementById(elName).style.width;
 document.getElementById(elName).appendChild(e);
 e=document.createElement('img');
 e.style.opacity='1';
 e.setAttribute('src','transparent.gif');
 e.style.position='absolute';
 e.style.top=getPosition(document.getElementById(elName),0)+'px';
 e.style.left=getPosition(document.getElementById(elName),1)+'px';
 e.style.width=document.getElementById(elName).style.width;
 e.style.height=document.getElementById(elName).style.height;
 document.getElementById(elName).appendChild(e);
 setInterval("changePicture('"+elName+"')",slideTime);
}
function getPosition(id,x)
{
 var obj=id;
 var topValue= 0,leftValue= 0;
 while(obj)
 {
  leftValue+= obj.offsetLeft;
  topValue+= obj.offsetTop;
  obj= obj.offsetParent;
 }
 if (x==0) finalvalue = topValue; else finalvalue=leftValue;
 return finalvalue;
}
Click here to download.

If you would like to email me, put gerald@ in front of the domain name, insead of www..
©2011-2020 Gerald Holdsworth IT Services