Originally Posted by LupaPhotography Thank you very much J for your quick response. The gallerie issue was resolved.I just made my banner smaller and added the supersize line. But only a fraction of the picture is showing. I will try making it smaller later on today. An more suggestions? I would like to move my menu up and maybe having at the same level as the banner. Can you please direct me to where I can find some good info to achieve that? Luis

If you read about the superSize parameter in the reference documentation, it will explain how it works (with diagrams). Basically, you can't put a round peg in a square hole. If the space available for your slideshow is a different shape than your slideshow images, then the slideshow images will NOT fit perfectly into the page. They just won't. At this point, there are only two choices.

1) Make the images as large as they can without clipping them or causing scrolling (stretchy).
2) Scale the image large enough to fill the entire space available, clipping off the parts that overflow an edge (stretchy + superSize).

Since you don't control the browser window size, you have to decide which behavior you want when the shapes don't match. In the first option, you get extra space on one size of the images. In the second option, it fills the space, but clips off some image that overflows the space. Images can only be scaled proportionally so when the space isn't the same shape, it just isn't a perfect fit. The only way you can make it look like a perfect fit is to go with a fixed size homepage (and not use stretchy and not take advantage of larger screens) where you just code in extra space in the whole design on the edges.

Originally Posted by jfriend How fast are you doing the fade transition? Can you supply a link to your site so I can take a look?

Yeah sure John. My site is http://stevegphotography.com and the code I'm using is as follows:

<script type="text/javascript">
JF.InsertSlideshowHere({
galleryURL: "http://www.stevegphotography.com/Weddings/Wedding-Portfolio/10955149_Frqrk",
splashImageURL: "http://www.stevegphotography.com/photos/1234530269_6WKPo-O.png",
height: "496",
width: "744",
randomSlideStart: "true",
randomSlideOrder: "true",
topAlign: "center",
betweenTransitionsTime: "2.0",
transitionDuration: "1.0",
transitionsList: "Fade"}
);
</script>

Originally Posted by sidepocket Yeah sure John. My site is http://stevegphotography.com and the code I'm using is as follows: <script type="text/javascript"> JF.InsertSlideshowHere({ galleryURL: "http://www.stevegphotography.com/Weddings/Wedding-Portfolio/10955149_Frqrk", splashImageURL: "http://www.stevegphotography.com/photos/1234530269_6WKPo-O.png", height: "496", width: "744", randomSlideStart: "true", randomSlideOrder: "true", topAlign: "center", betweenTransitionsTime: "2.0", transitionDuration: "1.0", transitionsList: "Fade"} ); </script>

If I don't have a lot of other things vying for my CPU, I get buttery smooth fade transitions in both Chrome and Firefox 4 on your site. If I have a bunch of other things running at the same time (like 3-4 other slideshows), then I start to see a little loss of smoothness, just because my CPU can't do all of them smoothly at once. This will depend a lot on your particular config, probably both CPU and video card. Making the transition duration a little longer should be a little less demanding on your system.

Originally Posted by jfriend If I don't have a lot of other things vying for my CPU, I get buttery smooth fade transitions in both Chrome and Firefox 4 on your site. If I have a bunch of other things running at the same time (like 3-4 other slideshows), then I start to see a little loss of smoothness, just because my CPU can't do all of them smoothly at once. This will depend a lot on your particular config, probably both CPU and video card. Making the transition duration a little longer should be a little less demanding on your system.

Thanks John, that's kinda what I figured. I appreciate it :)

John... I have installed your slideshow and have tested many of the options. It's very well done and I appreciate your technical skills. I have a couple of questions that I am sure you can answer easily. First, what should be the dimensions of my banner that I will be creating in Photoshop. Second, why won't "Gallery" in my navbar go to Galleries? My link is http://robertnlynn.smugmug,com .

Originally Posted by BobLynn John... I have installed your slideshow and have tested many of the options. It's very well done and I appreciate your technical skills. I have a couple of questions that I am sure you can answer easily. First, what should be the dimensions of my banner that I will be creating in Photoshop. Second, why won't "Gallery" in my navbar go to Galleries? My link is http://robertnlynn.smugmug,com .

It looks like you've copied my header style (which is OK). For the CSS and size you have now, you need a banner image that's 31x370. It can be a little taller or a little wider, but you'd have to adapt the dimensions in your CSS if you change its size from 31x370.

It looks to me like you haven't implemented the galleries page customization to make the /galleries work - it is not built into Smugmug. See customization #31 here.

Guys what is a failure in my coding for this frame on my slideshow ...

please take a note from my homepage...

Originally Posted by Pshots Guys what is a failure in my coding for this frame on my slideshow ... please take a note from my homepage...

Replace your frame CSS with this:

/* position frame on top of slideshow */
#myFrame {
    position: absolute;
    left: 0;
    right: 0;
    background: transparent url("http://pshots-photography.smugmug.com/photos/1236395340_q4LCz-O.png") no-repeat;
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=image, src='http://pshots-photography.smugmug.com/photos/1236395340_q4LCz-O.png');
    width: 950px;
    height: 634px;
    z-index: 21; /* max slideshow z-index is 20 so this is on top of slideshow */
}

