PDA

View Full Version : Having trouble trying to get a proper size for the slideshow images



rfb
11-24-2005, 06:12 AM
For some reason after cut and paste the html codes
Under the flexi slide show program and replaced the origianl images with my personal images my images were taking up the entire page. I can't seem to find the command codes to reduce the size.
Example for a still image I would place the following code

<img src="http://www.radiofreebiker.com/seaofbikes.jpg" height=240 width=450><p>

But in the following code below that is to be cut and paste, I can not find where I can adjust the height and width of the slide show images.

<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>

jscheuer1
11-24-2005, 07:23 AM
I think it may be time for a little "Images on the Web 101" and a bit of "Javascript Slide Shows 101".

Images on the Web 101:

If your images are taking up the entire page, they are too big, period. Do NOT rely on the browser to scale them. Width and Height attributes are only there to assist the browser in presenting your images at their actual dimensions. If you want the dimensions to be different than they actually are, use an image program to change a copy of your image to the desired dimensions, then use that copy on the web.

Javascript Slide Shows 101:

Generally javascript slide shows are designed to present a series of images that are all of the same dimensions. Even those that are not, usually work better with images that are all the same size. To create a collection of images that satisfies this general requirement from a collection that does not, resize and/or crop copies of your images in an image program so that they are all the same width and height.

End of lessons, on to your particular case:

As it so happens, you've chosen a slide show script that can show images of differing dimensions. This should not be taken as a license to use images of widely varying sizes or extremely large size though. Using one or more of the above methods, at least get your images to be roughly the same size as each other (and of a reasonable size) and then follow the configuration instructions for the script:


//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 image [sic] in your slideshow, plus any text description
var slidebgcolor='#F3F3F3'