Are you stuck installing the fullscreen slideshow on your SmugMug homepage? Have a question? Check out the FAQs below! If you don’t see the answer to your question, post in this thread on dgrin.

  1. I can’t open the JavaScript file (fullscreen.js).

    This usually happens on a Windows computer when you double click the file. Windows is trying to run the code rather than open it in a text editor.

    To open the code in a text editor such as Notepad, right click the file and choose “Open With…”. You can also open Notepad (or the text editor of your choice) and choose File > Open.

  2. My slideshow isn’t showing up!

    The cause for a broken slideshow can be a number of things. Check below for a list of possible causes.

    • You didn’t copy all of the JavaScript. Try copying and pasting the JavaScript again, making sure you got all of it (there is a lot).
    • You didn’t copy all of the CSS. Try copying and pasting the CSS again, making sure you got all of it.
    • The source gallery is password protected.
    • The largest size for the source gallery isn’t set to X3.
    • The source gallery has External Links set to no.
    • You have an error in your JavaScript for the slideshow. Try reading the tutorial again and insert the JavaScript carefully.
    • You have an error in the JavaScript from another Dgrin tutorial. Are your other customizations working? If not, one of them may be causing the issue. Post in the thread for that customization so someone can look and see if you in fact have an error.

  3. How do I make a transparent header?

    There are two transparent png files included with the slideshow, one white and one black. Choose your desired color, upload the png to SmugMug and grab a link to the image. Once you have a link to the png, find the following CSS in your Advanced Customizer and paste the red link like below…

    /* EZ Customizer Header. */
.homepage.notLoggedIn #customHeaderContainer {
	width:100% !important;
	height:auto !important;
	padding:0 !important;
	background:url(http://www.smugmug.com/photos/1155664375_ZX6iT-O.png) repeat;
}

  4. How do I get a stretchy header on my entire site?

    The header will be positioned full width at the top of the homepage only. Remove the code in red below to have a full width header on your entire site.

    /* EZ Customizer Header. */
.homepage.notLoggedIn #customHeaderContainer {
	width:100% !important;
	height:auto !important;
	padding:0 !important;
	background:url() repeat;
}
.homepage.notLoggedIn #customHeaderContainer table {
	padding:5px 15px 0;
}

  5. My header or footer look weird!

    This is usually caused by using the Advanced Customizer to create your footer or header. The tutorial is setup to style a custom header and footer created with the Easy Customizer only. If you did use the Advanced Customizer to create your header or footer, make sure it’s wrapped in a div tag like this…

    Your header should look like this…

    <div id="customHeaderContainer"> YOUR_HEADER_CODE_HERE </div>

    Your footer should look like this…

    <div id="customFooter"> YOUR_FOOTER_CODE_HERE </div>

  6. How do I adjust the time in between photos?

    This is controlled by the speed property and measured in milliseconds. 3000 milliseconds = 3 seconds. You can edit the speed property in the JavaScript for your slideshow, it is shown in red below.

    var ss = new FL.widget.Slideshow({
	id:document.body,
	sourceType:'smugmug',
	source:{
		APIKey:'7w6kuU5Ee6KSgRRExf2KLgppdkez9JD2',
		gallery:'15197672_sARfb'
	},
	speed:3000
});

  7. How do I adjust the transition speed.

    This is controlled by the viewerTransitionSpeed property and measured in seconds. You can edit the speed property in the JavaScript for your slideshow, it is shown in red below.

    var ss = new FL.widget.Slideshow({
	id:document.body,
	sourceType:'smugmug',
	source:{
		APIKey:'7w6kuU5Ee6KSgRRExf2KLgppdkez9JD2',
		gallery:'15197672_sARfb'
	},
	viewerTransitionSpeed:0.7
});

  8. Can the photos be randomized?

    Yes! Add the property in red below to the JavaScript for the slideshow. If you add it as the last property in the list, don’t include the comma.

    var ss = new FL.widget.Slideshow({
	id:document.body,
	randomize:true,
	sourceType:'smugmug',
	source:{
		APIKey:'7w6kuU5Ee6KSgRRExf2KLgppdkez9JD2',
		gallery:'15197672_sARfb'
	}
});

  9. How do I keep my photos from being cropped?

    To achieve the “fullscreen” look the slideshow crops your photos off the edges of the browser. If you would like to leave extra space around your photos instead of crop them, remove the property in red below from your JavaScript…

    var ss = new FL.widget.Slideshow({
	id:document.body,
	sourceType:'smugmug',
	source:{
		APIKey:'7w6kuU5Ee6KSgRRExf2KLgppdkez9JD2',
		gallery:'15197672_sARfb'
	},
	viewerItemCrop:true
});

  10. My loading image looks to big.

    This is probably because you didn’t grab the “Original link for the image. Make sure your loading image ends in -O.gif and not -X3.gif or some other size prefix.

  11. The slideshow is showing up on other pages of my site.

    This happens when you have the “Multi Homepage” hack installed. Do you know the pages that you have created like /galleries or /find? The tutorial code looks for the home pages below and if it finds one, it doesn’t run the slideshow. It’s only setup to run on the actual home page. If you don’t see your custom page name below, you will need to add it to the code.

    These custom homepages are already included in the slideshow code… galleries, map, featured, recent, featured-events, find and mysearch.

    First add it to the CSS by replacing “mycustompage” with the name of your custom homepage like below.

    /* CSS to support the multi homepage hack. */
.mycustompage,
.galleries,
.map,
.featured,
.recent,
.featured-events,
.find,
.mysearch {
	overflow:auto !important;
}

.mycustompage #customFooter, 
.mycustompage #footer_wrapper, 
.mycustompage #cobrand_footer,

    Next add it to the JavaScript by replacing “mycustompage” with the name of your custom homepage like below.

    var hideOn = [
	'mycustompage',
	'galleries',
	'map',
	'featured',
	'recent',
	'featured-events',
	'find',
	'mysearch'
];

  12. How do I use this slideshow on my gallery pages.

    Sorry, we are not offering free support for that customization at this time.