/* position slideshow to line up with opening in the frame */
#myFrameSlideshow {
    position: relative;
    left: 25px; /* size of frame border */
    top: 25px; /* size of frame border */
    height: 588px;
    width: 900px;
}

#myFrameOuter {
    position: relative;
    width: 950px;
    height: 634px;
    margin: 0 auto;
}

#bioBox .boxBottom {padding: 0 !important;}

Be sure to remove your two copies of #myFrameOuter CSS that you have in the middle of your CSS (that is not at the end with the other frame CSS).

Then, change these parameters to your slideshow to this:

height: "588",
width: "900",
stretchy: "false",

It should look like this:

Originally Posted by jfriend Replace your frame CSS with this: /* position frame on top of slideshow */ #myFrame { position: absolute; left: 0; right: 0; background: transparent url("http://pshots-photography.smugmug.com/photos/1236395340_q4LCz-O.png") no-repeat; _background: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=image, src='http://pshots-photography.smugmug.com/photos/1236395340_q4LCz-O.png'); width: 950px; height: 634px; z-index: 21; /* max slideshow z-index is 20 so this is on top of slideshow */ } /* position slideshow to line up with opening in the frame */ #myFrameSlideshow { position: relative; left: 25px; /* size of frame border */ top: 25px; /* size of frame border */ height: 588px; width: 900px; } #myFrameOuter { position: relative; width: 950px; height: 634px; margin: 0 auto; } #bioBox .boxBottom {padding: 0 !important;} Be sure to remove your two copies of #myFrameOuter CSS that you have in the middle of your CSS (that is not at the end with the other frame CSS). Then, change these parameters to your slideshow to this: height: "588", width: "900", stretchy: "false",

Thx John

A question : whats up when I set stretchy: "true"?
Is it possible or no ?

Originally Posted by Pshots Thx John A question : whats up when I set stretchy: "true"? Is it possible or no ?

Your frame is a fixed size, therefore the slideshow has to be a fixed size to fit exactly in the frame. Stretchy tells the slideshow NOT to be a fixed size and therefore it doesn't fit into the frame properly. Stretchy must be set to false.

Originally Posted by jfriend Your frame is a fixed size, therefore the slideshow has to be a fixed size to fit exactly in the frame. Stretchy tells the slideshow NOT to be a fixed size and therefore it doesn't fit into the frame properly. Stretchy must be set to false.

I know my frame is not strechy.. is it possible to do that

Originally Posted by Pshots I know my frame is not strechy.. is it possible to do that

I'm sure it's possible, but not something I know how to do and not something I think can be done with just CSS - it would probably require custom programming.

Just implemented this on my site. Fantastic documentation and work! Love finally seeing my slideshows on the iphone.

Question though.... there is a shadowed transparent bounding box around the captions that stretches the almost the width of the photo. Anyway to auto-size that to fit the length of the text? Also that transparent box is even showing up when there is no caption.

www.bhockensmith.com/portfolio/events

Hi,

I'm not sure if this is the right forum for this. For some reason, my galleries have changed their configuration. Now instead of the selected picture showing up on the right hand side of the thumbnails, they show up underneath and there is a big empty space on the right. Does this have anything to do with this slideshow customization?

www.wesleywilliamsphotography.com

Thanks

Wesley

Originally Posted by bhockensmith Just implemented this on my site. Fantastic documentation and work! Love finally seeing my slideshows on the iphone. Question though.... there is a shadowed transparent bounding box around the captions that stretches the almost the width of the photo. Anyway to auto-size that to fit the length of the text? Also that transparent box is even showing up when there is no caption. www.bhockensmith.com/portfolio/events

The idea behind the caption background is to make the caption more visible against all types of photo backgrounds. If you want to get rid of the background entirely, it can be disabled with CSS customization.

An empty caption should not show. It looks like there is a bug there. I'll put that on the bug list and fix it. If you hide the caption background per your previous request, then that's probably a work-around for this issue too.

I have not found a way to auto-size the box around the captions and still achieve the dynamic CSS layout it requires.

Could you refresh me on the CSS to hide the caption backgrounds?

Originally Posted by jfriend The idea behind the caption background is to make the caption more visible against all types of photo backgrounds. If you want to get rid of the background entirely, it can be disabled with CSS customization. An empty caption should not show. It looks like there is a bug there. I'll put that on the bug list and fix it. If you hide the caption background per your previous request, then that's probably a work-around for this issue too. I have not found a way to auto-size the box around the captions and still achieve the dynamic CSS layout it requires.

Originally Posted by bhockensmith Could you refresh me on the CSS to hide the caption backgrounds?

Add this CSS after the slideshow CSS:

.slideCaptionOverlay .slideCaptionHolder {background: none;}

I added that line to my CSS and it didn't change anything.

Originally Posted by jfriend Add this CSS after the slideshow CSS: .slideCaptionOverlay .slideCaptionHolder {background: none;}

Originally Posted by bhockensmith I added that line to my CSS and it didn't change anything.

It has to go "after the slideshow CSS" which means after all the slideshow CSS. Put it at the very end of everything. Right now, you have it at the end of your own customizations, but before the stock slideshow CSS.

Thanks!

Originally Posted by jfriend It has to go "after the slideshow CSS" which means after all the slideshow CSS. Put it at the very end of everything. Right now, you have it at the end of your own customizations, but before the stock slideshow CSS.