Full-Screen Slideshow Customization Using Sophia Template

shmorris222 · August 6, 2013

I have migrated to the new Smugmug and chosen Sophia as my site template. I would like for my homepage slide show to be full screen. How do I accomplish this without switching themes?

www.picture-perfectcreations.com

leftquark · August 6, 2013

shmorris222 wrote: »

I have migrated to the new Smugmug and chosen Sophia as my site template. I would like for my homepage slide show to be full screen. How do I accomplish this without switching themes?

I've been trying to figure this out as well. As far as I can tell it is not possible. I'm waiting for SM to get back to me. I had a customization from FastLine Media that I'm trying to duplicate with a fullscreen slideshow on the home page. I'm hoping I don't have to pay them again to get this feature back!

CynthiaM · August 7, 2013

leftquark wrote: »

I've been trying to figure this out as well. As far as I can tell it is not possible. I'm waiting for SM to get back to me. I had a customization from FastLine Media that I'm trying to duplicate with a fullscreen slideshow on the home page. I'm hoping I don't have to pay them again to get this feature back!

Same issue here although I did my site on my own. Leftquark, who did you contact on smugumug regarding a full screen background image slideshow on the homepage?

leftquark · August 7, 2013

CynthiaM wrote: »

Leftquark, who did you contact on smugumug regarding a full screen background image slideshow on the homepage?

CynthiaM: I emailed SmugMug help and they're putting me in touch with the "customizers". I haven't heard back yet. However, I did email FastLine Media and got some additional insight....

SM has mentioned here on the forums that at some point they may give normal users JavaScript support. As of now, they're not. I can understand that giving everyone JS support opens up a whole ton of security issues. What if someone puts bad code on their page and kills an entire SM server. That's no good. Right now the only people who have access to do things like that are the "Advanced Customizers" -- people like FastLine Media. At some point SM may open access to us but as of now, we have to go through them.

Yes, it sucks that we can't do this and we have to pay someone even more money to get a simple feature we had before. I'm sure a bunch of you (not you specifically Cynthia) will whine and complain and moan and claim you're going to go somewhere else ... but really, is there anywhere else better?

I'm not sure if I'm willing to pay $150 to have FastLine upgrade my site from the heritage to the new SmugMug. I already paid them $360 and another $150 seems like a lot just for a silly template... It seems even sillier since I've basically implemented my entire old design myself using the new smugmug ... except for the slideshow. Is it worth $150 for a slideshow? I dunno.

Ferguson · August 7, 2013

leftquark wrote: »

SM has mentioned here on the forums that at some point they may give normal users JavaScript support. As of now, they're not. I can understand that giving everyone JS support opens up a whole ton of security issues. What if someone puts bad code on their page and kills an entire SM server. That's no good.

Yeah, but it's also not true. The javascript runs in your client (browser) only, not on the server, so there's zero risk to their servers.

However, there is a risk to stability during upgrades. Allowing people to run javascript on the client side mean every change SM wants to make to the underlying page structure risks breaking whatever clients have done. Disallowing it is a great step toward allowing SM to do upgrades more easily and quickly without impacting client experience negatively.

Of course, doing away with it also impacts you negatively, so it's a tradeoff. And one I commend (as an I.T. guy). I'm a bit disappointed though that they are allowing some commercial interests insiders to do it, then charge us (more) for it.

Justin B · August 7, 2013

Hey everyone!

Sorry if we gave you the wrong impression but it's definitely not our prerogative to capitalize on the lack of a fullscreen slideshow by charging users to implement it for them. It's true that our slideshows are currently only offered through our templates but that's not by design. That's a result of the fact that we don't have a solution available for users to implement it themselves at the moment.

We're not offering a cheaper "slideshow only" option because I really don't want to charge people anything for it (we do have to charge something for our time as we're a service based business). If I had the ability to put up a do-it-yourself tutorial, or make it available as an app, I would have already and promise that I will given the opportunity. My advice to everyone is to hang tight for now as I'm sure this won't go unresolved forever.

As for our templates, I think there is some confusion on the forums surrounding those. We're not trying to sell just a simple template that you could configure yourself ($299 would be ridiculous for that). We're selling a "setup" service that is geared towards those that a) are too busy to setup a website no matter how easy it is b) want to take things further than what's offered c) need some guidance and like doing these things with someone they can email or get on the phone. The templates are really just a small part of the service we offer whether you're a small business on WordPress or a photographer on SmugMug.

