Results 1 to 4 of 4

Thread: Stop the multiframe image slideshow on mouseover

  1. #1
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Stop the multiframe image slideshow on mouseover

    MultiFrame Image slideshow

    http://www.dynamicdrive.com/dynamici...frameslide.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.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    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>
      <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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jan 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. MultiFrame Image Slideshow Stop-Start
    By Paulus in forum JavaScript
    Replies: 5
    Last Post: 07-18-2011, 09:09 AM
  2. Multiframe Slideshow: Stop w/Specific Images?
    By PegasusTech in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-07-2010, 12:10 AM
  3. ultimate fadein slideshow-stop pausing on mouseover
    By dwebster in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-01-2007, 03:20 AM
  4. Multiframe Image Slideshow help
    By rajan in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-25-2005, 06:39 AM
  5. MultiFrame Image slideshow IE
    By SweetBlue in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 11-04-2004, 02:53 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •