www.webdeveloper.com
Results 1 to 3 of 3

Thread: Start/Stop buttons for JS slideshow

Hybrid View

  1. #1
    Join Date
    Oct 2009
    Posts
    3

    Question Start/Stop buttons for JS slideshow

    Good evening (or morning) to mighty web developers smarter than I!

    I am using JavaScript to create a slide show with fade out/in. There are two images shown simultaneously and they must stay in sync.

    I want to add a Pause and Restart button that will allow the visitor to stop the slide show (both images) and restart the slide show (again, both images simultaneously).

    Much appreciation for thoughtful replies!

    Here's my 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>Gallery</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="language" content="en-us" />

    <!--
    <script language="JavaScript" type="text/JavaScript" src="../JS/FILE NAME.js"></script>
    -->

    <link type="text/css" rel="stylesheet" href="./CSS/style1.css"/>

    <script type="text/JavaScript">

    <!-- Original: CodeLifter.com (support@codelifter.com) -->
    <!-- Web Site: http://www.codelifter.com -->

    <!-- Begin
    // Set slideShowSpeed (milliseconds)
    var slideShowSpeed = 4000;
    // Duration of crossfade (seconds)
    var crossFadeDuration = 3;
    // Specify the image files
    var Pic = new Array();
    var Pic2 = new Array();

    // to add more images, just continue
    // the pattern, adding to the array below

    Pic[0] = 'images/pic0001.jpg'
    Pic[1] = 'images/pic0002.jpg'
    Pic[2] = 'images/pic0003.jpg'
    Pic[3] = 'images/pic0004.jpg'
    Pic[4] = 'images/pic0005.jpg'
    Pic[5] = 'images/pic0006.jpg'
    Pic[6] = 'images/pic0007.jpg'
    Pic[7] = 'images/pic0008.jpg'
    Pic[8] = 'images/pic0009.jpg'
    Pic[9] = 'images/pic0010.jpg'
    Pic[10] = 'images/pic0011.jpg'
    Pic[11] = 'images/pic0012.jpg'
    Pic[12] = 'images/pic0013.jpg'
    Pic[13] = 'images/pic0014.jpg'
    Pic[14] = 'images/pic0015.jpg'


    // /*
    Pic2[0] = 'images/pic0001a.jpg'
    Pic2[1] = 'images/pic0002a.jpg'
    Pic2[2] = 'images/pic0003a.jpg'
    Pic2[3] = 'images/pic0004a.jpg'
    Pic2[4] = 'images/pic0005a.jpg'
    Pic2[5] = 'images/pic0006a.jpg'
    Pic2[6] = 'images/pic0007a.jpg'
    Pic2[7] = 'images/pic0008a.jpg'
    Pic2[8] = 'images/pic0009a.jpg'
    Pic2[9] = 'images/pic0010a.jpg'
    Pic2[10] = 'images/pic0011a.jpg'
    Pic2[11] = 'images/pic0008a.jpg'
    Pic2[12] = 'images/pic0008a.jpg'
    Pic2[13] = 'images/pic0008a.jpg'
    Pic2[14] = 'images/pic0008a.jpg'

    // */


    // do not edit anything below this line
    var t;
    var tt;
    var j = 0;
    var jj = 0;
    var p = Pic.length;
    var pp = Pic2.length;
    var preLoad = new Array();
    var preLoad2 = new Array();
    for (i = 0; i < p; i++)
    {
    preLoad[i] = new Image();
    preLoad[i].src = Pic[i];
    }
    for (ii = 0; ii < pp; ii++)
    {
    preLoad2[ii] = new Image();
    preLoad2[ii].src = Pic2[ii];
    }

    function runSlideShow()
    {
    if (document.all)
    {
    document.images.SlideShow.style.filter="blendTrans(duration=2)";
    document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
    document.images.SlideShow.filters.blendTrans.Apply();
    document.images.SlideShow2.style.filter="blendTrans(duration=2)";
    document.images.SlideShow2.style.filter="blendTrans(duration=crossFadeDuration2)";
    document.images.SlideShow2.filters.blendTrans.Apply();
    }

    document.images.SlideShow.src = preLoad[j].src;
    document.images.SlideShow2.src = preLoad2[jj].src;

    if (document.all)
    {
    document.images.SlideShow.filters.blendTrans.Play();
    document.images.SlideShow2.filters.blendTrans.Play();
    }

    j = j + 1;
    jj = jj + 1;

    if (j > (p - 1))
    j = 0;
    if (jj > (pp - 1))
    jj = 0;

    t = setTimeout('runSlideShow()', slideShowSpeed);
    }
    // End -->
    </script>

    </head>

    <body onload="runSlideShow()">

    <!--CONTENT-->
    <div id="content" style="background: rgb(255,255,93)" >

    <table border="0" cellpadding="4" cellspacing="10" align="center" >
    <tr>
    <td id="VU" width="70%" >
    <img name="SlideShow" src="images/pic0001.jpg" alt="" border="5"/>
    </td>

    <td id="VU2" width="30%">
    <img name="SlideShow2" src="images/pic0001a.jpg" alt="" border="2"/>
    </td>
    </tr>
    </table>

    <!--CLOSE CONTENT-->
    </div>

    </body>

    </html>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,682
    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>Gallery</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="language" content="en-us" />
    
    <!--
    <script language="JavaScript" type="text/JavaScript" src="../JS/FILE NAME.js"></script>
    -->
    
    <link type="text/css" rel="stylesheet" href="./CSS/style1.css"/>
    
    <script type="text/JavaScript">
    
    <!-- Original: CodeLifter.com (support@codelifter.com) -->
    <!-- Web Site: http://www.codelifter.com -->
    
    <!-- Begin
    // Set slideShowSpeed (milliseconds)
    var slideShowSpeed = 4000;
    // Duration of crossfade (seconds)
    var crossFadeDuration = 3;
    // Specify the image files
    var Pic = new Array();
    var Pic2 = new Array();
    
    // to add more images, just continue
    // the pattern, adding to the array below
    
    Pic[0] = 'images/pic0001.jpg'
    Pic[1] = 'images/pic0002.jpg'
    Pic[2] = 'images/pic0003.jpg'
    Pic[3] = 'images/pic0004.jpg'
    Pic[4] = 'images/pic0005.jpg'
    Pic[5] = 'images/pic0006.jpg'
    Pic[6] = 'images/pic0007.jpg'
    Pic[7] = 'images/pic0008.jpg'
    Pic[8] = 'images/pic0009.jpg'
    Pic[9] = 'images/pic0010.jpg'
    Pic[10] = 'images/pic0011.jpg'
    Pic[11] = 'images/pic0012.jpg'
    Pic[12] = 'images/pic0013.jpg'
    Pic[13] = 'images/pic0014.jpg'
    Pic[14] = 'images/pic0015.jpg'
    
    
    // /*
    Pic2[0] = 'images/pic0001a.jpg'
    Pic2[1] = 'images/pic0002a.jpg'
    Pic2[2] = 'images/pic0003a.jpg'
    Pic2[3] = 'images/pic0004a.jpg'
    Pic2[4] = 'images/pic0005a.jpg'
    Pic2[5] = 'images/pic0006a.jpg'
    Pic2[6] = 'images/pic0007a.jpg'
    Pic2[7] = 'images/pic0008a.jpg'
    Pic2[8] = 'images/pic0009a.jpg'
    Pic2[9] = 'images/pic0010a.jpg'
    Pic2[10] = 'images/pic0011a.jpg'
    Pic2[11] = 'images/pic0008a.jpg'
    Pic2[12] = 'images/pic0008a.jpg'
    Pic2[13] = 'images/pic0008a.jpg'
    Pic2[14] = 'images/pic0008a.jpg'
    
    // */
    
    
    // do not edit anything below this line
    var t;
    var tt;
    var j = 0;
    var jj = 0;
    var p = Pic.length;
    var pp = Pic2.length;
    var preLoad = new Array();
    var preLoad2 = new Array();
    for (i = 0; i < p; i++)
    {
    preLoad[i] = new Image();
    preLoad[i].src = Pic[i];
    }
    for (ii = 0; ii < pp; ii++)
    {
    preLoad2[ii] = new Image();
    preLoad2[ii].src = Pic2[ii];
    }
    
    function runSlideShow(stop)
    {
    clearTimeout(t);
    if (stop) return;
    if (document.all)
    {
    document.images.SlideShow.style.filter="blendTrans(duration=2)";
    document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
    document.images.SlideShow.filters.blendTrans.Apply();
    document.images.SlideShow2.style.filter="blendTrans(duration=2)";
    document.images.SlideShow2.style.filter="blendTrans(duration=crossFadeDuration2)";
    document.images.SlideShow2.filters.blendTrans.Apply();
    }
    
    document.images.SlideShow.src = preLoad[j].src;
    document.images.SlideShow2.src = preLoad2[jj].src;
    
    if (document.all)
    {
    document.images.SlideShow.filters.blendTrans.Play();
    document.images.SlideShow2.filters.blendTrans.Play();
    }
    
    j = j + 1;
    jj = jj + 1;
    
    if (j > (p - 1))
    j = 0;
    if (jj > (pp - 1))
    jj = 0;
    
    t = setTimeout('runSlideShow()', slideShowSpeed);
    }
    // End -->
    </script>
    
    </head>
    
    <body onload="runSlideShow()">
    
    <!--CONTENT-->
    <div id="content" style="background: rgb(255,255,93)" >
    
    <table border="0" cellpadding="4" cellspacing="10" align="center" >
    <tr>
    <td id="VU" width="70%" >
    <img name="SlideShow" src="images/pic0001.jpg" alt="" border="5"/>
    </td>
    
    <td id="VU2" width="30%">
    <img name="SlideShow2" src="images/pic0001a.jpg" alt="" border="2"/>
    </td>
    </tr>
    </table>
    <input type="button" name="" value="Start" onclick="runSlideShow();"/>
    <input type="button" name="" value="Stop" onclick="runSlideShow('Stop');"/>
    <!--CLOSE CONTENT-->
    </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/

  3. #3
    Join Date
    Oct 2009
    Posts
    3

    Thumbs up Start/Stop buttons for JS slideshow - resolved

    Thank-u, Vic! Perfect-0. Simple. Practically obvious.

    I'll check out your website too. Maybe I can learning something.

    RedTomato

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles