[[This customization has been superceded by this newer one.]]

Summary

This customization allows you to have a stretchy slideshow on your homepage that will automatically adjust it's size to the height and width of the browser window. If you have not already set up a custom slideshow on your homepage, then first refer to the slideshow tutorial and set up the regular slideshow. This customization is not designed to work with the built-in homepage slideshow. It is only designed to work with a custom slideshow as described in this tutorial. After you have that working, you can change it to the stretchy version in a few minutes by following these directions.

See an example of how it works here.

To install this, there are three required steps and three optional customization steps.


Step 1: Installing the Script

To install the stretchy slideshow code, copy the slideshow code in post #7 into your Top Javascript.


Step 2: Change the Slideshow Code in your Bio to be Stretchy

First, make sure you are using the custom installed slideshow, not the built-in easy-customizer slideshow. If you are using the easy-customizer slideshow, then you need to first turn that off and then follow these instructions to add the custom slideshow to your bio. After getting the custom slideshow to work, you can then upgrade it to stretchy as follows.

Replace the standard slideshow line in your bio that looks something like this:

SM.flash.insertSlideshow(600, 600, ssConfig, "transparent");

with a new line that looks like this:

InsertStretchySlideshow(ssConfig);


Step 3: Make Homepage Stretchy

Then, you also need to make your homepage stretchy and clear the background from around the slideshow by adding this CSS to the CSS field in your site-wide-customization:

#homepage {width: auto !important; margin-left: 15px !important; margin-right: 15px !important;}
#bioBox {width: auto !important;}
#bioBox,
#bioBox .boxTop,
#bioBox .boxBottom,
#userBio {border: none !important; background: none !important;}


Step 4: Separate Galleries Page

This step is optional. If you are using the separate galleries page and don't want that page to be stretchy, you will also have to add this CSS to set the galleries page width to a fixed width:

.galleries #homepage {width: 750px !important; margin: 0 auto !important;}


Step 5: Stretchy Header

This step is optional. You may also want to modify your header to be stretchy on the homepage. If you have a custom header, you will need to change that design yourself (or post asking for help). If you are using the standard Smugmug header, you can make it stretchy on the homepage with this CSS:

.homepage #header {width: auto; margin-left: 15px; margin-right: 15px;}

Note: Some themes are not designed to be stretchy and will not look good with a stretchy homepage. This customization requires a stretchy homepage in order to be able to stretch the slideshow as large as the window. If you are using a non-stretchy theme on your homepage, you will need to change it to one that looks OK when stretched. The ones that don't stretch well are typically the ones that use graphics of a specific width across the top and bottom.


Step 6: Customizing the Stretchy Slideshow

This step is optional. When using this customization, all of your existing slideshow parameters will be used as before. You will notice that there is no height or width specified for the stretchy slideshow because it automatically adjusts its height and width based on the size of the browser window. By default, the slideshow will fill the space available to it. Anything you have in your custom header (banner, navbar, etc...) will be at the top and the rest of the space on the screen will be devoted to the slideshow. If the viewer resizes the window, the slideshow will resize and over the next few images, the slideshow will start displaying new sizes of images that fit the new window size.

There are a couple things to keep in mind. A slideshow with larger images will take a little longer to load so there may be a little more time before the first image is displayed so it is recommended that you use a splash image so there is something on screen while the first slideshow image is being loaded.

There are a number of optional parameters that you can use to further control how the stretchy slideshow works. For example, if you have a footer on your homepage that you want to remain visible, you can tell the slideshow to reserve some space for that by setting an appropriate parameter.

Here are the additional parameters that you add to your ssConfig structure just like all the other slideshow parameters. Do not just copy all these into your code. Use only the couple parameters that you actually need as using all of these will over constrain your show and you will lose some of the stretchy behavior.

extraH: "100",
extraW: "100",
minW: "600",
minH: "400",
maxW: "1200",
maxH: "900",
aspectHeightConstrain: "true",
aspectWidth: "600",
aspectHeight: "400",
autoScaleSplash: "true"
flashRequiredRedirectURL: "http://xxxxx.smugmug.com/galleries",
flashRequiredImageURL: "http://www.smugmug.com/photos/1234567_34da3-L.jpg",
flashRequiredHTML: "Please install the latest version of Adobe Flash so you can see my slideshow."

Here is some detail on each optional parameter:

extraH: "100",

By default, the stretchy slideshow will extend all the way to the bottom of the window (making it as large as possible). If you want to reserve some space at the bottom of the window for a custom footer to be visible on screen without scrolling or for additional text you put in your biobox below your slideshow, then you can set the extraH parameter to however many pixels you want to reserve. You will need to either measure how many pixels you need or just try several values until you find what works best. If you set extraH to a large value, this will constrain the height of the slideshow so it can't be very large (which is probably not desirable). Typically, I wouldn't expect you to set this value to anything larger than 100-200 pixels since the point of the stretchy slideshow is to get a large slideshow. This parameter is optional and is not required.


extraW: "100",

If you want a little more room on each side of the slideshow so that the slideshows don't extend all the way to the edges of the bioBox, then you can set this parameter. By default, the slideshow will stay inside the bioBox DIV. You can also control the margins/padding on the bioBox using CSS and the slideshow will stay inside of that. This parameter is optional and is not required.


minH: "400",
minW: "600",

Because the browser window can be resized to almost anything including really small values, you may want to specify a minimum slideshow width or height so that the slideshow will always be at least this wide or tall, even if it causes scrolling to be required in the browser window. These parameters are optional and is not required.


maxW: "1200",
maxH: "900",

If your slideshow images are coming from a gallery that has a limited size available to the public like XL, then it may be desirable to set the maxW and maxH values to the maximum size images that you allow. This will keep the slideshow from taking more space on screen that it can use. If you have both portrait and landscape oriented images in the slideshow, keep in mind that you want to set the maxW size for your landscape images and the maxH value for your portrait images so as to not overconstrain how large the slideshow can be. These parameters are optional and is not required.


aspectHeightConstrain: "true",
aspectWidth: "600",
aspectHeight: "400",

If all your images are the exact same aspect ratio and all the same landscape orientation, then you can make the slideshow smarter about how much height it reserves for the slideshow by setting aspectHeightConstrain: "true" and then specifying an aspect ratio using aspectWidth and aspectHeight. What the slideshow will then do is to look at the available width, calculate the desired height based on the aspect ratio and only reserve that much height rather than taking the full remaining height of the window. You should ONLY use this setting if ALL your images are in the landscape orientation and ALL your images are the exact same aspect ratio (length/width is the same proportion for all images). You set representative values for aspectWidth and aspectHeight. It doesn't matter what actual values you use, the only thing that matters is the ratio of the two. In the example above, we've set things up for images that are in the 3:2 aspect ratio (typical of dSLRs). If you set aspectHeightConstrain, but don't set both aspectWidth and aspectHeight, this setting will be ignored. These parameters are optional and is not required.


autoScaleSplash: "true",

If you set this value to true, then the stretchy slideshow will automatically modify your splash screen URL in order to pick the largest standard size (e.g. L, XL, X2, X3, etc...) that will fit in the size of the slideshow area. In order for this to work, you must have specified a Smugmug image URL in the regular "splash" parameter and you must have enabled the larger sizes on the gallery that it's in. Unlike the slideshow images, this will not scale exactly to fit the slideshow area. For speed reasons, it will use the largest pre-built size that fits in the slideshow area.


flashRequiredRedirectURL: "http://jfriend.smugmug.com/galleries",

The stretchy slideshow automatically detects whether flash is installed. If flash is not installed or there is not a recent enough version, then you have the option of setting an alternate page to show. Because of the popularity of the iPhone and iPad, there are now a lot of browsers out there that are not flash compatible, thus the stretchy slideshow would just show as a blank space. If you want to automatically redirect the user to a different page (such as your galleries page) when flash is not available, set the fully qualified URL of the alternate page here. The slideshow will automatically redirect to the page if flash is not installed or current enough. There are three different options here for what to do if flash is not installed. If this one is present, it takes precedence over the other two.


flashRequiredImageURL: "http://www.smugmug.com/photos/12345678_abcde-L.jpg",

The stretchy slideshow now automatically detects whether flash is installed and if a recent enough version is present for the slideshow to work. By default, it just presents a text message telling the user that they need to install a new version of Adobe Flash instead of the slideshow. If you would rather just show a static image from your collection, you can specify the URL to that image here and it will be displayed instead of the text message.


flashRequiredHTML: "Please install <b>Adobe Flash</b> so you can see my slideshow.",

The stretchy slideshow now automatically detects whether flash is installed and if a recent enough version is present for the slideshow to work. By default, it just presents a text message telling the user that they need to install a new version of Adobe Flash instead of the slideshow. If you would rather display your own HTML which can include anything you can do in HTML (text, images or both or other), then you can specify that HTML in this parameter. Remember that this is a javascript string. It must start and end with a quote character and there must be no quote characters in the actual string. If you need quote characters in your HTML, then use double quotes around the ends of the string and single quotes in your HTML.

These settings all go into your ssConfig structure just like all the other slideshow settings.

So, a typical slideshow configuration in your bioBox for a regular slideshow might look like this:

 <script type="text/javascript">
var ssConfig = {
    AlbumID: '8534943',
    newWindow: 'false',
    transparent: 'true',
    randomStart: 'true',
    splash: 'http://photos.smugmug.com/photos/561967391_bsdjQ-L.jpg',
    showLogo: 'false',
    showThumbs: 'false',
    showButtons: 'false',
    crossFadeSpeed: '600',
    splashDelay: '1000'
};
SM.flash.insertSlideshow(1000, 500, ssConfig, "transparent");
</script>

A modified slideshow configuration that includes all of these additional parameters might look like this. Do not copy this because you should NOT have all these parameters at once (some are at odds with one another). You don't need any of these optional parameters to have a stretchy slideshow, so you should only add the ones that you are pretty sure you need.

<script type="text/javascript">

// DO NOT COPY THESE
// You should NOT have all these parameters (many conflict with one another)
// This is shown only as an example of what the syntax looks like for all the various parameters

var ssConfig = {
    AlbumID: '8534943',
    newWindow: 'false',
    transparent: 'true',
    randomStart: 'true',
    splash: 'http://photos.smugmug.com/photos/561967391_bsdjQ-L.jpg',
    showLogo: 'false',
    showThumbs: 'false',
    showButtons: 'false',
    crossFadeSpeed: '600',
    splashDelay: '1000',
    aspectHeightConstrain: "true",
    aspectWidth: '1000',
    aspectHeight: '500',
    minW: '800',
    minH: '600',
    maxW: '2000', 
    maxH: '1000',
    autoScaleSplash: "true",
    flashRequiredRedirectURL: "http://jfriend.smugmug.com/galleries",
    flashRequiredImageURL: "http://www.smugmug.com/photos/1234567_34da3-L.jpg",
    flashRequiredHTML: "Please install the latest versino of Adobe Flash so you can see my slideshow."
};

InsertStretchySlideshow(ssConfig);
 </script>

Each of the additional and optional parameters further constrain the slideshow so it doesn't stretch to it's maximum available size so you should only use the parameters that you have a good reason to need. Do not just put all the parameters in for the heck of it. Only use the ones you know you need. None of the optional parameters are required.


The Code

The code is in post #7 in this thread (because dgrin has a message size limit that I exceeded here). Paste this code here into your top javascript.

If you have any problems or issues or questions, post to this thread and we'll see if we can fix you up.

Seems to work just fine for me John.
Thanks and keep up all the cool hacks.

Originally Posted by jfriend Summary This customization allows you to have a stretchy slideshow on your homepage that will automatically adjust it's size to the height and width of the browser window. If you have not already set up a slideshow on your homepage, then first refer to the slideshow tutorial and set up the regular slideshow. After you have that working, you can change it to the stretchy version in a few minutes. See an example of how it works here. Installing the Script To use the stretchy slideshow, all you do is copy the slideshow code at the end of this post into your Top Javascript and then replace the standard slideshow line in your bio that looks something like this: SM.flash.insertSlideshow(600, 600, ssConfig, "transparent"); with a new line that looks like this: InsertStretchySlideshow(ssConfig); .... If you have any problems or issues or questions, post to this thread and we'll see if we can fix you up.

Hi John,

In my bio the script reads as follows:

var oParams = new Object;
oParams.AlbumID = "4409252";
oParams.newWindow = 'false';
oParams.transparent = "true";
oParams.randomStart = 'true';
oParams.splash = "http://www.smugmug.com/img/ria/Shiza...gmug_black.png";
oParams.showLogo = "false";
oParams.showThumbs = "false";
oParams.showButtons = "true";
oParams.crossFadeSpeed = '350';
createSWF(750,500, oParams, "transparent");

The above doesn't look similar enough to me to proceed. What am I missing? Am I looking in the right area?

If I make the home page "stretchy" will it try to stretch the image at the top of my page? Can I prevent that?

Thanks for all of your ideas and any response.

Originally Posted by alorentzen Hi John, In my bio the script reads as follows: var oParams = new Object; oParams.AlbumID = "4409252"; oParams.newWindow = 'false'; oParams.transparent = "true"; oParams.randomStart = 'true'; oParams.splash = "http://www.smugmug.com/img/ria/Shiza...gmug_black.png"; oParams.showLogo = "false"; oParams.showThumbs = "false"; oParams.showButtons = "true"; oParams.crossFadeSpeed = '350'; createSWF(750,500, oParams, "transparent"); The above doesn't look similar enough to me to proceed. What am I missing? Am I looking in the right area? If I make the home page "stretchy" will it try to stretch the image at the top of my page? Can I prevent that? Thanks for all of your ideas and any response.

You are just using a slightly older version of the slideshow code which is fine, but just looks a little different. To convert to the latest format and to use the stretchy slideshow, you would put this in your Bio instead of what you have now (and follow the other steps in the directions):

<html>
<script type="text/javascript">
var ssConfig = {
    AlbumID: '4409252',
    newWindow: 'false',
    transparent: 'true',
    randomStart: 'true',
    splash: 'http://www.smugmug.com/img/ria/Shiza...gmug_black.png',
    showLogo: 'false',
    showThumbs: 'false',
    showButtons: 'true',
    crossFaceSpeed: '350'
};
InsertStretchySlideshow(ssConfig);
</script>
</html>

In answer to your question, the stretchy homepage won't touch your banner image. If it is centered now, it will stay centered and the same width it is now.

Originally Posted by jfriend You are just using a slightly older version of the slideshow code which is fine, but just looks a little different. To convert to the latest format and to use the stretchy slideshow, you would put this in your Bio instead of what you have now (and follow the other steps in the directions)...

Thanks again for your help, John. That's terrific :-)

Originally Posted by alorentzen Thanks again for your help, John. That's terrific :-)

Hey, it looks really cool on my big screen! You feel like you're right in the pool with them.

Since dgrin has a message limit size and the first post just exceeded that limit as I added some more documentation, here's the latest version of the code for the stretchy slideshow that goes with the first posting.

This is the latest version of the code that goes in your Top Javascript.

//------------------------------------------------------------------------------------------
// Stretchy Slideshow code
//
// See http://www.dgrin.com/showthread.php?t=141047 for documentation on parameters.

//------------------------------------------------------------------------------------------

//------------------------------------------------------------------------------------------
// Flash detection code
//
// We've change the name of the base object to avoid conflicting with anyone
// else.
//------------------------------------------------------------------------------------------

if (typeof deconceptTemp == "undefined") var deconceptTemp = new Object();
if (typeof deconceptTemp.util == "undefined") deconceptTemp.util = new Object();
if (typeof deconceptTemp.SWFObjectUtil == "undefined") deconceptTemp.SWFObjectUtil = new Object();
deconceptTemp.SWFObjectUtil.getPlayerVersion = function () {
    var PlayerVersion = new deconceptTemp.PlayerVersion([0, 0, 0]);
    if (navigator.plugins && navigator.mimeTypes.length) {
        var x = navigator.plugins["Shockwave Flash"];
        if (x && x.description) {
            PlayerVersion = new deconceptTemp.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/, "").replace(/(\s+r|\s+b[0-9]+)/, ".").split("."));
        }
    } else if (navigator.userAgent && navigator.userAgent.indexOf("Windows CE") >= 0) {
        var axo = 1;
        var counter = 3;
        while (axo) {
            try {
                counter++;
                axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash." + counter);
                PlayerVersion = new deconceptTemp.PlayerVersion([counter, 0, 0]);
            } catch(e) {
                axo = null;
            }
        }
    } else {
        try {
            var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
        } catch(e) {
            try {
                var axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
                PlayerVersion = new deconceptTemp.PlayerVersion([6, 0, 21]);
                axo.AllowScriptAccess = "always";
            } catch(e) {
                if (PlayerVersion.major == 6) {
                    return PlayerVersion;
                }
            }
            try {
                axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
            } catch(e) {}
        }
        if (axo != null) {
            PlayerVersion = new deconceptTemp.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));
        }
    }
    return PlayerVersion;
}
deconceptTemp.PlayerVersion = function (arrVersion) {
    this.major = arrVersion[0] != null ? parseInt(arrVersion[0]) : 0;
    this.minor = arrVersion[1] != null ? parseInt(arrVersion[1]) : 0;
    this.rev = arrVersion[2] != null ? parseInt(arrVersion[2]) : 0;
}
deconceptTemp.PlayerVersion.prototype.versionIsValid = function (fv) {
    if (this.major < fv.major) return false;
    if (this.major > fv.major) return true;
    if (this.minor < fv.minor) return false;
    if (this.minor > fv.minor) return true;
    if (this.rev < fv.rev) return false;
    return true;
}



//------------------------------------------------------------------------------------------
// InsertStretchySlideshow
//
// This creates a stretchy slideshow that will size itself to the screen size.
//
// See http://www.dgrin.com/showthread.php?t=141047 for documentation on parameters.
//------------------------------------------------------------------------------------------

function InsertStretchySlideshow(parms)
{
    var slideshowInserted = false;
    
    // copy all attributes from src object to dest object
    // this is a shallow copy so if attributes are objects or arrays themselves, we are not doing a deep copy (thus they will be references)
    function CopyObj(dest, src)
    {
        for (var i in src)
        {
            dest[i] = src[i];
        }
    }
    
    // functions to determine element height and width across multiple browsers
    function GetElementWidth(whichElem)
    {
        var elem = YD.get(whichElem);
        if (!elem) return 0;
        if (typeof elem.clip !== "undefined") 
        {
            return elem.clip.width;
        } 
        else 
        {
            if (elem.style.pixelWidth) 
            {
                return elem.style.pixelWidth;
            }
            else 
            {
                return elem.offsetWidth;
            }
        }
    }

    function GetElementHeight(whichElem)
    {
        var elem = YD.get(whichElem);
        if (!elem) return 0;
        if (typeof elem.clip !== "undefined") 
        {
            return elem.clip.height;
        } 
        else 
        {
            if (elem.style.pixelHeight) 
            {
                return elem.style.pixelHeight;
            }
            else 
            {
                return elem.offsetHeight;
            }
        }
    }
    
    function DebugOut(e)
    {
        if (window.console) console.log(e);
    }
        
    function HandleResize()
    {
        if (!slideshowInserted) return;        // if we haven't put the slideshow object in yet, then don't try to talk to the flash object yet
        
        try
        {
            // make sure slideshow has been loaded before we call this
            var ssContainer = YD.get("ssLocalContainer");
            if (!ssContainer || !ssContainer.stretchySlideShowLoaded)
            {
                setTimeout(HandleResize, 10);        // keep calling until we're successful
                return;
            }
            
            var newSize = CalcAndSetSize();
            
            // set the slideshow to the right size and clear the cache here to get it to take the new size
            var ssObj = YD.get("stretchySSID");
            YD.setStyle(ssObj, "height", newSize.height + "px");
            YD.setStyle(ssObj, "width", newSize.width + "px");
            // DebugOut('Before call ssObj.extHookHandler({cmd: "clearCache"})');
            ssObj.extHookHandler({cmd: "clearCache"});
            // DebugOut('After call ssObj.extHookHandler({cmd: "clearCache"})');
        } catch (e) {DebugOut(e);}
    }

    function MakeSlideshowHTML(w, h, params)
    {
        params.name = "stretchySSID";
        params.allowedDomain = document.location.hostname;
        params.type = "gallery";
        params.transparent = "true";
        var args = "";
        for (var i in params) {
            args += i + "=" + params[i] + "&amp;";
        }
        var html = "";
        // because we need a DOM ID on the object, we can't do both object and embed and have it work right (conflicting IDs)
        // if it's navigator compatible, then just do the embed tag
        if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length)
        {
            // just embed tag
            html += '<embed id="stretchySSID" src="/ria/ShizamSlides-' + SM.appVersion['ShizamSlides'] + '.swf"';
            html += ' flashVars="' + args + '" wmode="transparent"';
            html += ' width="' + w + '" height="' + h + '"';
            html += ' type="application/x-shockwave-flash" allowScriptAccess="always" allowNetworking="all"/>';
            return(html);
        }
        else 
        {
            // must be IE, just use the object tag
            //html += '<object id="stretchySSID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" align="middle">';
            html += '<object id="stretchySSID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="' + w + '" height="' + h + '" align="middle">';
            html += '<param name="movie" value="/ria/ShizamSlides-' + SM.appVersion['ShizamSlides'] + '.swf?' + args + '" />';
            html += '<param name="wmode" value="transparent"/>';
            html += '</object>';
            return(html);
        }
    }
    
    function CalcAndSetSize()
    {
        // use the width of our container as a starting point
        var ssWidth, ssHeight, viewWidth, viewHeight;
        var ssLocalContainer = YD.get("ssLocalContainer");
        
        // calc the desired height
        viewHeight = YD.getViewportHeight();
        var ssYPos = YD.getY(ssLocalContainer);
        
        // figure out if the homePageTools are there yet (probably aren't) and account for their eventual height
        // this is only an approximation and only affects the site when loggedIn
        if (YD.hasClass(document.body, "homepage") && YD.hasClass(document.body, "loggedIn"))
        {
            var homepageToolsHeight = GetElementHeight("homepageTools");
            if (homepageToolsHeight < 20)
            {
                homepageToolsHeight = 49;            // this is the approx height (measured in Firefox)
            }
            viewHeight -= homepageToolsHeight;        // account for the space that the homepage tools will take after they are added
        }
        
        // adjust height based on passed in parameters and our current position
        viewHeight -= localParms.extraH;                        // sutract out any extraH that was specified
        viewHeight -= ssYPos;                                // subtract out our starting y position so we just fill up the rest of the screen
        viewHeight = Math.min(viewHeight, localParms.maxH);    // don't start with more than maxH
        viewHeight = Math.max(viewHeight, localParms.minH);    // don't start with less than minH
        ssHeight = viewHeight;                                // go with this full height for now
        
        // set the actual height now so that a scroll bar will appear if required before we calc the width
        YD.setStyle(ssLocalContainer, "height", ssHeight + "px");
        
        // calc the desired width
        viewWidth = GetElementWidth(ssLocalContainer);
        if (viewWidth == 0)
        {
            viewWidth = YD.getViewportWidth() - 50;        // show something if we don't have a valid width
        }
        
        // if extra width padding is specified, take that out of the viewing area width
        viewWidth -= localParms.extraW;
        viewWidth = Math.min(viewWidth, localParms.maxW);    // don't start with more than maxW
        viewWidth = Math.max(viewWidth, localParms.minW);    // don't start with less than minW
        ssWidth = viewWidth;                                    // go with this full width for now

        // if constraining the aspect ratio, then find out what fits
        if (localParms.aspectHeightConstrain)
        {
            // now calc the size if we are constrained by width
            var ssHeightTest = parseInt(Math.round((ssWidth * localParms.aspectHeight) / localParms.aspectWidth, 10));
            
            // if the full height isn't needed, then go with only what is needed
            if (ssHeightTest < viewHeight)
            {
                ssHeight = ssHeightTest;
                YD.setStyle(ssLocalContainer, "height", ssHeight + "px");    // set the new height
                // Note: it is slightly possible that a scrollbar would have disappeared here (when we shortened the page), throwing our width calc off a little bit
                // not sure what we can do about that or that it's really a problem
            }
        }
        // return our results
        var ssSize = new Object;
        ssSize.width = ssWidth;
        ssSize.height = ssHeight;
        return(ssSize);
    }
    
    function CalcStandardSizeToFit(h, w)
    {
        var sizeTable = ["X3", "X2", "XL", "L", "M", "S", "Th", "Ti"];
        var widthTable = [1600, 1280, 1024, 800, 600, 400, 150, 100];
        var heightTable = [1200, 960, 768, 600, 450, 300, 150, 100];

        for (var i = 0; i < widthTable.length; i++)
        {
            if ((w > widthTable[i]) && (h > heightTable[i]))
            {
                return(sizeTable[i]);
            }
        }
        return("Ti");        // as small as we have
    }
    
    function AddSlideshowNow()
    {
        var ssSize = CalcAndSetSize();
        
        // now that we know the size, see if we should autoscale the splash image
        // http://jfriend.smugmug.com/photos/625569049_csHXe-L-3.jpg
        if (localParms.autoScaleSplash)
        {
            // get the base value of the URL
            var re = /(^.*?)(-[a-zA-Z0-9]{1,2})(-\d+){0,1}(.\w{3,})$/
            // matches[0] = whole string
            // matches[1] = first part of the string before the -X2
            // matches[2] = -X2
            // matches[3] = -2 (might be undefined)
            // matches[4] = .jpg
            var matches = re.exec(localParms.splash);
            if (matches && (matches.length >= 5))
            {
                var extension = matches[4];                        // get extension
                var version = matches[3] ? matches[3] : "";        // get version number if present
                localParms.splash = matches[1] + "-" + CalcStandardSizeToFit(ssSize.height, ssSize.width) + version + extension;
            }
        }
        
        // now make a clean version of the parms that doesn't have all our extra ones in it
        var cleanParms = new Object;
        for (var i in localParms)
        {
            // only copy over the params that are not our params (the ones not in our defaults table)
            if (typeof(defaultParms[i]) == "undefined")
            {
                cleanParms[i] = localParms[i];
            }
        }
        
        var containerObj = YD.get("ssLocalContainer");
        containerObj.innerHTML = MakeSlideshowHTML(ssSize.width, ssSize.height, cleanParms);
        slideshowInserted = true;        // now it's OK to talk to the flash object
    }
    
    // Here's where the actual execution of this function starts.  Everything before this was local function definitions
    var flashVersion = deconceptTemp.SWFObjectUtil.getPlayerVersion();
    var requiredVersion = new deconceptTemp.PlayerVersion([9,0,0]);
    if (!flashVersion.versionIsValid(requiredVersion))
    {
        if (parms.flashRequiredRedirectURL)
        {
            // only do the redirect if not on the redirectURL already to avoid any sort of loop
            var curLoc = window.location.toString();
            if (curLoc.toLowerCase() != parms.flashRequiredRedirectURL.toLowerCase())
            {
                window.location.replace(parms.flashRequiredRedirectURL);
                return;
            }
        }
        if (parms.flashRequiredImageURL)
        {
            document.write('<div id="ssNoFlashDiv" style="text-align: center; vertical-align: middle; margin: 0 auto;"><img src="' + parms.flashRequiredImageURL + '" border="0" /></div>');
        }
        else 
        {
            var noFlashHTML = 'You need the latest version of Adobe Flash Player to view the show! <a href="http://www.adobe.com/go/getflashplayer">Get it here</a>!';
            if (parms.flashRequiredHTML)
            {
                noFlashHTML = parms.flashRequiredHTML;
            }
            document.write('<div id="ssNoFlashDiv" style="text-align: center; vertical-align: middle; margin: 0 auto;">' + noFlashHTML + '</div>');
        }
        return;
    }
    
    // Set some default parameters if they don't already exist in the passed in parameter object.
    // We must list all possible parameters here with a default value because this list is also used
    // to strip out our extra parameters before passing the parms to the slideshow.
    var localParms = new Object;
    var defaultParms =
    {
        minW: 100,
        minH: 100,
        maxW: 5000,
        maxH: 5000,
        extraH: 10,
        extraW: 0,
        aspectWidth: 600,
        aspectHeight: 400,
        aspectHeightConstrain: "false",
        resize: "true",
        flashRequiredImageURL: "",
        flashRequiredHTML: "",
        flashRequiredRedirectURL: "",
        autoScaleSplash: "false",
        easyFeedURL: ""
    };
    
    CopyObj(localParms, defaultParms);    // initialize with defaults
    CopyObj(localParms, parms);            // copy over the passed in parms (replacing default ones )
    
    // condition the input values (all numbers converted to real numbers, all booleans to real booleans, etc...
    // At this point, everyone of our defaultParms is present because we copied it in
    // so we cycle through the defaultParms list looking for each of those values in the localParms
    // and then fix it up if it needs fixing
    for (var i in defaultParms)
    {
        // Now make sure all the numeric parameters that are passed in as strings are converted to numbers
        if ((typeof(defaultParms[i]) == "number") && (typeof(localParms[i]) == "string"))
        {
            localParms[i] = parseInt(localParms[i]);
        }
        // convert all our vars to actual boolean true/false rather than strings
        if (localParms[i] == "true")
        {
            localParms[i] = true;
        }
        else if (localParms[i] == "false")
        {
            localParms[i] = false;
        }
    }
    
    // make sure that if we are constraining the aspect ratio that they have also passed in the aspect width and height
    if (localParms.aspectHeightConstrain)
    {
        if (!localParms.aspectWidth || !localParms.aspectHeight)
        {
            localParms.aspectHeightConstrain = false;        // turn constrain off because no height and width
        }
    }
    
    // make sure we aren't trying to auto scale when there is no splash image
    if (localParms.autoScaleSplash && !localParms.splash)
    {
        localParms.autoScaleSplash = false;        // turn it off, as both must be supplied
    }
    
    if (localParms.easyFeedURL != "")
    {
        // do the URL encoding so we don't have to do this manually - something Smugmug should have done for us
        localParms.feedURL = encodeURIComponent(localParms.easyFeedURL);    
    }
    
    // if we are resizing, then set up a resize monitor
    if (localParms.resize)
    {
        YE.on(window, 'resize', HandleResize);
    }

    // add these additional parameters so our callback function can be hooked up
    localParms.eventHandler = "StretchySlideshowEventHandler";
    localParms.elementID = "ssLocalContainer";

    // put our place holder div into place
    document.write('<div id="ssLocalContainer" style="text-align: center; margin: 0 auto; height: auto; width: auto;"></div>');
    
    // wait until the document is laid out before we can actually measure the space available and insert the slideshow
    YE.onDOMReady(AddSlideshowNow);
}

