PDA

View Full Version : Ultimate Fade-in slideshow - image size control



drewzor
05-31-2010, 07:32 AM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Re-size images to percentage of screen.

Well, I'm not sure where to start. I would like to have images fade in and out on my webpage, however, I would like the images to resize to screen so if you look at the site on a 27" mac you get a full screen image or if you shrink your browser the image and site shrinks with it.. kinda like the percentage set in html.. so

Firstly, the css code seems only to input pixel dimensions which controls the size of the display box. Meaning that if the image is larger then the specified pixel dimension then the image is clipped.

Secondly, the java script doesn't seem to control the size of the image either.

My question, can anyone post me instruction to edit this code so that I can have a slideshow that fits to browser size?

Thank you.

azoomer
05-31-2010, 07:49 PM
Something like this may help you, even though it is far from perfect.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#fadeshow1').css({
'width':'90%',
'height':'800px'
});
jQuery('.gallerylayer img').css({
'width':'100%',
'height':'auto'
});
});
</script>
You can see a demonstration here (http://azoomer.com/Ufis-fit-screen/)
Of course it would look better with images of a higher resolution

Alright i see it looks a little buggy in internet explorer ( surprise) , but anyway it could be a starting point in some way.

drewzor
06-01-2010, 09:27 AM
That's epic, thanks so much!

soul_movement
06-29-2010, 09:16 AM
Is it possible to set the height into percentage as well?

I was trying to do so but the image just disappear....