PDA

View Full Version : Move the text in slideshow?



amyran
09-27-2011, 09:52 PM
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?

jscheuer1
09-29-2011, 07:07 AM
<!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>

amyran
10-05-2011, 06:16 PM
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.

jscheuer1
10-06-2011, 08:02 AM
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/side/flexi/example_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:


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.