// unfortunately, this has to be a globally scoped identifier
function StretchySlideshowEventHandler(elem, argObj)
{
    try
    {
        var str = "";
        if (argObj)
        {
            for (var i in argObj)
            {
                str += ", argObj[" + i + "] = " + argObj[i];
            }
        }
        if (window.console) console.log(elem + str);
        
        if (argObj.type == "slideshowLoaded")
        {
            YD.get(elem).stretchySlideShowLoaded = true;
        }
    }
    catch (e) {if (window.console) console.log(e);}
}

//------------------------------------------------------------------------------------------
// End of Stretchy Slideshow code
//------------------------------------------------------------------------------------------

Edits:
4/8/2010: Fixed bug in the flashRequiredImageURL parameter.
4/6/2010: Added the flashRequiredRedirectURL parameter so you can redirect to your galleries page if there is no flash installed.

Updated the stretchy slideshow with three new features:

1) Automatic scaling of the splash image to the largest standard size that fits in the slideshow area. You just specify a splash URL to any standard size and it will modify that URL to use the largest standard size that fits (L, XL, X2, X3, etc...).

2) Automatic flash detection. Unlike the smugmug homepage slideshow, the stretchy slideshow now detects whether an appropriate version of Adobe Flash is present and if not, it will tell the user that they need to install Adobe flash rather than just presenting an empty box.

