Page 1 of 3 123 LastLast
Results 1 to 10 of 28

Thread: multiple slideshow

  1. #1
    Join Date
    Apr 2008
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default multiple slideshow

    My client wants three sets of slideshow across the bottom of a webpage like this:

    slideshow set 1 slideshow set 2 slideshow set 3



    I have code for the first slideshow like this:

    <script language="JavaScript1.2">

    /***********************************************
    * Flexi Slideshow- Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var variableslide=new Array()

    //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]

    variableslide[0]=["pictures/Picture_001.jpg", "", ""];
    variableslide[1]=["pictures/Picture_002.jpg", "", ""];
    variableslide[2]=["pictures/Picture_003.jpg", "", ""];

    //configure the below 3 variables to set the dimension/background color of the slideshow

    var slidewidth='130px' //set to width of LARGEST image in your slideshow
    var slideheight='120px' //set to height of LARGEST iamge in your slideshow, plus any text description
    var slidebgcolor='#F3F3F3'

    //configure the below variable to determine the delay between image rotations (in miliseconds)
    var slidedelay=3000

    ////Do not edit pass this line////////////////

    var ie=document.all
    var dom=document.getElementById

    for (i=0;i<variableslide.length;i++){
    var cacheimage=new Image()
    cacheimage.src=variableslide[i][0]
    }

    var currentslide=0

    function rotateimages(){
    contentcontainer='<center>'
    if (variableslide[currentslide][1]!="")
    contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
    contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
    if (variableslide[currentslide][1]!="")
    contentcontainer+='</a>'
    contentcontainer+='</center>'
    if (variableslide[currentslide][2]!="")
    contentcontainer+=variableslide[currentslide][2]

    if (document.layers){
    crossrotateobj.document.write(contentcontainer)
    crossrotateobj.document.close()
    }
    else if (ie||dom)
    crossrotateobj.innerHTML=contentcontainer
    if (currentslide==variableslide.length-1) currentslide=0
    else currentslide++
    setTimeout("rotateimages()",slidedelay)
    }

    if (ie||dom)
    document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

    function start_slider(){
    crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
    if (document.layers)
    document.slidensmain.visibility="show"
    rotateimages()
    }

    if (ie||dom)
    start_slider()
    else if (document.layers)
    window.onload=start_slider
    </script>

    Now, I know nothing about javascript. I was told I need to change variable names, variable calls, functions and pointers. Could someone explain these terms and possibly give me a sample code to follow? If I could get some help, I would really appreciate it.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    This is a very old script, and ripe for a complete rewrite. Until then though, you should look at Featured Content Slider. Just set the "toc" parameter when initializing the script to manual:

    Code:
    toc: "manual",
    and within the Pagination DIV, leave it blank to basically make it look just like Flexi Image Slideshow (control less).

  3. #3
    Join Date
    Apr 2008
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm not getting this at all. Where do you put the pictures that go in the slideshow? I'm working on it on www.fountainchurch.org/test.html

  4. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Please read the instructions on the script page. Basically all the contents are defined inline on the page as regular HTML. In your case, they would mainly be regular <IMG> tags:

    Code:
    <div id="slider1" class="sliderwrapper">
    
    <div class="contentdiv">
    <img src="photo1.jpg" /><br />
    Image 1 description.
    </div>
    
    <div class="contentdiv">
    <a href="#"><img src="photo2.jpg" /></a>
    </div>
    
    <div class="contentdiv">
    <img src="photo3.jpg" />
    </div>
    
    </div>
    
    <div id="paginate-slider1" class="pagination">
    
    </div>

  5. #5
    Join Date
    Apr 2008
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    What am I doing wrong? The slideshow still isn't apparing. Do the image tags go in the head or body?

  6. #6
    Join Date
    Apr 2008
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Do I need the paginate-slider1 div or the corresponding css?

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That could work, as could:

    http://www.dynamicdrive.com/dynamici...army/index.htm

    Which can accommodate various sized images in one or more slide shows on a page and can also be run without controls, text, etc. Maybe you will find it easier to understand. Either way, you will need to take the time to understand whatever script you want to use. Read over that (the one you choose) script's demo page thoroughly, several times if need be. Flexi cannot appear more than once on a page. You could put a second Flexi in an iframe, but a script that can do multiple shows on a page is a much better solution.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Apr 2008
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    //If using image buttons as controls, Set image buttons' image preload here true
    //(use false for no preloading and for when using no image buttons as controls):

    In this second line of this code would I put true if I want the slideshow to start automatically?

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by mindiapolis View Post
    //If using image buttons as controls, Set image buttons' image preload here true
    //(use false for no preloading and for when using no image buttons as controls):

    In this second line of this code would I put true if I want the slideshow to start automatically?
    Apples and oranges. The slide show will start automatically unless you set its:

    Code:
    slides#.manual_start=1; //start show in manual mode (stopped)
    property as was done on the demo page with the third example:

    Code:
    var slides3=[]; //THIRD SLIDESHOW
    //configure the below images and descriptions to your own, note optional links, target and window specifications. 
    slides3[0] = ["1_side.jpg", "", "http://www.google.com", "_new", "top=250, left=300, width=500, height=300, location, resizable, scrollbars"];
    slides3[1] = ["2_side.jpg", ""];
    slides3[2] = ["3_side.jpg", "", "http://www.dynamicdrive.com"];
    slides3[3] = ["5_side.jpg", "", "http://www.msn.com", "_new"];
    //optional properties for these images:
    slides3.no_descriptions=1; //use for no descriptions displayed
    slides3.pause=1; //use for pause onmouseover
    slides3.image_controls=1; //use images for controls
    slides3.button_highlight='#cccccc'; //onmouseover background-color for image buttons (requires image_controls=1)
    slides3.specs='width=300, height=250' //global specifications for this show's new window(s)
    slides3.random=1; //set a random slide sequence on each page load
    slides3.manual_start=1; //start show in manual mode (stopped)
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Apr 2008
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm sorry, I really am trying but I still don't understand why the slideshows won't start automatically. /the website again is www.fountainchurch.org/test.html

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
  •