Results 1 to 2 of 2

Thread: Having trouble trying to get a proper size for the slideshow images

  1. #1
    Join Date
    Nov 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Having trouble trying to get a proper size for the slideshow images

    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>

  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

    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:

    Quote Originally Posted by rfb
    //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'
    - 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
  •