3) Control over what is displayed if the right version of Adobe flash is not present. You can specify either your own image (if you just want to show a static image if Adobe flash is not present) or you can specify your own custom HTML to do anything.

See the documentation in the first post for details on how to use these new features. The code has been updated to this latest version and it's working now on my site.

Can someone look at http://blumenau.smugmug.com/ and tell me why my stretchy slideshow is so small?

I followed the directions at: http://www.dgrin.com/showthread.php?t=141047

Thanks!

Originally Posted by dannahblumenau Can someone look at http://blumenau.smugmug.com/ and tell me why my stretchy slideshow is so small? I followed the directions at: http://www.dgrin.com/showthread.php?t=141047 Thanks!

It looks great to me. Can you describe what you see? Or post a screen shot?

Here's what I see:

Originally Posted by jfriend Hey, it looks really cool on my big screen! You feel like you're right in the pool with them.

Hi John,

Thanks. I like the size but now that I've checked it out for awhile I believe adding the stretchy slide show has really slowed everything down. It now takes a full ten seconds on my system for IE to even open the home page (it used to be almost immediate), then another four or so for the slide show to build. Firefox is faster, maybe four or five seconds for the page to open and then several seconds for the slide show to appear. I can handle the time it takes for the slide show to build but not having anything on the screen when someone tries to go to my page is a deal breaker. Any ideas, or shall I go back to the standard slide show for speed?

I had also added in the updated vanity url script and thought that slowed everything down since I had about 25 of them. I believe I completely deleted all of that stuff but the problem remains. I may add it back in if I clear up the stretchy slide show issue.

By the way... regarding the other post above I noticed that my slide show is fairly small when I'm logged in because of the rows of editing buttons, etc. that take away from the space available for the slide show. Maybe that's what dannahblumenau is experiencing...

Originally Posted by alorentzen Hi John, Thanks. I like the size but now that I've checked it out for awhile I believe adding the stretchy slide show has really slowed everything down. It now takes a full ten seconds on my system for IE to even open the home page (it used to be almost immediate), then another four or so for the slide show to build. Firefox is faster, maybe four or five seconds for the page to open and then several seconds for the slide show to appear. I can handle the time it takes for the slide show to build but not having anything on the screen when someone tries to go to my page is a deal breaker. Any ideas, or shall I go back to the standard slide show for speed? I had also added in the updated vanity url script and thought that slowed everything down since I had about 25 of them. I believe I completely deleted all of that stuff but the problem remains. I may add it back in if I clear up the stretchy slide show issue. By the way... regarding the other post above I noticed that my slide show is fairly small when I'm logged in because of the rows of editing buttons, etc. that take away from the space available for the slide show. Maybe that's what dannahblumenau is experiencing...

There's no question that loading bigger images take more time. It took about 5 seconds to load the first slideshow image for me. There are ways to "satisfy the user perception" without giving up. Your options are as follows:

