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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    photoslider js question - multiple photoslides on one page

    I've found some free script on this page for a photoslider, it works really well unless you want to put more than one slide show on the same page. i've changed all the variables I can think of, but the buttons included operate the show above or below depending... I've changed the name photoslider, the two variables photos and which. I'll include the link to the page where I got the code and post the code below. My friend who is way better at scripting then me, hasn't resolved it yet either. Please advise! Thanks!!

    http://www.javascriptkit.com/script/...2/pslide.shtml

    I'll copy the script here:


    <table border="0" cellpadding="0">
    <caption><strong>Air Show Photos</strong></caption>
    <tr>
    <td width="100%"><img src="plane1.gif" width="300" height="240" name="photoslider"></td>
    </tr>
    <tr>
    <td width="100%"><form method="POST" name="rotater">
    <div align="center"><center><p><script language="JavaScript1.1">
    var photos=new Array()
    var which=0

    /*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
    photos[0]="plane1.gif"
    photos[1]="plane2.gif"
    photos[2]="plane3.gif"
    photos[3]="plane4.gif"
    photos[4]="plane5.gif"


    function backward(){
    if (which>0){
    window.status=''
    which--
    document.images.photoslider.src=photos[which]
    }
    }

    function forward(){
    if (which<photos.length-1){
    which++
    document.images.photoslider.src=photos[which]
    }
    else window.status='End of gallery'
    }
    </script><input type="button" value="&lt;&lt;Back" name="B2"
    onClick="backward()"> <input type="button" value="Next&gt;&gt;" name="B1"
    onClick="forward()"><br>
    <a href="#" onClick="which=1;backward();return false"><small>Start Over</small></a></p>
    </center></div>
    </form>
    </td>
    </tr>
    </table>

    <p align="center"><font face="arial" size="-2">This free script provided by</font><br>
    <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
    Kit</a></font></p>

  • #2
    New Coder
    Join Date
    Nov 2006
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    //create a new num variable and photos array for each slideshow
    var num1 = 0;
    var photos1 = ["plane1.jpg","plane2.jpg","plane3.jpg","plane4.jpg","plane5.jpg"];
    var num2 = 0;
    var photos2 = ["plane1.jpg","plane2.jpg","plane3.jpg","plane4.jpg","plane5.jpg"];
    
    function backward(id,photos,num) {
    	if (window[num]==0) {
    		window.status = 'End of Gallery';
    		return false;
    	}
    	--window[num];
    	window.status = '';
    	document.getElementById(id).setAttribute('src',window[photos][window[num]]);
    }
    
    function forward(id,photos,num){
    	if (window[num]==window[photos].length-1) {
    		window.status = 'End of Gallery';
    		return false;
    	}
    	++window[num];
    	window.status = '';
    	document.getElementById(id).setAttribute('src',window[photos][window[num]]);
    }
    
    function startOver(id,photos,num) {
    	window.status = '';
    	document.getElementById(id).setAttribute('src',window[photos][0]);
    	window[num] = 0;
    }
    </script>
    </head>
    <body>
    
    <!--- Start of Slideshow One -->
    <table border="0" cellpadding="0">
      <caption><strong>Air Show Photos</strong></caption>
      <tr>
        <td width="100%">
          <img src="plane1.jpg" width="300" height="240" id="slideshow1">
        </td>
      </tr>
      <tr>
        <td width="100%">
          <form>
          <div align="center">
          <center>
          <p>
          <input type="button" value="&lt;&lt;Back" onClick="backward('slideshow1','photos1','num1');"> 
          <input type="button" value="Next&gt;&gt;" onClick="forward('slideshow1','photos1','num1');">
          <br>
          <a href="javascript:startOver('slideshow1','photos1','num1');"><small>Start Over</small></a>
          </p>
          </center>
          </div>
          </form>
        </td>
      </tr>
    </table>
    <!--- End of slideshow One -->
    
    <br><br><br>
    
    <!--- Start of Slideshow Two -->
    <table border="0" cellpadding="0">
      <caption><strong>Slideshow 2</strong></caption>
      <tr>
        <td width="100%">
          <img src="plane1.jpg" width="300" height="240" id="slideshow2">
        </td>
      </tr>
      <tr>
        <td width="100%">
          <form>
          <div align="center">
          <center>
          <p>
          <input type="button" value="&lt;&lt;Back" onClick="backward('slideshow2','photos2','num2');"> 
          <input type="button" value="Next&gt;&gt;" onClick="forward('slideshow2','photos2','num2');">
          <br>
          <a href="javascript:startOver('slideshow2','photos2','num2');"><small>Start Over</small></a>
          </p>
          </center>
          </div>
          </form>
        </td>
      </tr>
    </table>
    <!--- End of slideshow Two -->
    </body>
    </html>

  • #3
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    You don't want to go there - really.

    Try this encapsulated example:

    Code:
    /*** [ < ] [ M u l t i S l i d e ] [ > ]
    
    - Generates multiple image slideshows within one document.
    - Provides Next, Previous, Start and End controls
    - Automated Preloading.
    - Very easy setup.
    
    -Installation-
    
    Save this file as 'multislide.js' and copy it to a suitable folder of your website.
    
    In the <HEAD> section of the document, insert the text:
    
    <SCRIPT type='text/javascript' src='multislide.js'></SCRIPT>
    
    (if multislide.js resides in a different folder, include the relative path)
    
    -Configuration-
    
    In your HTML code, assign a NAME attribute to the image placeholder that will display the slideshow images.
    Example: <img src='defaultpic.jpg' name='slideImg' .........>
    
    The slideshow is initialised by a single function call to the MultiSlide.show function.
    In the <BODY> section, at a point below the target image placeholder, insert the following text:
    
    <SCRIPT type='text/javascript'>
    
    MultiSlide.show('myShow1','slideImg','myPic1.jpg','myPic2.jpg','myPic3.jpg');
    
    // Add more slideshows here if desired, providing a different name for each.
    // Multiple slideshows can be specified to share the same target image holder.
    
    </SCRIPT>
    
    The parameters passed to MultiSlide.show, must be replaced with your own values as explained next:
    
    First parameter - The name of the slideshow. This can be any unique name.
    
    Second parameter - The NAME attribute of the target image placeholder (not its ID if it has one)
    
    All subsequent parameters specify the images involved in the specified slideshow.
    
    There is no limit to the number of images that may be specified. 
    
    All parameters must be within quotation marks and separated by commas in the format shown.
    
    There must be no comma following the last parameter.
    
    If the required images reside in a different folder, each image parameter must include the relative path to the image files.
    
    Below are some selection controls consistent with the example above. The parameter is the name of the associated slideshow, passed as the first parameter of SmartSlide.show
    
    <FORM>
     <input type='button' onclick='MultiSlide.start("myShow1")'value='|<'>
     <input type='button' onclick='MultiSlide.prev("myShow1")' value='<'>
     <input type='button' onclick='MultiSlide.next("myShow1")' value='>'>
     <input type='button' onclick='MultiSlide.end("myShow1")'  value='>|'>
    </FORM>
    
    <A HREF='#' onclick='return MultiSlide.start("myShow1")'> |&lt; </A>
    <A HREF='#' onclick='return MultiSlide.prev("myShow1")'> &lt;Prev </A>
    <A HREF='#' onclick='return MultiSlide.next("myShow1")'> Next&gt; </A>
    <A HREF='#' onclick='return MultiSlide.end("myShow1")'> &gt;| </A>
    
    ** DO NOT EDIT BELOW THIS LINE **/
    
    MultiSlide=/*(C)"Arty Effem"*/
    {
     imageSets:[],
     
     show:function(showId, imgHolder)
     {  
      if(typeof this.imageSets[showId]=='undefined')
      {
       this.imageSets[showId]=[];  
       this.imageSets[showId].holder=imgHolder;
       this.imageSets[showId].pos=0;
       
       for(var j=2; j<arguments.length; j++)
       {
        this.imageSets[showId][j-2]=new Image();
        this.imageSets[showId][j-2].src=arguments[j];
       }
      }
      else
       alert('ID "'+showId+'" used more than once - please correct.');
     },
     
     next:function(showId)
     {
      var set=this.imageSets[showId];
      
      if(set.pos<set.length-1)
      {
       set.pos++;
       document.images[set.holder].src=set[set.pos].src;
      }
      return false;
     },
     
     prev:function(showId)
     {
      var set=this.imageSets[showId];
      if(set.pos>0)
      {
       set.pos--;
       document.images[set.holder].src=set[set.pos].src;
      }
      return false;
     },
     
     start:function(showId)
     {
      var set=this.imageSets[showId];
      set.pos=0;
      document.images[set.holder].src=set[set.pos].src;
      
      return false;
     },
     
     end:function(showId)
     {
      var set=this.imageSets[showId];
      set.pos=set.length-1;
      document.images[set.holder].src=set[set.pos].src;
      
      return false;
     }
       
    }


  •  

    Posting Permissions

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