[QUOTE=Justin B;1553577]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.

Hello, my homepage: www.scubahead.com full screen slideshow randomly stop (or freeze) after about 10-12 slides. The slideshow contains 35 images. My other question, is there a limit on the number of images in the slide show? Thanks.

Ok so just tried this and it's not working. New to all this - followed all the instructions but nothing happened. It looks like its about to load, my font changes to another style then back (why?) but no slideshow starts. Please advise.

[QUOTE=divefishski;1779241]

Originally Posted by Justin B 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. Hello, my homepage: www.scubahead.com full screen slideshow randomly stop (or freeze) after about 10-12 slides. The slideshow contains 35 images. My other question, is there a limit on the number of images in the slide show? Thanks.

Here's updates on my case on this thread:
The freezing issue in my homepage slideshow is only contained on Win7 with IE9 32bit. My Win7 IE9 64bit, WinXP IE7 32bit and iPad IOS works perfectly well. The freezing issue is now resolved on the Win7 with IE9 32bit browser by "turning off" the compatibility view, see http://www.sevenforums.com/browsers-mail/114150-internet-explorer-9-compatibility-mode.html

My slideshow has been working perfectly for a year or so and I've been getting by with EZ navs. For the past several days I've been messing around trying to get a custom nav bar in the header as well as my current logo. I've no success with that at all and I have somehow lost my slide show completely. I've compared my css and js from before I started messing up (smug emailed my settings before I started so I have the original to compare)

My site opens at the home page which is (used to be) the slideshow. The navs are alive as is the logo -but no slideshow.

Thanks for any help
htpp://www.charlesdalyphotography.com

interesting. as i was sending the above my computer was running very slowly. I cleaned it up and...there is my slideshow working again. I guess it stopped off in cyberspace for a bit.

Please disregard my post above this. Unless of course you can help me with the pesky custom navs?
Thanks!
http://www.charlesdalyphotography.com

Originally Posted by charlesdaly My slideshow has been working perfectly for a year or so and I've been getting by with EZ navs. For the past several days I've been messing around trying to get a custom nav bar in the header as well as my current logo. I've no success with that at all and I have somehow lost my slide show completely. I've compared my css and js from before I started messing up (smug emailed my settings before I started so I have the original to compare) My site opens at the home page which is (used to be) the slideshow. The navs are alive as is the logo -but no slideshow. Thanks for any help htpp://www.charlesdalyphotography.com

I've also been messing around trying to get a custom nav. No luck yet..

Hello, I installed your full-screen slideshow and It looks great on my desktop, but with my laptop the photos are cut off on top. Any help would be appreciated.

Site is markpeckphotography.com

Thank you!

Hi afp,
I couldn't look at your site since you didn't post your url. If you go (right now before you forget :), go to the top of this page, click on the clip board icon (top, right) which will open your profile. Click on Edit signature and you can type in your name AND your url. If you write it with http://www.xxx it will be a hyper link and anyone can just click it to go to your site.

