slideshow image size problem [Archive]

View Full Version : slideshow image size problem

paldo

11-18-2008, 09:14 AM

All script that I have checked have a fix image size. How do you change a script if you have vertical and horizontal images ? Some of the images I want to display are horizontal (640px x480px), others are vertical (480x640).

I have changed the script at http://www.codelifter.com/main/javascript/slideshow2.html

===========================================================
Script: JavaScript Cross-Browser SlideShow Script
With Cross-Fade Effect between Images
Adjustable Timing and Unlimited Images
Function: Displays images continuously in a slideshow
presentation format, with a fade effect on
image transitions.
Browsers: All common browsers: NS3-6, IE 4-6
Fade effect only in IE; others degrade gracefully
Author: etLux
===========================================================

Step 1.
Put the following script in the head of your page:

<script>
// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header
// NS4-6,IE4-6
// Fade effect only in IE; degrades gracefully

// =======================================
// set the following variables
// =======================================

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000

// Duration of crossfade (seconds)
var crossFadeDuration = 3

// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// =======================================
// do not edit anything below this line
// =======================================

var t
var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}

function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>

===========================================================

Step 2.
Put this onload event call in your body tag:

<body onload="runSlideShow()">

===========================================================

Step 3.
Put this in the body of your page where you want the
slide show to appear.

Set widths and heights same as images
Set image file same as first image in array Pic[] (above)

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150></td>
</tr>
</table>

===========================================================

to the following:

I have erase the size and left it empty as I show below:

<body onload="runSlideShow()">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height= width=>
<img src="1.jpg" name='SlideShow' width= height=></td>
</tr>

This works fine with mozillas browsers, the pictures are displayed in their original size. But with IE the images are not displayed anymore.

Can someone help me to fix this problem? Thanks

clueful

11-18-2008, 11:21 AM

All script that I have checked have a fix image size. How do you change a script if you have vertical and horizontal images ? Some of the images I want to display are horizontal (640px x480px), others are vertical (480x640).
How do you want the images displayed - do you want to re-size them so that they all fit a given-size container, or do you want a container that can accommodate any image without re-flowing the document?

paldo

11-18-2008, 12:23 PM

Thank you Clueful.
Is it possible to re-size the pictures when the script is running?
Will a vertical picture display correctly if the container has a size of 640X480?
Is it easier if the container can accommodate any image without re-flowing the document? What do you suggest? See my site below, picture 2 and 3 are actually vertical pictures and are squized to horizontal.

http://www.st-triphon.ch/photos_St_triphon/diashow.html

Thank you

clueful

11-18-2008, 01:07 PM

Thank you Clueful.
Is it possible to re-size the pictures when the script is running?
Will a vertical picture display correctly if the container has a size of 640X480?
Is it easier if the container can accommodate any image without re-flowing the document? You could remove the size and width from the <img> tag, then place it inside a <div> which is sized to 640x640.
It is possible to resize images while preserving the aspect ratio, but I'm not inclined to modify such a poor script.

jscheuer1

11-18-2008, 05:20 PM

I would suggest:

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

With its many options, it can be made to look just as basic as the slide show you are using, but if you set the maximum width of your images as the show's width and the maximum height of your images as the show's height, it will center each image within the viewing area.

paldo

11-26-2008, 10:19 PM

Thanks for your advice. I've changed to the dynamicdrive script and its works. Your Java script is great. Thanks