If you are looking for a "full screen" or "supersized" HTML5 slide show on your SmugMug home page like this or this, you are in the right place. In addition to the slide show, the CSS for this tutorial will also customize a header made with the easy customizer to be full width and have an optional transparent background.

The Tutorial

You can find the tutorial for this slideshow on our blog here.

Problems or Questions

If you're having trouble with the slideshow or have questions about tweaking it, check out our fullscreen slideshow FAQ first. Post to this thread if you don't find your answers there and I'll answer as soon as I can (sometimes I'm really busy, sometimes I can answer quickly). Don't forget to show us your site when you get it up and running!

Additional Properties

For a full list of available properties that allow you to tweak the slideshow, check out this PDF.

Upgrading from a previous version.

The current version is 1.1.0 and was released on November 5, 2012.

Download the latest version of the slideshow code at this link.

To upgrade your FastLine slideshow you will need to replace the compressed JavaScript while leaving the JavaScript that creates the slideshow intact. Not sure what the heck that means? No worries!

The JavaScript you want to leave intact is at the top of the FastLine code and starts and ends like this…



The JavaScript you need to replace is a jumbled mess and looks something like this…



Once you have replaced the JavaScript, click update in the advanced customizer and you're done.

Please note the following before posting for help…

This tutorial is for customizing the slideshow and header on the homepage only. Also, we are only offering support for the CSS layout provided. If you are looking to do something different, search or ask around. There is a lot of good info floating around this place!

Feel free to tell us your opinions or give us feedback on the slideshow. We hope you enjoy it!

I would just like to say thanks once again. I have loved my site even more since I have done this! I get tons of compliments now. Feel free to check it out.

http://www.ericholmesphotography.com

Originally Posted by eric-holmes I would just like to say thanks once again. I have loved my site even more since I have done this! I get tons of compliments now. Feel free to check it out. http://www.ericholmesphotography.com

that is a great looking site! Nice work!

I'm contemplating trying to do this on my website. Thanks for the inspiration.

Originally Posted by thenimirra that is a great looking site! Nice work! I'm contemplating trying to do this on my website. Thanks for the inspiration.

how did u put the social logos on your home page ,clean site

Originally Posted by eric-holmes I would just like to say thanks once again. I have loved my site even more since I have done this! I get tons of compliments now. Feel free to check it out. http://www.ericholmesphotography.com

I love your site Eric! You should post your entire css code! lol! I would be able to get some sleep at night! haha Thanks for showing.
Jodi

Hi guys! My transparent header image is displaying everywhere on my site except on the slideshow. Here is my CSS for the header:

/* EZ Customizer Header. */
#customHeaderContainer {
width:100% !important;
height:auto !important;
padding:0 !important;
background:url(http://chriswphotography.smugmug.com...84_TYCmM-M.png) repeat;
_background: none;
_filter:progidXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://chriswphotography.smugmug.com/photos/1249390384_TYCmM-M.png');
}

#customHeaderContainer table {
padding:5px 15px 0;
}

What's missing?

Originally Posted by ChrisWphotography Hi guys! My transparent header image is displaying everywhere on my site except on the slideshow. Here is my CSS for the header: /* EZ Customizer Header. */ #customHeaderContainer { width:100% !important; height:auto !important; padding:0 !important; background:url(http://chriswphotography.smugmug.com...84_TYCmM-M.png) repeat; _background: none; _filter:progidXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://chriswphotography.smugmug.com/photos/1249390384_TYCmM-M.png'); } #customHeaderContainer table { padding:5px 15px 0; } What's missing?

Never mind. I didn't realize that this code was duplicated in the slideshow CSS.

First of all i tried searching for an answer for this but came up with so many results that i just got lost.

Im nearly there with the homepage but how do i get the nav bar behind the transparent bar, at the moment it sits just below the header.

Second is there something in Fastline's CSS that turns Smugmugs footer to full even though ive selected mini.

Thirdly in the gallery pages is there a way of adding more space between my text header (created in the Easy Customizer) and the nav bar.
Thanks
J.

Awesome bit of code Justin

Hope you can comment/help with a couple of things



Pics look awfully large and kinda zoomed in with sometimes tops off, now I know there is a bit of code to remove "viewerItemCrop:true," but that makes it look naff lol

Also I have JTF slide set up in my biobut I dont use that anyway, will its prescence in CSS upset things, hilarious I seem to have 2 copies in there but forget what the heck I did lol

thanks again for awesome slideshow

Originally Posted by Coati Pics look awfully large and kinda zoomed in with sometimes tops off, now I know there is a bit of code to remove "viewerItemCrop:true," but that makes it look naff lol

I'm glad you like the slideshow! Check out #9 in our slideshow FAQs for some clarification on this issue.

How did you get your header like that? I'm having so much trouble getting a header to look like yours. Any help would be appreciated!

Thanks,

Bill Hilmer
billhilmer@gmail.com

Originally Posted by eric-holmes I would just like to say thanks once again. I have loved my site even more since I have done this! I get tons of compliments now. Feel free to check it out. http://www.ericholmesphotography.com

Originally Posted by bhilmer How did you get your header like that? I'm having so much trouble getting a header to look like yours. Any help would be appreciated! Thanks, Bill Hilmer billhilmer@gmail.com

Is your site http://billhilmer.smugmug.com? If so, I'm seeing the transparent header. Let me know what the issue is if you are still having one.

Originally Posted by eric-holmes I would just like to say thanks once again. I have loved my site even more since I have done this! I get tons of compliments now. Feel free to check it out. http://www.ericholmesphotography.com

Eric Holmes, I would love to have my navbar in the center of my header just as yours is. Could you please tell me how you were able to set it up like that? I've been up all night trying to figure it out and I'm just stomp at this point thank.

Originally Posted by eric-holmes I would just like to say thanks once again. I have loved my site even more since I have done this! I get tons of compliments now. Feel free to check it out. http://www.ericholmesphotography.com

Love your home page!!!

Originally Posted by eric-holmes I would just like to say thanks once again. I have loved my site even more since I have done this! I get tons of compliments now. Feel free to check it out. http://www.ericholmesphotography.com

I really like your footer... would like to do one similar for my site... can you point me to where you got the instructions for that?

Originally Posted by eric-holmes I would just like to say thanks once again. I have loved my site even more since I have done this! I get tons of compliments now. Feel free to check it out. http://www.ericholmesphotography.com

I would like to have a top nav bar something like yours..can you direct me on how to accomplish that?

Originally Posted by Linisa I would like to have a top nav bar something like yours..can you direct me on how to accomplish that?

Sounds like you and I are after the same thing:). I'll let you know what I find...

Originally Posted by eric-holmes I would just like to say thanks once again. I have loved my site even more since I have done this! I get tons of compliments now. Feel free to check it out. http://www.ericholmesphotography.com

Eric,
When I grow up I want to be just like you.:) LOVE the site man - really nice work. Can you point me in the direction of how you got the semi-transparent header at the top of your site? Was that just a large graphic or something else? I can create mine in Photoshop or whatever, just not sure how you implemented.
Also, (I'm gonna be greedy), on your sub-pages, is that a standard SmugMug gallery?

Thanks!
Marty
www.martinrayvaughan.com (then go to a Photography link to see my smugmug section).

Originally Posted by eric-holmes I would just like to say thanks once again. I have loved my site even more since I have done this! I get tons of compliments now. Feel free to check it out. http://www.ericholmesphotography.com

Hello Eric... I am looking to do something similar to what you have..talking more specifically about the having a simple NavBar with a dropdown menu for the portfolio...

I have tried several things but can't find a way to...

Can you throw a little light on how achieved it?

thanks in advance.

Originally Posted by paume Hello Eric... I am looking to do something similar to what you have..talking more specifically about the having a simple NavBar with a dropdown menu for the portfolio... I have tried several things but can't find a way to... Can you throw a little light on how achieved it? thanks in advance.

Have you visited the Dropdown sticky thread? You can probably get an answer there to what you're trying to do.