SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple slideshows done simultaneously

    Hi,

    I am trying to create four slide shows on a page using just one script. The same pictures are being used for three of the slide shows, but in different orders to create an impression of moving from one picture to the left.

    I got a script from the web, with different slide shows, but it does not appear on the page simultaneously, but rather by clicking on a link. Original script seen here.
    Code:
    /*Multi image slideshow script- by javascriptkit.com
    Visit JavaScript Kit (http://javascriptkit.com) for script
    Credit must stay intact for use*/
    
    //#1 SPECIFY number of slideshows
    var number_of_slideshows=3
    
    //#2 SPECIFY interval between slide (2000=2 seconds)
    var interval=2000
    
    //#3 SHOULD each slide be linked to a unique URL?
    var linked=1
    
    var slideshows=new Array(number_of_slideshows)
    for (i=0; i <number_of_slideshows; i++)
    slideshows[i]=new Array()
    
    //#4 SPECIFY image paths of 1st slideshow
    slideshows[0][0]='car1.gif'
    slideshows[0][1]='car2.gif'
    slideshows[0][2]='car3.gif'
    
    
    //SPECIFY image paths of 2nd slideshow (remove if number_of_slides less than 2)
    slideshows[1][0]='house1.gif'
    slideshows[1][1]='house2.gif'
    slideshows[1][2]='house3.gif'
    
    
    //SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3)
    slideshows[2][0]='boat1.gif'
    slideshows[2][1]='boat2.gif'
    slideshows[2][2]='boat3.gif'
    
    //EXTEND THIS ARRAY if more than 3 slide shows
    
    
    <!--Remove the below portion if "var linked" above is set to 0-->
    
    var slidelinks=new Array(number_of_slideshows)
    for (i=0; i <number_of_slideshows; i++)
    slidelinks[i]=new Array()
    
    //#5 SPECIFY urls of 1st slideshow
    slidelinks[0][0]='http://mysite.com/car1.htm'
    slidelinks[0][1]='http://mysite.com/car2.htm'
    slidelinks[0][2]='http://mysite.com/car3.htm'
    
    
    //SPECIFY urls of 2nd slideshow (remove if number_of_slides=1)
    slidelinks[1][0]='http://mysite.com/house1.htm'
    slidelinks[1][1]='http://mysite.com/house2.htm'
    slidelinks[1][2]='http://mysite.com/house3.htm'
    
    
    //SPECIFY urls of 3rd slideshow (remove if number_of_slides less than 3)
    slidelinks[2][0]='http://mysite.com/boat1.htm'
    slidelinks[2][1]='http://mysite.com/boat2.htm'
    slidelinks[2][2]='http://mysite.com/boat3.htm'
    
    function clickredir(){
    window.location=slidelinks[maininc][subinc]
    }
    
    <!-- END removal ---------------------------------->
    
    var maininc=0
    var subinc=0
    
    if (linked)
    document.write('<a href="javascript:clickredir()"><img src="'+slideshows[0][0]+'" name="multislide" border=0></a>')
    else
    document.write('<img src="'+slideshows[0][0]+'" name="multislide">')
    
    function slideit(){
    subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
    document.images.multislide.src=slideshows[maininc][subinc]
    }
    
    function setslide(which){
    clearInterval(runit)
    maininc=which
    subinc=0
    runit=setInterval("slideit()",interval)
    }
    
    runit=setInterval("slideit()",interval)
    
    </script>
    
    <p>
    - <a href="javascript:setslide(0)">JavaScript books</a><br>
    - <a href="javascript:setslide(1)">DHTML books</a><br>
    - <a href="javascript:setslide(2)">Flash books</a>
    My modification is as follows:
    Code:
    //#1 SPECIFY number of slideshows
    var number_of_slideshows=4
    
    //#2 SPECIFY interval between slide (2000=2 seconds)
    var interval=2000
    
    //#3 SHOULD each slide be linked to a unique URL?
    var linked=0
    
    var slideshows=new Array(number_of_slideshows)
    for (i=0; i <number_of_slideshows; i++)
    slideshows[i]=new Array()
    
    //#4 SPECIFY image paths of 1st slideshow
    slideshows[0][0]='images/photo0m.jpg'
    slideshows[0][1]='images/photo1m.jpg'
    slideshows[0][2]='images/photo2m.jpg'
    slideshows[0][3]='images/photo3m.jpg'
    slideshows[0][4]='images/photo4m.jpg'
    slideshows[0][5]='images/photo5m.jpg'
    
    
    //SPECIFY image paths of 2nd slideshow (remove if number_of_slides less than 2)
    slideshows[1][0]='images/photo3s.jpg'
    slideshows[1][1]='images/photo4s.jpg'
    slideshows[1][2]='images/photo5s.jpg'
    slideshows[1][3]='images/photo0s.jpg'
    slideshows[1][4]='images/photo1s.jpg'
    slideshows[1][5]='images/photo2s.jpg'
    
    
    //SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3)
    slideshows[2][0]='images/photo2s.jpg'
    slideshows[2][1]='images/photo3s.jpg'
    slideshows[2][2]='images/photo4s.jpg'
    slideshows[2][3]='images/photo5s.jpg'
    slideshows[2][4]='images/photo0s.jpg'
    slideshows[2][5]='images/photo1s.jpg'
    
    //SPECIFY image paths of 3rd slideshow (remove if number_of_slides less than 3)
    slideshows[3][0]='images/photo1s.jpg'
    slideshows[3][1]='images/photo2s.jpg'
    slideshows[3][2]='images/photo3s.jpg'
    slideshows[3][3]='images/photo4s.jpg'
    slideshows[3][4]='images/photo5s.jpg'
    slideshows[3][5]='images/photo0s.jpg'
    
    //EXTEND THIS ARRAY if more than 3 slide shows
    
    
    var maininc=0
    var subinc=0
    
    if (linked)
    document.write('<a href="javascript:clickredir()"><img src="'+slideshows[0][0]+'" name="multislide" border=0></a>')
    else
    document.write('<img src="'+slideshows[0][0]+'" name="multislide"> <br />')
    document.write('<img src="'+slideshows[1][0]+'" name="multislide">')
    document.write('<img src="'+slideshows[2][0]+'" name="multislide">')
    document.write('<img src="'+slideshows[3][0]+'" name="multislide">')
    
    function slideit(){
    subinc= (subinc<slideshows[maininc].length-1)? subinc+1: 0
    document.images.multislide.src=slideshows[maininc][subinc]
    }
    
    function setslide(which){
    clearInterval(runit)
    maininc=which
    subinc=0
    runit=setInterval("slideit()",interval)
    }
    
    runit=setInterval("slideit()",interval)
    
    </script>
    Although in the document.write, I change the name of the array, the name 'multislide' remains the same, so that only one slideshow runs on the page.

    I am unsure on how to change the functions to get all four slide shows running at the same time.

    Any help appreciated.

    CathyM

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CathyM View Post
    Hi,
    I am trying to create four slide shows on a page using just one script. The same pictures are being used for three of the slide shows, but in different orders to create an impression of moving from one picture to the left.
    Presumably the separate slideshow you have is intended to run independently.
    I think the most reliable solution is to treat the 'film strip' effect as a single slideshow, handling a set of images spread over a specified number of image placeholders.
    Tab-indentation is a crime against humanity.


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
  •