Results 1 to 4 of 4

Thread: Move the text in slideshow?

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

    Default Move the text in slideshow?

    1) Script Title: Flexi slideshow

    2) Script URL (on DD):
    <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]=['ball.gif', '', '']
    variableslide[1]=['spaceship.gif', 'http://www.space.com', 'Has aliens landed on earth? You decide.']
    variableslide[2]=['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>

    <ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>

    <p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
    <a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

    3) Describe problem: Question - on the slides you can add text underneath the picture. Just wondering if there is a way to have the text to the right side of the picture, rather than underneath it?

  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

    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>
    <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', '', 'Squiggly Queue']
    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', '', 'Yum, Pie!']
    
    //configure the below 3 variables to set the dimension/background color of the slideshow
    
    var slidewidth='130px' //set to width or wider of LARGEST image in your slideshow
    var slideheight='120px' //set to height or higher of LARGEST iamge in your slideshow
    var textwidth='120px' //set to width for right hand text area
    var textpadding='5px' // padding/separation of text from image area
    var slidebgcolor='#F3F3F3'
    var textcolor = '#333';
    var textbgcolor = '#ddd';
    
    //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='<table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: 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+='</td></tr></table>'
    document.getElementById('textcomment').innerHTML = 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){
    var slideandtextwidth = parseInt(slidewidth) + parseInt(textwidth) + parseInt(textpadding) + 'px';
    document.write('<div style="width: ' + slideandtextwidth + '; overflow: hidden;height:'+slideheight+';">' +
    '<div id="textcomment" style="color:'+textcolor+';background-color:'+textbgcolor+
    ';float: right; height:'+slideheight+'; width:'+textwidth+'; padding-left: '+textpadding+'"></div>' +
    '<div style="float: left; width:'+slidewidth+'; height:'+slideheight+';">' +
    '<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div></div></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>
    More content here
    </body>
    </html>
    - John
    ________________________

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

  3. #3
    Join Date
    Jan 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Still having issues

    Thank you. I tired copying your coding, but the text still seems to be below the picture and not on the right. I am not sure what I am doing wrong.

    Thank you for any additional explanation that may help me.

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

    There's really very little to explain. The entire script has changed so the idea is you copy the code from my post and put your images and text in it. Here's a demo so that you can see that it works:

    http://home.comcast.net/~jscheuer1/s...right_text.htm

    Perhaps your images are too big or you have too much text. If that's the problem try increasing the size of those areas in the configuration:

    Code:
    var variableslide=new Array()
    
    //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
    
    variableslide[0]=['squig.gif', '', 'Squiggly Queue']
    variableslide[1]=['spaceship.gif', 'http://www.space.com', 'Has aliens landed on earth? You decide.']
    variableslide[2]=['pie.gif', '', 'Yum, Pie!']
    
    //configure the below 3 variables to set the dimension/background color of the slideshow
    
    var slidewidth='130px' //set to width or wider of LARGEST image in your slideshow
    var slideheight='120px' //set to height or higher of LARGEST iamge in your slideshow
    var textwidth='120px' //set to width for right hand text area
    var textpadding='5px' // padding/separation of text from image area
    var slidebgcolor='#F3F3F3'
    var textcolor = '#333';
    var textbgcolor = '#ddd';
    
    //configure the below variable to determine the delay between image rotations (in miliseconds)
    var slidedelay=3000
    
    ////Do not edit pass this line////////////////
    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - 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
  •