1. Give yourself a good splash screen image. You are using the default little tiny Smugmug logo now. You should put in a link to one of your good images. That will come up fairly quickly and be on screen while the rest of the images load. Some people even put some text in the splash image that says "Loading...". You have a choice in the stretchy parameters for whether you want the splash image to automatically stretch to fit too. The splash image will go a long ways towards reducing the blank screen time. Look at my homepage. The first image that comes up is stretchy splash image.
2. The speed for the first slideshow image to load has to do with the speed of a person's connection, the size of the viewer's browser window, the size of the image chosen to fit in the browser window and Smugmug's responsiveness on any given day. If this is an issue for you, then you can limit the size of your images with the maxW and maxH parameters. The stretchy slideshow code will not stretch past those values if you set them.
3. You can give up on the stretchy slideshow and just go back to a smaller fixed size.

I would suggest trying option #1 first to see how it feels. On a big screen with a decent internet connection, your homepage is stunning so it would be nice to find a way to preserve that while still solving your issues.

FYI, you could have 1000 vanity URLs and you wouldn't notice a speed difference. The things that take time are things that load stuff over the internet and vanity URLs do none of that - it's just a tiny bit of local CPU before the page even loads and then it's completely done.

Originally Posted by jfriend There's no question that loading bigger images take more time. It took about 5 seconds to load the first slideshow image for me. There are ways to "satisfy the user perception" without giving up. Your options are as follows: Give yourself a good splash screen image. You are using the default little tiny Smugmug logo now. You should put in a link to one of your good images. That will come up fairly quickly and be on screen while the rest of the images load. Some people even put some text in the splash image that says "Loading...". You have a choice in the stretchy parameters for whether you want the splash image to automatically stretch to fit too. The splash image will go a long ways towards reducing the blank screen time. Look at my homepage. The first image that comes up is stretchy splash image. The speed for the first slideshow image to load has to do with the speed of a person's connection, the size of the viewer's browser window, the size of the image chosen to fit in the browser window and Smugmug's responsiveness on any given day. If this is an issue for you, then you can limit the size of your images with the maxW and maxH parameters. The stretchy slideshow code will not stretch past those values if you set them. You can give up on the stretchy slideshow and just go back to a smaller fixed size. I would suggest trying option #1 first to see how it feels. On a big screen with a decent internet connection, your homepage is stunning so it would be nice to find a way to preserve that while still solving your issues. FYI, you could have 1000 vanity URLs and you wouldn't notice a speed difference. The things that take time are things that load stuff over the internet and vanity URLs do none of that - it's just a tiny bit of local CPU before the page even loads and then it's completely done.

Hello again, John:

Regarding solution #1, my current problem is how long it takes to open the home page itself - not just to load the slide show once the page is open. Whatever page I'm at when I type in the home page url or click on my favorites (say I'm at a google search page), or even click on the "home" link from within my own site, it takes 10 seconds in IE before the page even pops on the screen - then a few secs before the slide show starts. Every other page on the site opens almost immediately with the photos populating within seconds.

I even created a duplicate gallery with much smaller photos so the file was half the size, and that didn't change anything.

I've now removed all of the stretchy slide show script (I think I have. Would you check for me?) and it still takes that much time to load. I'm positive it was not like that before I started messing with the stretchy script. Anything else you can think of or see that would cause that problem? If I try the same thing in Firefox the home page shows up in about 2 seconds and the slide show loads about 3-4 seconds later.

I'd sure like to figure out the problem and get back to the stretchy slide show on my home page if that's not the issue. Perhaps it's just coincidence and there's something else going on between SmugMug and my site but as I said, I'm positive this issue didn't existe before I input the stretchy script.

BTW... in the mean time, thanks partly to your compliments, I have a large slide show opening when someone clicks on the Most Popular Photos / Featured Photos dropdown link.

One last thought... recently switched from IE 7 to 8. Wonder if that was in the same time frame...

Your input is greatly appreciated.

I will probably put the vanity URLs I created back in to the site once I get this figured out, thanks. I posted something for you on the vanity URL thread regarding an anomaly I came across.

Just figured out another thing that may be the problem... my custom URL of mywaterpolopics.com. When I use mywaterpolopics.smugmug.com it opens almost immediately. I'll look into that with SmugMug...

Originally Posted by alorentzen Hello again, John: Regarding solution #1, my current problem is how long it takes to open the home page itself - not just to load the slide show once the page is open. Whatever page I'm at when I type in the home page url or click on my favorites (say I'm at a google search page), or even click on the "home" link from within my own site, it takes 10 seconds in IE before the page even pops on the screen - then a few secs before the slide show starts. Every other page on the site opens almost immediately with the photos populating within seconds. I even created a duplicate gallery with much smaller photos so the file was half the size, and that didn't change anything. I've now removed all of the stretchy slide show script (I think I have. Would you check for me?) and it still takes that much time to load. I'm positive it was not like that before I started messing with the stretchy script. Anything else you can think of or see that would cause that problem? If I try the same thing in Firefox the home page shows up in about 2 seconds and the slide show loads about 3-4 seconds later. I'd sure like to figure out the problem and get back to the stretchy slide show on my home page if that's not the issue. Perhaps it's just coincidence and there's something else going on between SmugMug and my site but as I said, I'm positive this issue didn't existe before I input the stretchy script. BTW... in the mean time, thanks partly to your compliments, I have a large slide show opening when someone clicks on the Most Popular Photos / Featured Photos dropdown link. One last thought... recently switched from IE 7 to 8. Wonder if that was in the same time frame... Your input is greatly appreciated. I will probably put the vanity URLs I created back in to the site once I get this figured out, thanks. I posted something for you on the vanity URL thread regarding an anomaly I came across.

Here's a network trace (from Firebug) after clearing my disk cache and loading your homepage. This is what it would be like of a first time visitor that doesn't visit any other smugmug sites (cache completely empty of helpful stuff).

I see 4 seconds to load your banner image, but nothing else that long until it starts loading your actual slideshow images. I don't see anything out of the ordinary here that would lead to a suggested change. There are lots fewer things to load the second time around because lots of these are in the disk cache.