We know a lot of people like our templates and would like to install them without having to hire us to do it. It's our hope that someday in the future everything we offer can be available as a 1-click install. SmugMug knows we want that but unfortunately, they are hard at work making the new SmugMug awesome for you at the moment! Which really is a good thing for all of us.

Feel free to shoot me an email at justin@fastlinemedia.com if you have any questions as I'm typically tied up on a project and don't have much time to spend in the forums these days.

jhelms · August 15, 2013

leftquark wrote: »

I've been trying to figure this out as well. As far as I can tell it is not possible. I'm waiting for SM to get back to me. I had a customization from FastLine Media that I'm trying to duplicate with a fullscreen slideshow on the home page. I'm hoping I don't have to pay them again to get this feature back!

Is your http://www.aaronmphotography.com legacy sm or new sm?

(It looks great and the full screen slideshow and overall layout is somewhat similar to what I'd want)

jrhessey · August 15, 2013

Are you guys looking for something like this?

Fullscreen Slideshow

jhelms · August 15, 2013

leftquark wrote: »

I've been trying to figure this out as well. As far as I can tell it is not possible. I'm waiting for SM to get back to me. I had a customization from FastLine Media that I'm trying to duplicate with a fullscreen slideshow on the home page. I'm hoping I don't have to pay them again to get this feature back!

jrhessey wrote: »

Are you guys looking for something like this?

Fullscreen Slideshow

Pretty close to that (without the zooming)

charlesdaly · August 15, 2013

jrhessey wrote: »

Are you guys looking for something like this?

Fullscreen Slideshow

Yes, yes and yes. Better w/o the zoom but the zoom is better than nada. Please tell me more!
Thanks!

jrhessey · August 15, 2013

Create a new page, delete the breadcrumbs.

Add an html block and paste this,

<ul class="cb-slideshow">
    <li>
        <span>Image 01</span>

    </li>
    <li>
        <span>Image 02</span>

    </li>
    <li>
        <span>Image 03</span>

    </li>
    <li>
       <span>Image 04</span>

    </li>
    <li>
        <span>Image 05</span>

    </li>
    <li>
        <span>Image 06</span>

    </li>
</ul>

next add a css block and add this code

/*-----  Put Powered By Smugmug at the Bottom -----*/
.sm-page-powered-by {
  position: absolute;
  bottom: 0;
}

/*-----  Code to display fullscreen background for all browsers ie 9 and less  -----*/

.sm-ie-5, .sm-ie-6, .sm-ie-7, .sm-ie-8, .sm-ie-9 {
  background: url(http://donhesseyphotography.smugmug.com/Other/Homepage-Slideshow/i-CX69Ndt/1/X3/20120818-_MG_6051-X3.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*-----  Code to display slideshow for all other browsers  -----*/

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -99999; 
}
.cb-slideshow:after { 
    content: '';
    background: transparent url(../images/pattern.png) repeat top left; 
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url(http://donhesseyphotography.smugmug.com/Other/Homepage-Slideshow/i-CkrWB3k/1/X3/20110928-_MG_2584-Edit-Edit_HDR-X3.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(http://donhesseyphotography.smugmug.com/Other/Homepage-Slideshow/i-9JL5kQV/1/X3/20130316-_MG_7842-X3.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(http://donhesseyphotography.smugmug.com/Other/Homepage-Slideshow/i-CX69Ndt/1/X3/20120818-_MG_6051-X3.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(http://donhesseyphotography.smugmug.com/Other/Homepage-Slideshow/i-2GGbgfP/1/X3/20120818-_MG_6044-X3.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(http://donhesseyphotography.smugmug.com/Other/Homepage-Slideshow/i-4bNTxfc/1/X3/20120616-_MG_5100-X3.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(http://donhesseyphotography.smugmug.com/Other/Homepage-Slideshow/i-ND77Phc/1/X3/20111010-_MG_2939-Edit_HDR_2-X3.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

@media screen and (max-width: 1140px) { 
    .cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) { 
    .cb-slideshow li div h3 { font-size: 80px }
}

If you want to add more than 6 pictures, then duplicate this section of code and continue the numbering scheme is the css and increasing the delay 6 seconds to 36 and so on.

.cb-slideshow li:nth-child(6) span { 
    background-image: url(http://donhesseyphotography.smugmug.com/Other/Homepage-Slideshow/i-ND77Phc/1/X3/20111010-_MG_2939-Edit_HDR_2-X3.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

and then add this code to the html block between the last picture and </ul> code, continuing the numbering scheme as well

<li>
        <span>Image 06</span>

    </li>

All you have to do know is replace my pictures with your pictures.

charlesdaly · August 15, 2013

jrhessey wrote: »

Create a new page, delete the breadcrumbs.

Add an html block and paste this, (it's above so no need to repeat that)

Dang, there goes another night's sleep. More seriously, thank you so much for taking the time and sharing. I'll be back here soon to tell you how it's going.
Thanks!

ghostwinds · August 16, 2013

Is someone working on a full screen slideshow then for all templates? I have not gone live yet with my new site (willow template) as I loved the slideshow on my legacy site....the one for the new SM is this horrible tiny, puny thing that will make my clients run in the other direction. I cannot get any confirmation if anyone is working on fixing this for all templates. I do not write code nor have the time to fart around inputting all kinds of stuff....I thought this new SM was to be the BE ALL and END ALL of USEABILITY and its nighmare mess!!!!! I just moved from a business acct to just a portfolio acct till the get this embarrassment fixed....now my company is talking about moving all their corporate accts from here as well till they fix this. Thanks chris www.ghostwinds.com

Dota · August 17, 2013

jrhessey wrote: »
...
...
...

If you want to add more than 6 pictures, then duplicate this section of code and continue the numbering scheme is the css and increasing the delay 6 seconds to 36 and so on.
.cb-slideshow li:nth-child(6) span { 
    background-image: url(http://donhesseyphotography.smugmug.com/Other/Homepage-Slideshow/i-ND77Phc/1/X3/20111010-_MG_2939-Edit_HDR_2-X3.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}
and then add this code to the html block between the last picture and </ul> code, continuing the numbering scheme as well
<li>
        <span>Image 06</span>

    </li>
All you have to do know is replace my pictures with your pictures.

I understood what you said earlier but I'm focusing on this part...will this code read more than 6 pics as a loop and recycle through? If not is there a way to loop the code you had earlier to read a particular gallery vs listing every individual <li> images (granted I got a computer science degree but I hate coding...lol)? That would be a real time saver vs doing <il> for 10+ more pics.

JRPhoto · August 24, 2013

hey jrhessy,

Thanks so much for the slideshow coding. I am having a problem though that I was hoping you could help me with.

I added a few more slides to the coding as you instructed. I continued the HTML code and changed the image numbering just as you said. so it would be Image 08 then Image 09 then Image 10 (with all the other things exactly as you had them.

I added the CSS code just as you instructed. I changed the image numbering ( li:nth-child(7) span { li:nth-child(8) span { li:nth-child(9) span { etc)

I changed the 30s like you said by 6 seconds ( 36s, 42s, 48s, etc.)

Now, My question is...The first 7 slides work perfectly but after the 7th the transitions become erratic. Some images transition very fast and in-between the regular transitions without any sort of order. Is there anything I need to change higher in the code for this many images? Am i simply using too many images (16 total images for the slideshow)?

hamasin · October 24, 2013

Hi there,
I've been customized for a couple of days. Then, finally found this thread.
Thanks to this thread, it would help me a lot!!!!

Thanks.

Then, I have some more.
I'd like to add some text boxes on it, too. Put like shop info, shop direction map, and event info on each boxes.
Can I do that?
Then, I have been looking for info on that. But I have not found any so far. If it could, and anybody knows how to,
please help.

Thank you in advance.

Full-Screen Slideshow Customization Using Sophia Template

Comments