PDA

View Full Version : Stop the multiframe image slideshow on mouseover



rispud
01-20-2013, 11:14 PM
MultiFrame Image slideshow

http://www.dynamicdrive.com/dynamicindex14/multiframeslide.htm

Can someone help me put some code into this so that on mouseover the slideshow will stop until the mouse is moved away again.

I am not a programmer, but if I put the onmousover code anywhere into the code, it gives me a blank screen. I now give up!

Thanks.

vwphillips
01-21-2013, 01:28 AM
<!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>
<title></title>
<style type="text/css">

/*set CSS for SPAN tag surrounding each image*/
.seqslidestyle{
margin-right: 15px;
}
</style></head>

<body>

<script type="text/javascript">

/***********************************************
* MultiFrame Image Slideshow script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var seqslides=new Array()
//Set Path to Image plus optional URL ("" for no URL):
seqslides[0]=["http://www.vicsjavascripts.org.uk/StdImages/1.gif", "http://www.dynamicdrive.com"]
seqslides[1]=["http://www.vicsjavascripts.org.uk/StdImages/2.gif", "http://www.javascriptkit.com"]
seqslides[2]=["http://www.vicsjavascripts.org.uk/StdImages/3.gif", "http://www.google.com"]
seqslides[3]=["http://www.vicsjavascripts.org.uk/StdImages/4.gif", "http://www.yahoo.com"]
seqslides[4]=["http://www.vicsjavascripts.org.uk/StdImages/5.gif", "http://www.google.com"]

//Set pause between each image display (2000=2 second):
var slidedelay=2000

//Set how many images to show at once (must be less than total # of images above):
var slidestoreveal=3

//Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout)
//"" for none (or horizontal):
var slideseparater="<br>"

//Set optional link target to be added to all images with a link:
var optlinktarget="secwindow"

//Set image border width:
var imgborderwidth=0

//Set opacity value of each image when it's "dimmed", and when it's not, respectively (1=100% opaque/normal).
//Change 0.2 to 0 to completely hide image when it's dimmed:
var opacityvalues=[0.2,1]

///No need to edit beyond here///////////

function processimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

var curslide=1 //var to track current slide (total: slidestoreveal)
var curimgindex=0 //var to track current image (total: seqslides.length)
var isfirstcycle=1 //boolean to indicate whether this is the first cycle

if (document.getElementById){
for (i=0;i<slidestoreveal;i++)
document.write('<span id="seqslide'+i+'" class="seqslidestyle" onmouseover="pause();" onmouseout="run();" >'+processimgcode(seqslides[i])+'</span>'+slideseparater)
curimgindex=slidestoreveal
illuminateslide(0,opacityvalues[1])
}

function illuminateslide(slideindex, amt){
var slideobj=document.getElementById("seqslide"+slideindex).getElementsByTagName("IMG")[0]
if (slideobj.filters)
slideobj.filters.alpha.opacity=amt*100
else if (slideobj.style.MozOpacity)
slideobj.style.MozOpacity=amt
}

function displayit(){
if (curslide<slidestoreveal){
if (!isfirstcycle)
changeimage(curslide)
illuminateslide(curslide, opacityvalues[1])
curslide++
}
else{
isfirstcycle=0
for (i=0;i<slidestoreveal;i++)
illuminateslide(i, opacityvalues[0])
changeimage(0)
illuminateslide(0, opacityvalues[1])
curslide=1
}
}

function changeimage(slideindex){
document.getElementById("seqslide"+slideindex).innerHTML=processimgcode(seqslides[curimgindex])
curimgindex++
if (curimgindex>=seqslides.length)
curimgindex=0
}

function pause(){
clearTimeout(run.to);
}

function run(){
run.to=setInterval("displayit()",slidedelay)
}

run();
</script>

<p style="font: normal 12px Arial">This free script provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></p>
</body>

</html>

rispud
01-23-2013, 05:39 PM
Hi Vic,

I wrote yesterday but I do not think I replied in the right place.

You seem to know what you are doing. Do you have any idea on how to stop the images jumping as they load for the first time?

Here is the URL. http://larochedesigns.com/photogallery.html You will see what I mean. After the first circuit it is great.

All the best,

Chris

vwphillips
01-24-2013, 01:38 PM
<!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=t ypeof(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>