Proportionally fitting images in Slideshow 2!

JavaScript
1

Hi

I have set an overall size for the Slideshow 2! div in the CSS file as follows:

.slideshow {
height:250px;
margin: 0 auto;
width:420px;
}

I would then like all the images I use in the slideshow to fit within this area (i.e. 420 x 250). The images will all have a height of 250px, but different widths. For widths less than 420px I would like the image to be positioned centrally in the div along the horizontal axis as in the following image:

for images wider than 420px I would like them to be positioned centrally in the div along the vertical axis as in the following image:

I wonder if it’s possible to achieve this with Slideshow 2! and if not, whether another script will help me achieve this?

Thanks

Nick

2

Go ahead with @Kalon’s suggestion and calculate sizes like this, preserving the aspect ratio -


function getSize( w, h ){
      var ratio = h / w;
      if (ratio > 1)
           return [ 250/ratio, 250 ];
      else
           return [ 420, 420*ratio ];
}

var imageSize = getSize( 200, 600 );

// imageSize[0] -> width.
// imageSize[1] -> height
3

thanks for these replies.

i have switched to using a jQuery slideshow (easySlider) as I want to use another jQuery script on the same page which was conflicting with mootools.

So I am presuming I can go about this in the same way with easySlider.

I am relatively new to javascript so its not easy for me to follow your instructions.

I have found this method of preloading images:

<script type="text/javascript">

Image1= new Image(150,20)
Image1.src = "assets/1.jpg"

Image2 = new Image(10,30)
Image2.src = "assets/2.jpg"

Image3 = new Image(72,125)
Image3.src = "assets/3.jpg"

Image4 = new Image(72,125)
Image4.src = "assets/4.jpg"

Image5 = new Image(72,125)
Image5.src = "assets/5.jpg"

</script>

Is this what you mean? It appears that this method defines all the widths and heights of each image. I would rather this happen automatically. Is this what ideamonk’s script would do? If so how would I adapt the preload script to make this work?

Regarding horizontal centering I am presuming the div to set the margins on is ‘slider’ as this is the div in the html that specifies all the images. so I have added the following CSS:

#slider {
margin-left:auto;
margin-right:auto;
}

but still the images have no margin as you can see here:

http://www.harambeesounds.com/gigs/

4

you can do all that using javascript.

  1. preload all the images and then set their width attributes and their container element widths and heights to appropriate values depending on the image’s original dimensions.

  2. for horiz. centering set the image container’s left and right margins to auto.