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

All these full screens look great! Guess I'm missing a step (I've been up long now!) but I can get the slideshow to work. In the CSS area should I take all code out and just put this one in? Right now I have the code in to show the homepage as a slideshow but when I put the other in (before or after) everything goes blank but the bottom. Much thanks in advance!

Eman
http://www.efouru.smugmug.com/
http://www.efouru.com

Originally Posted by eman11 All these full screens look great! Guess I'm missing a step (I've been up long now!) but I can get the slideshow to work. In the CSS area should I take all code out and just put this one in? Right now I have the code in to show the homepage as a slideshow but when I put the other in (before or after) everything goes blank but the bottom. Much thanks in advance!

Before I can tell what's going on you will need to put in all the code for the tutorial. Put the CSS in for now and then we'll see if there are any problems. You are also missing the album id in the JavaScript.

I'm having some trouble with my slideshow in Internet explorer. I was making some updates and now my slideshow doesn't work in internet explorer. Any ideas?

Originally Posted by em8ch I'm having some trouble with my slideshow in Internet explorer. I was making some updates and now my slideshow doesn't work in internet explorer. Any ideas?

You have an extra comma in the property list for the slideshow. Remove the comma on this line...

viewerItemDropShadow:'',

The last item in any JavaScript list must never have a comma or it will break.

Thanks Justin, I made that update, but I still was unable to get the slideshow to work in ie

Originally Posted by em8ch Thanks Justin, I made that update, but I still was unable to get the slideshow to work in ie

I might have a bug. Can you try removing the pound sign from the backgroundColor property?

That seemed to do the trick!! Thanks!!

I don't suppose you know how to only show the transparent bar when you hover over the navbar do you?

Thank you. I have put those items in and the homepage is now blank, with just the wording at the bottom. Thank you for looking!

Originally Posted by eman11 Thank you. I have put those items in and the homepage is now blank, with just the wording at the bottom. Thank you for looking!

You still need to put an album id in the JavaScript. Check the tutorial for how to do that and let me know if it's still not working.

Went to your Website, dl, install..easy! Thanks!!

Thank you for looking and sorry that I seem to be missing something, but still no luck. Help

My my my! I got it!! Thank you! Thank you, it's great!

How about adding a splash page for people with a slow load internet? It would beat looking at a blank screen.

I must be missing something. I feel its something in the css but cant work out what :( I am pretty sure I have the gallery settings correct, put in the stuff from the tutes but I am still not getting it. ( insert nail tapping here !) Its driving me batty.
When I hit the back button it tells me the preview failed to load?
http://janstewartphotography.smugmug.com/
cheers
Jan

I got it! one little / mark in the gallery no.......now off to sort the header........you guys are awesome. Why didn't someone tell me this could be fun

I second the splash page idea, how does one go about incorporating that into the script? thanks nevermind, found there there is a line in there to load a splash page.

Originally Posted by eric-holmes How about adding a splash page for people with a slow load internet? It would beat looking at a blank screen.

The loadingImage property isn't really setup to be used as a splash image but it's a great idea. It may already work just fine. I've never tested it for that purpose but you can guarantee it will be in the next release

the loadingImage works fine to load up a X2 size or so picture before the rest of the slideshow loads. I tried to make the full width header work but it doesn't. i copied both transparent background and full width header scripts to the CSS box but only the background part worked. i pasted the full width header last, does that matter? the header is made with the easy customizer. thanks sammylophotos.com

Originally Posted by maximus96 the loadingImage works fine to load up a X2 size or so picture before the rest of the slideshow loads. I tried to make the full width header work but it doesn't. i copied both transparent background and full width header scripts to the CSS box but only the background part worked. i pasted the full width header last, does that matter? the header is made with the easy customizer. thanks sammylophotos.com

The loading image looks good. I'll probably make some adjustments to that in the next release so it fades in nicely.

It looks like you have an error in your css. The following is not a legal css comment...

/---end full screen

Remove that and see if that helps.