Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    slideshow with number of first and last images

    only 4 changes to make and your ready to go! Faster than naming all your pictures one by one in an array. You just need to name your pictures 001.jpg, 002.jpg and so on...

    thanks to adios for his help,
    tedamh

    <!-------------- Begin Slideshow ------------------->

    <!-- change the path and name of your first image -->
    <!-- if your images don't all have the same size, just leave out the width and height-->
    <img src="../images/005.jpg" width="640" height="480" name="photoslider">

    <form method="POST" name="rotater">
    <H6 ALIGN="center">

    <script language="JavaScript1.1">

    //from 005.jpg to 018.jpg, change to yours.
    var begin=5
    var end = 18
    var which = begin;

    function geturl(n){
    n = String('00' + n);
    //change "../images/" to your path
    return '../images/' + (n).substring(n.length - 3, n.length) + '.jpg';
    }

    //do not edit after this point
    function backward(){
    if (which>begin){
    window.status=''
    which--
    document.images.photoslider.src=geturl(which);
    }
    }

    function forward(){
    if (which<end){
    which++
    document.images.photoslider.src=geturl(which);
    }
    else window.status='End of gallery'
    }
    </script>


    <input type="button" value="&lt;&lt; Backward" name="B2"
    onClick="backward()"> <input type="button" value="Forward &gt;&gt;" name="B1"
    onClick="forward()"><br>
    <a href="#" onClick="which=begin+1; backward();return false>Start over</a></h6><br>
    </form>


    <!---------------------------- End of slideshow ----------------------->
    Last edited by tedamh; 10-31-2004 at 02:18 PM.

  • #2
    Regular Coder
    Join Date
    Nov 2003
    Location
    Vancouver Island Canada
    Posts
    139
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for the code. I hope you don't mind but I've taken you code and made it work automatically on load but kept the functionality of the buttons for the user to review the show.

    <html>
    <head>
    <title>SlideShow</title>
    <script language="JavaScript1.1">

    var begin=1
    var end = 17
    var which = begin;

    function geturl(n){
    n = String('00' + n);

    return (n).substring(n.length - 3, n.length) + '.jpg';
    }


    function backward(){
    if (which>begin){
    window.status='Enjoy the Show'
    which--
    document.images.photoslider.src=geturl(which);
    document.getElementById('pics').style.display='block';
    }
    }

    function Auto(){
    if (which<end){
    document.images.photoslider.src=geturl(which);
    which++
    setTimeout("Auto()",3000);
    document.getElementById('rotater').style.display='none'
    }
    else {
    document.getElementById('rotater').style.display='block';
    document.getElementById('pics').style.display='none';
    }
    }
    function forward(){
    if (which<end){
    which++
    document.images.photoslider.src=geturl(which);
    document.getElementById('pics').style.display='block';
    }
    else window.status='End of gallery'
    }
    </script>
    </head>
    <body onload = "Auto()">
    <div align = "center" id = pics>
    <img src="001.jpg" name="photoslider">
    </div>






    <div align = "center" id = "rotater">
    <h2> I Hope YOu Enjoyed the Show<br>You may see the pictures again manualy</h2>

    <form >
    <input type="button" value="&lt;&lt; Backward" name="B2"onClick="backward();">
    <input type="button" value="Forward &gt;&gt;" name="B1"onClick="forward()"><br><br>
    <input type="button" value="Back to the beginning" name="B3" onClick="which=begin+1; backward();">

    </form>

    </div>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Dec 2003
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't mind! This is what the forum is for.

    Why not have it both automatic or manual at the same time?

    <html>
    <head>
    <title>SlideShow</title>
    <script language="JavaScript1.1">

    var begin=1
    var end = 17
    var which = begin;

    function geturl(n){
    n = String('00' + n);

    return '../images/' + (n).substring(n.length - 3, n.length) + '.jpg';
    }

    function backward(){
    if (which>begin){
    window.status='Enjoy the Show'
    which--
    document.images.photoslider.src=geturl(which);
    }
    }

    function Auto(){
    if (which<=end){
    document.images.photoslider.src=geturl(which);
    which++
    setTimeout("Auto()",3000);
    }
    else window.status='End of gallery'
    }

    function forward(){
    if (which<end){
    which++
    document.images.photoslider.src=geturl(which);
    }
    else window.status='End of gallery'
    }
    </script>
    </head>
    <body onload = "Auto()">
    <div align = "center">
    <img src="../images/001.jpg" name="photoslider">

    <form >
    <input type="button" value="&lt;&lt; Backward" name="B2"onClick="backward();">
    <input type="button" value="Auto" name="B1"onClick="Auto()">
    <input type="button" value="Forward &gt;&gt;" name="B1"onClick="forward()"><br><br>
    <input type="button" value="Back to the beginning" name="B3" onClick="which=begin+1; backward();">

    </form>

    </div>
    </body>
    </html>

  • #4
    Regular Coder
    Join Date
    Nov 2003
    Location
    Vancouver Island Canada
    Posts
    139
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good Idea. I can't leave this code alone! I've come up with a preload function for the images and got rid of IEs image toolbar (not javascript but an improvement I think).

    <html>
    <head>
    <title>SlideShow</title>
    <META HTTP-EQUIV="imagetoolbar" CONTENT="no"><!--get rid of IEs toolbar-->
    <script language="JavaScript1.1">
    <!--
    function padToThreeDigits(num)//start preload script
    {
    var s = '' + num;
    while (s.length<3) s = '0' + s;
    return(s);
    }

    var preImages = new Array();
    for (x=1; x<28; x++)
    {
    preImages[x] = new Image()
    preImages[x].src = padToThreeDigits(x) + '.jpg';
    }//end preload script

    var begin=1//start slideshow script
    var end = 17
    var which = begin;

    function geturl(n){
    n = String('00' + n);

    return (n).substring(n.length - 3, n.length) + '.jpg';
    }

    function backward(){
    if (which>begin){
    window.status='Enjoy the Show'
    which--
    document.images.photoslider.src=geturl(which);
    }
    }

    function Auto(){
    if (which<=end){
    document.images.photoslider.src=geturl(which);
    which++
    setTimeout("Auto()",3000);
    }
    else window.status='End of gallery'
    }

    function forward(){
    if (which<end){
    which++
    document.images.photoslider.src=geturl(which);
    }
    else window.status='End of gallery'
    }
    -->
    </script>
    </head>
    <body onload = "Auto()">
    <div align = "center">
    <img src="001.jpg" name="photoslider">

    <form >
    <input type="button" value="&lt;&lt; Backward" name="B2"onClick="backward();">
    <input type="button" value="Auto" name="B1"onClick="Auto()">
    <input type="button" value="Forward &gt;&gt;" name="B1"onClick="forward()"><br><br>
    <input type="button" value="Back to the beginning" name="B3" onClick="which=begin+1; backward();">

    </form>

    </div>
    </body>
    </html>

  • #5
    Regular Coder
    Join Date
    Nov 2003
    Location
    Vancouver Island Canada
    Posts
    139
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good Idea. I can't leave this code alone! I've come up with a preload function for the images and got rid of IEs image toolbar (not javascript but an improvement I think).

    <html>
    <head>
    <title>SlideShow</title>
    <META HTTP-EQUIV="imagetoolbar" CONTENT="no"><!--get rid of IEs toolbar-->
    <script language="JavaScript1.1">
    <!--
    function padToThreeDigits(num)//start preload script
    {
    var s = '' + num;
    while (s.length<3) s = '0' + s;
    return(s);
    }

    var preImages = new Array();
    for (x=1; x<28; x++)
    {
    preImages[x] = new Image()
    preImages[x].src = padToThreeDigits(x) + '.jpg';
    }//end preload script

    var begin=1//start slideshow script
    var end = 17
    var which = begin;

    function geturl(n){
    n = String('00' + n);

    return (n).substring(n.length - 3, n.length) + '.jpg';
    }

    function backward(){
    if (which>begin){
    window.status='Enjoy the Show'
    which--
    document.images.photoslider.src=geturl(which);
    }
    }

    function Auto(){
    if (which<=end){
    document.images.photoslider.src=geturl(which);
    which++
    setTimeout("Auto()",3000);
    }
    else window.status='End of gallery'
    }

    function forward(){
    if (which<end){
    which++
    document.images.photoslider.src=geturl(which);
    }
    else window.status='End of gallery'
    }
    -->
    </script>
    </head>
    <body onload = "Auto()">
    <div align = "center">
    <img src="001.jpg" name="photoslider">

    <form >
    <input type="button" value="&lt;&lt; Backward" name="B2"onClick="backward();">
    <input type="button" value="Auto" name="B1"onClick="Auto()">
    <input type="button" value="Forward &gt;&gt;" name="B1"onClick="forward()"><br><br>
    <input type="button" value="Back to the beginning" name="B3" onClick="which=begin+1; backward();">

    </form>

    </div>
    </body>
    </html>


  •  

    Posting Permissions

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