Edit: just saw your most recent post. This data came from: http://mywaterpolopics.smugmug.com/.

First off, thank you for a great customization. It is working beautifully in firefox but I am having some issues in IE8. I think the issue involves my background image and the slideshow transparency as you mentioned though it is occurring even on small monitors (laptops). You mentioning adding a bgcolor parameter that will match the homepage design; however, my background image is a gradient. Any suggestions? Also I am utilizing the autoscale splash parameter but both in firefox and IE, the splash appears to be much smaller than the slideshow. I am not sure if this can be fixed but any help would be greatly appreciated.

Thanks in advance.

Originally Posted by RaymondPhotos First off, thank you for a great customization. It is working beautifully in firefox but I am having some issues in IE8. I think the issue involves my background image and the slideshow transparency as you mentioned though it is occurring even on small monitors (laptops). You mentioning adding a bgcolor parameter that will match the homepage design; however, my background image is a gradient. Any suggestions? Also I am utilizing the autoscale splash parameter but both in firefox and IE, the splash appears to be much smaller than the slideshow. I am not sure if this can be fixed but any help would be greatly appreciated. Thanks in advance.

You've limited your slideshow to no more than 1023px wide with the maxW parameter. When scaling the splash screen, it only picks standard sizes (to try to be fast for the splash screen). The XL size for the splash screen is 1024px wide which doesn't fit in a 1023 wide show so that means it has to pick the L size for the splash screen. I could add a parameter to let the splash screen be sized to a custom generated size, but I didn't originally do that because the idea is to get the splash screen up as soon as possible and custom sizes are slower than pre-built sizes.

I see what you're saying about the lack of background transparency in IE (I see it in IE7 too). I'm not sure why that is - I don't think it has anything to do with the stretchy code - I think it's just the way the slideshow is behaving on IE. The only solution I know of would be to make all your images be exactly the same aspect ratio and then lock the aspect ratio with the aspectHeightConstrain parameters. That would cause the slideshow to get sized to exactly the same size as your images will be so there would never be any extra background to show through and you could even let it get bigger than 1023 then.

Originally Posted by jfriend You've limited your slideshow to no more than 1023px wide with the maxW parameter. When scaling the splash screen, it only picks standard sizes (to try to be fast for the splash screen). The XL size for the splash screen is 1024px wide which doesn't fit in a 1023 wide show so that means it has to pick the L size for the splash screen. I could add a parameter to let the splash screen be sized to a custom generated size, but I didn't originally do that because the idea is to get the splash screen up as soon as possible and custom sizes are slower than pre-built sizes. I see what you're saying about the lack of background transparency in IE (I see it in IE7 too). I'm not sure why that is - I don't think it has anything to do with the stretchy code - I think it's just the way the slideshow is behaving on IE. The only solution I know of would be to make all your images be exactly the same aspect ratio and then lock the aspect ratio with the aspectHeightConstrain parameters. That would cause the slideshow to get sized to exactly the same size as your images will be so there would never be any extra background to show through and you could even let it get bigger than 1023 then.

Thank so much. On my personal computer the splash is showing up perfectly and no vertical scroll bar present, but on a friend's laptop both were having issues. I am not going to worry about it.

As far as the adding the aspect ration parameter, I was already working on cropping all of my photographs to the same size and was going to add that code subsequently. So all seems good. Thanks for the help.

dear, how that bgcolor parameter exactly works? I've been trying with it with no luck.

2nd problem is that the slideshow box is stretched for me, but I don't feel the photos are. Can you take a look at my site and give me a screenshot?

I think something is wrong in my code

<html>
<bgcolor="#141414">
<div id="bioText">LENS Photography's concept is very simple. People go to the website, find photos and buy them for their business/personal use. In addition, they hire us to do all sort of photography, we shoot and put them on the website, and the same story happens again.
We offer:
* Print Order
* Merchandise Order
* Public/Private Galleries
* Photography Lessons
* And more...</div>
********>
var ssConfig = {
    AlbumID: '6820591',
    AlbumKey: 'xZsSy',
    newWindow: 'false',
    transparent: 'true',
    splash: 'http://www.lens-bh.com/photos/633062244_Qju4H-L.jpg',
    captions: 'true',
    extraH: "50",
    showLogo: 'false',
    clickToImage: 'false',
    showThumbs: 'false',
    showButtons: 'false',
    randomStart: 'false',
    splashDelay: '7000',
    randomize: 'true',
    crossFadeSpeed: '600'
    
};

InsertStretchySlideshow(ssConfig);
</********
</html>

Originally Posted by Mohamed.Ghuloom dear, how that bgcolor parameter exactly works? I've been trying with it with no luck. 2nd problem is that the slideshow box is stretched for me, but I don't feel the photos are. Can you take a look at my site and give me a screenshot? I think something is wrong in my code <html> <bgcolor="#141414"> <div id="bioText">LENS Photography's concept is very simple. People go to the website, find photos and buy them for their business/personal use. In addition, they hire us to do all sort of photography, we shoot and put them on the website, and the same story happens again. We offer: * Print Order * Merchandise Order * Public/Private Galleries * Photography Lessons * And more...</div> ********> var ssConfig = { AlbumID: '6820591', AlbumKey: 'xZsSy', newWindow: 'false', transparent: 'true', splash: 'http://www.lens-bh.com/photos/633062244_Qju4H-L.jpg', captions: 'true', extraH: "50", showLogo: 'false', clickToImage: 'false', showThumbs: 'false', showButtons: 'false', randomStart: 'false', splashDelay: '7000', randomize: 'true', crossFadeSpeed: '600' }; InsertStretchySlideshow(ssConfig); </******** </html>

Sorry, but I don't really know much about the bgColor parameter other than what it says here.

Your images aren't stretching because most of the photos are limited to the "L" size so Smugmug won't offer anything larger than that. I don't know if that's as large as the photos are, if you've limited the gallery to "L" or if they need smugmongous sizes generated. But, until you can see larger sizes in the gallery itself, the larger sizes won't show in the slideshow.