Results 1 to 4 of 4

Thread: Ultimate Fade-in slideshow: Resize current image on window resize - NEED HELP PLEASE

  1. #1
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow: Resize current image on window resize - NEED HELP PLEASE

    1) Script Title: Ultimate Fade-in slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...deslideshow.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());
    },
    -------------------------------------------------
    Last edited by easycoder; 02-20-2012 at 11:15 PM. Reason: Correct Script URL (I think)

  2. #2
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  3. #3
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Anybody?

  4. #4
    Join Date
    Feb 2012
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Figured this one out myself too.

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
  •