I gave up on the drop down nav since I couldn`t `get it` and instead I went to Plan B. Your can custom make a logo in PS and then use EZ cutomizer for the rest. I even discovered how to change the grey color of the Top Box to a custom color which matches my background. Hope this helps.
Charles

Hey all. I have the slideshow mostly operational. I however, cannot get the navigation bar to work. I tried to add the links in the easy customizer, and you can't click them. I also cannot get the transparent bar to load up behind it. f8photography.smugmug.com

CSS:

/************************************************** ******
* Fullscreen Slideshow CSS
*
* By: FastLine Media - http://www.fastlinemedia.com
************************************************** *****/

html, body {
height: 100% !important;
}

/* Slideshow Position */
.fl-widget-slideshow {
position:absolute;
z-index:1;
top:0;
left:0;
}

/* Hide Scrollbars */
.notLoggedIn.homepage {
overflow:hidden;
}

/* Position the #bodyWrapper above the slideshow. */
.notLoggedIn.homepage #bodyWrapper {
position:relative;
z-index:2;
}

/* Hide the homepage. */
.notLoggedIn div#homepage {
display:none;
}

/* CSS for the homepage galleries hack. */
.galleries div#homepage {
display:block !important;
}
.galleries {
overflow:auto !important;
}

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

/* EZ Customizer Footer. */
.homepage.notLoggedIn #customFooter {
position:fixed;
bottom:25px;
width:100%;
padding:0 !important;
}

/* Put SmugMug's footer on the bottom of the page. */
.notLoggedIn.homepage #footer_wrapper,
.notLoggedIn.homepage #cobrand_footer {
position:fixed;
bottom:0;
width:100%;
padding:0 !important;
}
.notLoggedIn.homepage #footer_wrapper a,
.notLoggedIn.homepage #footer_wrapper .text,
.notLoggedIn.homepage #cobrand_footer a,
.notLoggedIn.homepage #cobrand_footer .text {
font-size:10px;
color:#999999;
}
.notLoggedIn.homepage #footer {
width:auto !important;
}
.notLoggedIn.homepage #feeds {
display:none;
}




/* Start css in the Advanced Site-wide Customization section */
/* Makes the Gallery Description and bioBox Text Edit Area larger */

#newBio,
#newDescription {
width: 99% !important;
height: 300px !important;}


/* hides the map-it button on homepages */
.notLoggedIn .homepage #breadcrumb {
display: none;}


/* hides breadcrumbs on category pages for logged out views */
.notLoggedIn .category #breadcrumb {
display: none;}


/* changes the background of the slideshowBox to black */
#slideshowBox .boxBottom {background: black;}


/* unhides the boxTops */
#bioBox .boxTop {
display: block;}


/* search results page */
.searchResults #stylebar,
#otherSearches {
display: none;}


/* style search box */
#mySearch {
display: none;
width: 750px;
margin: 5px auto 15px;}


/* galleries find bio pages */
.homepage #bioBox,
.homepage #categoriesBox,
.homepage #communitiesBox,
.homepage #datesBox,
.homepage #featuredBox,
.homepage #ffBox,
.homepage #galleriesBox,
.homepage #keywordsBox,
.homepage #mapBox,
.homepage #popularPhotos,
.homepage #recentPhotosBox {
display: none;}

.galleries #slideshowBox,
.galleries #photoVideoBox {
display: none;}

.galleries #categoriesBox,
.galleries #galleriesBox {
display: block;}

.bio #slideshowBox,
.bio #photoVideoBox {
display: none;}

.bio #bioBox {
display: block;}

.find #slideshowBox,
.find #photoVideoBox {
display: none;}

.find #mySearch,
.find #datesBox,
.find #keywordsBox,
.find #mapBox {
display: block;}

.recent #slideshowBox,
.recent #photoVideoBox {
display: none;}

.recent #featuredBox,
.recent #popularPhotos,
.recent #recentPhotosBox {
display: block;}

/* End css in the Advanced Site-wide Customization section */


5. Top JavaScript (optional & advanced) - Added the following:

// Start of Top JavaScript section

// changes the bioBox title
YE.onAvailable('bioTitle', function() {this.innerHTML = 'About'});

// first half of the script for the galleries find bio pages
function hasPath(sPath)
{
re = new RegExp("\/" + sPath + "(\/|$)");
return re.test(window.location)
}
// End of Top JavaScript section

.homepage #featuredBox {display:none;}
.galleries #categoriesBox {display:block !important;}


#customHeaderContainer {
width:100% !important;
height:auto !important;
padding:0 !important;
background:url(http://f8photography.smugmug.com/pho...4BqWKcM-Ti.png) repeat;
}
#customHeaderContainer table {
padding:5px 15px 0;
}

Question, I'm trying to create a vertical navigation bar using J Allens code but the second part of my plan is to have the full-screen slide show as well. Thing is, I want to reserve a certain pixel width to be pure white with no transparency, is this possible to do with your slideshow? I really want to make sure that the navigation bar is pure white. So it technically would be full-screen except for 200px on the left... Thoughts?

Originally Posted by Cougar548 Question, I'm trying to create a vertical navigation bar using J Allens code but the second part of my plan is to have the full-screen slide show as well. Thing is, I want to reserve a certain pixel width to be pure white with no transparency, is this possible to do with your slideshow? I really want to make sure that the navigation bar is pure white. So it technically would be full-screen except for 200px on the left... Thoughts?

So I got the vertical navigation bar and the full screen slideshow working, but the images on the slideshow are still "fullscreen" even though I reserved 280px on the left for the nav bar. I'm assuming there would need to be some change in your "full-screen" code if I wanted it to be 200px from the left. Do you know if I can do that? My test gallery is: www.oglesbaytest.smugmug.com

Thanks!

Help! I got the slideshow working but the photos do not size to fit on different size monitors, the header is not showing, and now the search is is in an odd place on the site. Here is the site: http://www.kimberlinharrisonphoto.com/

Here is the code:
CSS

/************************************************** ******
* Fullscreen Slideshow CSS
*
* By: FastLine Media - http://www.fastlinemedia.com
************************************************** *****/

html, body {
height: 100% !important;
}

/* Slideshow Position */
.fl-widget-slideshow {
position:absolute;
z-index:1;
top:0;
left:0;
}

/* Hide Scrollbars */
.notLoggedIn.homepage {
overflow:hidden;
}

/* Position the #bodyWrapper above the slideshow. */
.notLoggedIn.homepage #bodyWrapper {
position:relative;
z-index:2;
}

/* Hide the homepage boxes and breadcrumb. */
.notLoggedIn.homepage .box,
.notLoggedIn.homepage #breadcrumb {
display:none;
}

/* EZ Customizer Header. */
.homepage.notLoggedIn #customHeaderContainer {
width:100% !important;
height:auto !important;
padding:0 !important;
background:url(http://www.kimberlinharrisonphoto.co...3_sDZMW4-O.png) repeat;

_filter:progidXImageTransform.Microsoft.AlphaIma geLoader(enabled=true,sizingmethod=image,src='http ://www.kimberlinharrisonphoto.com/Other/My-SmugMug-Site-Files-Do-Not/19973173_sDZMW4-O.png');
}

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

/* EZ Customizer Footer. */
.homepage.notLoggedIn #customFooter {
position:fixed;
bottom:25px;
width:100%;
padding:0 !important;
}

/* Put SmugMug's footer on the bottom of the page. */
.notLoggedIn.homepage #footer_wrapper,
.notLoggedIn.homepage #cobrand_footer {
position:fixed;
bottom:0;
width:100%;
padding:0 !important;
}
.notLoggedIn.homepage #footer_wrapper a,
.notLoggedIn.homepage #footer_wrapper .text,
.notLoggedIn.homepage #cobrand_footer a,
.notLoggedIn.homepage #cobrand_footer .text {
font-size:10px;
color:#999999;
}
.notLoggedIn.homepage #footer {
width:auto !important;
}
.notLoggedIn.homepage #feeds {
display:none;
}

/* 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,
.galleries #customFooter,
.galleries #footer_wrapper,
.galleries #cobrand_footer,
.map #customFooter,
.map #footer_wrapper,
.map #cobrand_footer,
.featured #customFooter,
.featured #footer_wrapper,
.featured #cobrand_footer,
.recent #customFooter,
.recent #footer_wrapper,
.recent #cobrand_footer,
.featured-events #customFooter,
.featured-events #footer_wrapper,
.featured-events #cobrand_footer,
.find #customFooter,
.find #footer_wrapper,
.find #cobrand_footer,
.mysearch #customFooter,
.mysearch #footer_wrapper,
.mysearch #cobrand_footer {
position:static !important;
}

Top JavaScript

id:document.body,
source: {
APIkey:'7w6kuU5Ee6KSgRRExf2KLgppdkez9JD2',
gallery:'20354454_J2Rgpg'
}
backgroundColor:'',


Bottom JavaScript

/************************************************** ******
* Fullscreen Slideshow JS
*
* By: FastLine Media - http://www.fastlinemedia.com
************************************************** *****/

YE.onDOMReady(function()
{
if(YD.hasClass(document.body, "homepage") && YD.hasClass(document.body, "notLoggedIn")) {

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

for(var i = 0; i < hideOn.length; i++) {
if(YD.hasClass(document.body, hideOn[i])) {
return;
}
}

var ss = new FL.widget.Slideshow({
id:document.body,
sourceType:'smugmug',
source:{
APIKey:'7w6kuU5Ee6KSgRRExf2KLgppdkez9JD2',
gallery:'20354454_J2Rgpg'
},
speed:3000,
stretchy:true,
useGrid:false,
viewerItemPadding:0,
viewerItemCrop:true,
viewerItemBorderSize:0,
viewerItemDropShadow:'',
viewerTransitionSpeed:0.7,
loadingImage:'http://www.kimberlinharrisonphoto.com/Other/My-SmugMug-Site-Files-Do-Not/19973173_sDZMW4-O.gif'
});
}
});

/**
* @filename slideshow-full.js
* @package fastline.js
* @subpackage bundles
* @version 1.0.4
* @copyright (C) 2010 FastLine Media (www.fastlinemedia.com)
* @license This copyright notice must remain intact.
* Complete licensing information can be found at:
* http://cdn.fastlinemedia.com/fastlin...st/license.txt
*/

(rest left off for space)


All the code was copied over from the files. I have tried all -O 's (for the loading image & the top nav) they aren't working. I left in the links so you can see. I am wondering if I need to put the photos and the additional photos for the nav & loader in different galleries. I did try the urls a couple of different ways, but I'm getting the same result.

Help would be appreciated. Thank you.

I have installed the supplied code, updated to the new code, have the slideshow working for the most part, only problem is it does not go all the way to the bottom, my site is oertelphoto.com

Edit
This problem only seems to be happening in google chrome, also, my pictures seem to look fussy and over stretched

I might've missed it...but the last mention of asking how to get this slideshow to
work in gallery was in 2011.

Has anybody figured out a way to execute this slideshow in a specific gallery?

I figure the answer is still no?

Thanks
Doug

I followed the instructions (so I think) and the slideshow isn't full screen. I've been working on this a while and I can't figure out what the problem might be other then there is some CSS that is causing a conflict.

Any help is greatly appreciated please.

I'm trying to have my site look similar to this one http://www.jeffsinon.com/

http://www.mariahumphreysphotography.com/

I feel sorry for the helpful people here.

For all the others, read this as it may help you to get help.

http://dgrin.com/showthread.php?t=157671

"If you haven’t already, create a gallery that will hold the images for the slideshow. Usually we create this gallery in the “Other” category and title it “Homepage Slideshow.” This is where you will add, edit and delete photos in the slideshow when it has been installed."

This is probably a stupid question, but just to be sure. Can I make this gallery an unlisted one so that it doesnt show up on the gallery pages.
thanks

Originally Posted by hojphotography "If you haven’t already, create a gallery that will hold the images for the slideshow. Usually we create this gallery in the “Other” category and title it “Homepage Slideshow.” This is where you will add, edit and delete photos in the slideshow when it has been installed." This is probably a stupid question, but just to be sure. Can I make this gallery an unlisted one so that it doesnt show up on the gallery pages. thanks

Yes, make it unlisted with external links on.

So I go to click the PDF link on page 1 for "other stuff" that I figure this sort of instruction would be in...however when I click the link it tells me there is nothing on the page to load. Is there a new link for the PDF? If not - where can I find out how to change the photo transition to be slower between pics (not the actual time an image is up, but the speed at which it fades out and in from previous pic to next).

Anyone able to help me out with this?

Originally Posted by mpeck Hello, I installed your full-screen slideshow and It looks great on my desktop, but with my laptop the photos are cut off on top. Any help would be appreciated. Site is markpeckphotography.com Thank you!

I was wondering the same thing. All the tutorials have been great, but I can't seem to find an answer to this question. I love the full screen slide show and i figured out how to see the full photo but then it isn't a full screen slide show then. Is there a way to make a full screen but not have it cut the photos off? Help is appreciated. http://www.sowillphotography.com/