Results 1 to 2 of 2

Thread: Flexi slideshow

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

    Default Flexi slideshow

    1) Script Title: Flexi slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...flexislide.htm
    3) Describe problem: I fell like a dummy but I can't place the slideshow images where I'd like them on my page. I tried using a div, no luck. Can someone give me an example of the code to place the rotating images on a specific place on my page? Thanks

  2. #2
    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

    From the demo page:

    Simply add the below where you wish the slideshow to appear:
    Take that very literally, example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head>
    <body>
    <div>
    Here's some content, then comes the script:
    </div>
    <div>
    <script type="text/javascript">
    
    /***********************************************
    * Flexi Slideshow- (c) 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]=['http://www.dynamicdrive.com/dynamicindex4/ball.gif', '', '']
    variableslide[1]=['http://www.dynamicdrive.com/spaceship.gif', 'http://www.space.com', 'Has aliens landed on earth? You decide.']
    variableslide[2]=['http://www.dynamicdrive.com/dynamicindex4/cake.gif', '', '']
    
    //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>
    
    </div>
    More content here
    </body>
    </html>
    Or you could put it in a table cell, or use floats, whatever you like. Think of the script as a single image with a <br> tag before it and a <br> tag after it. Like if you put this somewhere in your page's source code:

    HTML Code:
    <br><img src="some.jpg" width="130" height="120" alt=""><br>
    Because the dimensions are the same as those in the demo script, it would layout the same as the demo script.
    - John
    ________________________

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

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
  •