Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator" content="Adobe GoLive" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>La Roche Designs - Photo Gallery</title>
<style type="text/css" media="screen"><!--
.link { color: #cab1b1; text-decoration: none; }
--></style>
<style type="text/css">
#images {
text-Align:center;
width:100%;
}
#images IMG {
margin-right: 15px;
}
/*set CSS for SPAN tag surrounding each image*/
.seqslidestyle{
margin-right: 15px;
}
</style></head>
<body bgcolor="#505340" link="#cab1b1" vlink="#9a9eb4">
<div align="center">
<p><br>
<p><font size="-1" color="#cab1b1">Place cursor over image to pause.</font></p><br>
<div id="images" onmouseover="zxcMultiFrameSS.Pause('images')" onmouseout="zxcMultiFrameSS.Auto('images')" >
<a><img src="http://www.vicsjavascripts.org.uk/StdImages/0.gif" alt="img" /></a>
<a><img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="img" /></a>
<a><img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" alt="img" /></a>
</div>
<br />
<script type="text/javascript">
// Multi Frame Slide Show (24-January-2013)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcMultiFrameSS={
init:function(o){
var oop=this,id=o.ID,ary=o.ImageArray,op=o.Opacity,ms=o.FadeDuration,hold=o.AutoRotateHold,obj=document.getElementById(id),imgs=obj.getElementsByTagName('IMG'),ms=typeof(ms)=='number'?ms:1000,iary=[],nu=imgs.length,z0=0;
for (var z0=0;z0<nu;z0++){
this.opac(imgs[z0],z0>0?op:100);
iary[z0]=[imgs[z0],new Image()];
}
o=zxcMultiFrameSS['zxc'+id]={
id:id,
obj:obj,
ary:ary,
iary:iary,
op:op,
ms:ms,
hold:typeof(hold)=='number'?hold:ms*4,
lgth:ary.length,
nu:nu,
cnt:nu-1,
auto:true
}
o.to=setTimeout(function(){ oop.rotate(o,1,true); },o.hold);
},
Pause:function(id){
o=zxcMultiFrameSS['zxc'+id];
if (o){
clearTimeout(o.dly);
o.auto=false;
}
},
Auto:function(id){
o=zxcMultiFrameSS['zxc'+id],oop=this;
if (o){
o.dly=setTimeout(function(){ oop.rotate(o,1000,true); },500);
}
},
rotate:function(o,nu,auto){
nu=nu||0;
if (nu<o.nu){
this.animate(o,o.iary[nu],o.op,100,new Date(),o.ms,nu);
}
else if (auto){
o.auto=true;
for (var nu=o.cnt,z0=0;z0<o.nu;z0++){
clearTimeout(o.iary[z0][3]);
nu=++nu%o.lgth;
o.iary[z0][1].src=o.ary[nu][0];
o.iary[z0][2]=nu;
}
this.load(o,nu);
}
},
load:function(o,nu){
for (var oop=this,z0=0;z0<o.nu;z0++){
if (o.iary[z0][1].width<40){
o.to=setTimeout(function(){ oop.load(o,nu); },200);
return;
}
}
o.to=setTimeout(function(){ oop.group(o,nu); },o.hold);
},
group:function(o,nu){
o.cnt=nu%o.lgth;
for (var oop=this,img,p,z0=0;z0<o.nu;z0++){
img=o.iary[z0][0];
p=img.parentNode;
p.removeAttribute('href');
if (o.ary[o.iary[z0][2]][1]){
p.href=o.ary[o.iary[z0][2]][1];
}
img.removeAttribute('title');
if (o.ary[o.iary[z0][2]][2]){
img.title=o.ary[o.iary[z0][2]][2];
}
this.opac(img,o.op);
img.src=o.iary[z0][1].src;
}
o.to=setTimeout(function(){ oop.rotate(o,0,true); },o.hold);
},
animate:function(o,ary,f,t,srt,mS,nu){
clearTimeout(ary[3]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
this.opac(ary[0],n);
}
if (ms<mS){
ary[3]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,nu); },10);
}
else {
oop.rotate(o,++nu,o.auto);
}
},
opac:function(o,n){
o.style.filter='alpha(opacity='+n+')';
o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
}
}
zxcMultiFrameSS.init({
ID:'images', // the unique ID name of the parent element. (string)
ImageArray:[ // an array of arrays defining the image data. (array)
// field 0 = the image SRC.
// field 1 = (optional) the image link HREF.
// field 2 = (optional) the image TITLE.
['http://www.vicsjavascripts.org.uk/StdImages/0.gif','','Image 1'],
['http://www.vicsjavascripts.org.uk/StdImages/1.gif','','Image 2'],
['http://www.vicsjavascripts.org.uk/StdImages/2.gif','','Image 3'],
['http://www.vicsjavascripts.org.uk/StdImages/3.gif','#','Image 4'],
['http://www.vicsjavascripts.org.uk/StdImages/4.gif','','Image 5'],
['http://www.vicsjavascripts.org.uk/StdImages/5.gif','','Image 6'],
['http://www.vicsjavascripts.org.uk/StdImages/6.gif','','Image 7'],
['http://www.vicsjavascripts.org.uk/StdImages/7.gif','','Image 8'],
['http://www.vicsjavascripts.org.uk/StdImages/8.gif','','Image 9'],
['http://www.vicsjavascripts.org.uk/StdImages/9.gif','','Image 10']
],
Opacity:30, //(optional) the minimum opacity(0 to 100). (number, default = 50)
FadeDuration:1000, //(optional) the fade duration in mili seconds. (number, default = 1000)
AutoRotateHold:2000 //(optional) the auto rotate 'hold' delay in mili seconds. (number, default = FadeDuration*4)
})
</script>
<br>
<br>
<br/>
<font color="#cab1b1">Portrait Photography, Animals, Wedding, Special Occasions, Fashion, £100 per shoot plus travel expenses.<br />
All images will be perfectly framed and colour balanced. You will receive your photographs on a memory stick. </font><br />
<font color="#cab1b1">Painted portraits can be directly commissioned from photographs.</font>
<p><font color="#cab1b1">Any special effects commissioned in Photoshop, £25 per hour.<br />
</font></p>
<p><font color="#cab1b1">To discuss requirements or book a photo shoot, please click <a id="Contact_Anthea_De_La_Roche" title="Contact Anthea De La Roche" name="Contact_Anthea_De_La_Roche" href="contact.html" target="_self">CONTACT</a> </font></p>
<p><br />
<font color="#cab1b1"><a title="Return to La Roche Designs Home Page" href="index.html" target="_self">HOME</a></font><br />
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br/>
</p>
<p><font size="-3" color="#bcbcbc">This free script provided by</font><font size="-3"><br />
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
</div>
</body>
</html>
New Comer (less than 5 posts)
Stop the multiframe image slideshow on mouseover
Posting Permissions
Reply With Quote
Bookmarks