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
    tbr
    tbr is offline
    New Coder
    Join Date
    Sep 2005
    Location
    sweden
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple galleries/slideshows on one page

    Hello, I need a script that can change an image when you click it, and step through a number of different images, like a slideshow (no "previous" button, just next). I want to have several on one page, but I would still like to use only one script. Preferably I want to write the img tag something like this:

    Code:
    <img src="mypic1.gif" onclick="swapimage(mypic1.gif, mypic2.gif, mypic3.gif etc)"/>
    I don't know exactly how to do this, I've tried to adapt several scripts but it doesn't quite work. One example that is close to what I want is the following:

    http://javascript.about.com/library/blslide1.htm

    How can I adapt it so it works like I explained above? I'm pretty new with Javascript so any help would be very appreciated!

    Thanks!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // by Vic Phillips (10-July-2006) - http://www.vicsjavascripts.org.uk/
    
    
    function zxcSlideShow(){
     var zxcargs=zxcSlideShow.arguments;
     var zxcobj=zxcargs[0];
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!window['zxcSlideShow'+zxcobj.id]){
      var zxcary=[0,zxcargs[1]];
      for (var zxc0=2;zxc0<zxcargs.length;zxc0++){
       zxcary.push(zxcargs[zxc0]);
      }
      window['zxcSlideShow'+zxcobj.id]=zxcary;
     }
     var zxcary=window['zxcSlideShow'+zxcobj.id];
     zxcary[0]=++zxcary[0]%(zxcary.length-2);
     zxcobj.src=zxcary[1]+zxcary[zxcary[0]+2];
    }
    
    
    //-->
    </script>
    </head>
    
    <body>
    <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=100
     onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
    <br>
    <input type="button" name="" value="Fwd"  onclick="zxcSlideShow('Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
    <br>
    <br>
    <br>
    <img id="Img2" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=100 height=100
     onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
    <br>
    <input type="button" name="" value="Fwd"  onclick="zxcSlideShow('Img2','http://www.vicsjavascripts.org.uk/StdImages/','Zero.gif','One.gif', 'Two.gif', 'Three.gif','Four.gif','Five.gif','Six.gif')">
    </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
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    with application notes
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Basic Slide Show (10-July-2006)
    // by Vic Phillips  - http://www.vicsjavascripts.org.uk/
    
    // A very basic Slide Show defined as an image in the HTML code.
    // The Slide Show images are defined in the activating call
    // which also changes the image to the next image.
    //
    // There may be as many applications on a page as required.
    //
    //
    // ***** Application Notes
    
    // **** The HTML Code
    //
    // Each Slide Show is defined as an image in the HTML code.
    // Each Slide Show image must be assigned with a unique ID name.
    // e.g.
    //  <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" >
    //
    
    // **** Activating(Rotating) a Slide Show
    //
    // The Slide Show is 'rotated to the next image by a event call to function 'zxcSlideShow'
    // Example by clicking the image:
    //  <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100"
    //  onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
    // Example by clicking a button:
    //  <input type="button" name="" value="Fwd"  onclick="zxcSlideShow('Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
    //
    // where:
    // parameter 0 = the image object or unique ID name.       (string)
    // parameter 1 = the common directory path for all images. (string)
    //               or '' and specify the path as part of the image file name
    // subsequent parameters:
    // the image file name of the Slide Show images            (string)
    //
    
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
    // These characters are easily changed to characters of choice using global find and replace.
    
    // The functional code(about 0.5K) is best as an external JavaScript
    
    // Tested with IE6 and Mozilla FireFox
    
    
    // ***** Functional Code NO NEED to Change
    
    function zxcSlideShow(){
     var zxcargs=zxcSlideShow.arguments;
     var zxcobj=zxcargs[0];
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!window['zxcSlideShow'+zxcobj.id]){
      var zxcary=[0,zxcargs[1]];
      for (var zxc0=2;zxc0<zxcargs.length;zxc0++){
       zxcary.push(zxcargs[zxc0]);
      }
      window['zxcSlideShow'+zxcobj.id]=zxcary;
     }
     var zxcary=window['zxcSlideShow'+zxcobj.id];
     zxcary[0]=++zxcary[0]%(zxcary.length-2);
     zxcobj.src=zxcary[1]+zxcary[zxcary[0]+2];
    }
    
    
    //-->
    </script>
    </head>
    
    <body>
    <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=100
     onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
    <br>
    <input type="button" name="" value="Fwd"  onclick="zxcSlideShow('Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
    <br>
    <br>
    <br>
    <img id="Img2" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=100 height=100
     onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
    <br>
    <input type="button" name="" value="Fwd"  onclick="zxcSlideShow('Img2','http://www.vicsjavascripts.org.uk/StdImages/','Zero.gif','One.gif', 'Two.gif', 'Three.gif','Four.gif','Five.gif','Six.gif')">
    </body>
    
    </html>
    PS
    will only be a couple more lines to give this fwd, back functionality
    Last edited by vwphillips; 07-11-2006 at 07:02 PM.
    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/

  • #4
    tbr
    tbr is offline
    New Coder
    Join Date
    Sep 2005
    Location
    sweden
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for that quick reply, it works perfectly! Seems to be exactly what I was after. I'll give you credit on the website, once it's up (http://www.olofbruce.se/). Big thanks!

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    with the fwd, back functionality.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    // Basic Slide Show (10-July-2006)
    // by Vic Phillips  - http://www.vicsjavascripts.org.uk/
    
    // A very basic Slide Show defined as an image in the HTML code.
    // The Slide Show images are defined in the activating call
    // which also changes the image to either the 'Next' or 'Back'.
    //
    // There may be as many applications on a page as required.
    //
    //
    // ***** Application Notes
    
    // **** The HTML Code
    //
    // Each Slide Show is defined as an image in the HTML code.
    // Each Slide Show image must be assigned with a unique ID name.
    // e.g.
    //  <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" >
    //
    
    // **** Activating(Rotating) a Slide Show
    //
    // The Slide Show is 'rotated to the next image by a event call to function 'zxcSlideShow'
    // Example by clicking the image:
    //  <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100"
    //  onclick="zxcSlideShow(1,this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
    // Example by clicking a button:
    //  <input type="button" name="" value="Next"  onclick="zxcSlideShow(1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
    //  <input type="button" name="" value="Back"  onclick="zxcSlideShow(-1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
    //
    // where:
    // parameter 0 = rotation, 1 = next, -1 = back.            (1 or -1)
    // parameter 1 = the image object or unique ID name.       (string)
    // parameter 2 = the common directory path for all images. (string)
    //               or '' and specify the path as part of the image file name
    // subsequent parameters:
    // the image file name of the Slide Show images            (string)
    //
    
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
    // These characters are easily changed to characters of choice using global find and replace.
    
    // The functional code(about 0.6K) is best as an external JavaScript
    
    // Tested with IE6 and Mozilla FireFox
    
    
    // ***** Functional Code NO NEED to Change
    
    function zxcSlideShow(){
     var zxcargs=zxcSlideShow.arguments;
     var zxcobj=zxcargs[1];
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!window['zxcBSS'+zxcobj.id]){
      var zxcary=[0];
      for (var zxc0=3;zxc0<zxcargs.length;zxc0++){
       zxcary.push(zxcargs[zxc0]);
      }
      window['zxcBSS'+zxcobj.id]=zxcary;
     }
     var zxcary=window['zxcBSS'+zxcobj.id];
     zxcary[0]+=zxcargs[0];
     if (zxcary[0]<0){zxcary[0]=zxcary.length-2; }
     if (zxcary[0]==zxcary.length-1){zxcary[0]=0; }
     zxcobj.src=zxcargs[2]+zxcary[zxcary[0]+1];
    }
    
    
    //-->
    </script>
    </head>
    
    <body>
    <img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=100 height=100
     onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
    <br>
    <input type="button" name="" value="Next"  onclick="zxcSlideShow(1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
    <input type="button" name="" value="Back"  onclick="zxcSlideShow(-1,'Img1','http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')">
    <br>
    <br>
    <br>
    <img id="Img2" src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=100 height=100
     onclick="zxcSlideShow(this,'http://www.vicsjavascripts.org.uk/StdImages/','One.gif', 'Two.gif', 'Three.gif')" >
    <br>
    <input type="button" name="" value="Fwd"  onclick="zxcSlideShow(1,'Img2','http://www.vicsjavascripts.org.uk/StdImages/','Zero.gif','One.gif', 'Two.gif', 'Three.gif','Four.gif','Five.gif','Six.gif')">
    </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/


  •  

    Posting Permissions

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