PDA

View Full Version : Ultimate Fade-in slideshow: Resize current image on window resize - NEED HELP PLEASE



easycoder
02-20-2012, 03:28 AM
1) Script Title: Ultimate Fade-in slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.js

3) Describe problem: I added the following code to the script (fadeslideshow.js) to make the currently displayed image resize to fit the window when the window is resized by user (after the fade in).

It works great, except for one minor glitch (hah-hah): The image height/width do not change on-screen. I added debug statements to check its width before and after the resize, and it IS storing the new width value. Example results:
DEBUG resizeslide: slideimage width BEFORE=1024, width AFTER=940
Note: I also modified code in showslide:function(keyword){ to set the next image's height/width to match the window height/width, instead of using the specified default values. THAT WORKS. When I resize the window, the NEXT slide displays the same size as the window (so do all that follow it).
Before adding this slideshow feature, I had dynamic background image resize that worked for the one image per page load, and my client insists that I make it work with the new slideshow feature too.

I feel this would be a very useful feature to add to Ultimate Fade-in slideshow, and hope you agree. If you want to use/adapt my code, go ahead. Just be sure to fix it and add the necessary interfaces first and let me know what I need to change. Thanks!

1. Added function to get window width/height:
-------------------------------------------------
function getWindowSize() {
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}

windowSize = [myWidth, myHeight];
return windowSize;
}
-------------------------------------------------

2. Added event binding in function fadeSlideShow(settingarg){:
-------------------------------------------------
$(window).bind('resize', function(){
slideshow.resizeslide()
})

-------------------------------------------------

3. Added resize function in fadeSlideShow.prototype={:
-------------------------------------------------
resizeslide:function(){
var slideshow=this

var setting=slideshow.setting
var totalimages=setting.imagearray.length

var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').eq(setting.curimage);

var imgdimensions = getWindowSize();
//alert("DEBUG resizeslide: BEFORE width=" + $slideimage.width());
$slideimage.css({width: imgdimensions[0], height: imgdimensions[1]})
//alert("DEBUG resizeslide: AFTER width=" + $slideimage.width());
},
-------------------------------------------------

easycoder
02-21-2012, 01:07 AM
Hi, again. Still need help figuring out why this code is not working. I don't understand why changing the width/height as follows does not result in the image resizing in the browser. What am I doing wrong?

$slideimage.css({width: imgdimensions[0], height: imgdimensions[1]})

Thanks!

easycoder
02-21-2012, 05:39 AM
Anybody?

easycoder
02-21-2012, 12:03 PM
Figured this one out myself too.