Working Fullscreen Slideshow... Almost

jrhessey · August 8, 2013

I am using the css3 animations, however they aren't compatible in ie9 and prior. I'm trying to figure out a way to redirect to another page based on ie version or use the modernizr javascript but we can't even load it from an external site. So far having no luck, so I thought I would post it here and see if someone else might come up with something...

Here is the working example

You must either be using Chrome, Firefox, or ie10 to view the transitions, otherwise it shows a black screen.

Here is the code, just create a page and use the css and html blocks

html

<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>

css

/*-----  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 fullscreen slideshow for all other browsers  -----*/
.sm-page-powered-by {
  position: absolute;
  bottom: 0;
}

.cb-slideshow, .cb-slideshow:after {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  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: 0;
  left: 0;
  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: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  -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;
  color: rgba(169, 3, 41, 0.8);
}

.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;
}

.cb-slideshow li:nth-child(2) div {
  -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) div {
  -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) div {
  -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) div {
  -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) div {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  -ms-animation-delay: 30s;
  animation-delay: 30s;
}

@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -webkit-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
    -webkit-transform: scale(1.1);
  }

  25% {
    opacity: 0;
    -webkit-transform: scale(1.1);
  }

  100% {
    opacity: 0;
  }

}

@-moz-keyframes imageAnimation {
  0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -moz-transform: scale(1.05);
    -moz-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
    -moz-transform: scale(1.1);
  }

  25% {
    opacity: 0;
    -moz-transform: scale(1.1);
  }

  100% {
    opacity: 0;
  }

}

@-o-keyframes imageAnimation {
  0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -o-transform: scale(1.05);
    -o-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
    -o-transform: scale(1.1);
  }

  25% {
    opacity: 0;
    -o-transform: scale(1.1);
  }

  100% {
    opacity: 0;
  }

}

@-ms-keyframes imageAnimation {
  0% {
    opacity: 0;
    -ms-animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    -ms-transform: scale(1.05);
    -ms-animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
    -ms-transform: scale(1.1);
  }

  25% {
    opacity: 0;
    -ms-transform: scale(1.1);
  }

  100% {
    opacity: 0;
  }

}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }

  8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
  }

  17% {
    opacity: 1;
    transform: scale(1.1);
  }

  25% {
    opacity: 0;
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
  }

}

@-webkit-keyframes titleAnimation {
  0% {
    opacity: 0;
    -webkit-transform: translateY(200px);
  }

  8% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }

  17% {
    opacity: 1;
    -webkit-transform: scale(1);
  }

  19% {
    opacity: 0;
  }

  25% {
    opacity: 0;
    -webkit-transform: scale(10);
  }

  100% {
    opacity: 0;
  }

}

@-moz-keyframes titleAnimation {
  0% {
    opacity: 0;
    -moz-transform: translateY(200px);
  }

  8% {
    opacity: 1;
    -moz-transform: translateY(0px);
  }

  17% {
    opacity: 1;
    -moz-transform: scale(1);
  }

  19% {
    opacity: 0;
  }

  25% {
    opacity: 0;
    -moz-transform: scale(10);
  }

  100% {
    opacity: 0;
  }

}

@-o-keyframes titleAnimation {
  0% {
    opacity: 0;
    -o-transform: translateY(200px);
  }

  8% {
    opacity: 1;
    -o-transform: translateY(0px);
  }

  17% {
    opacity: 1;
    -o-transform: scale(1);
  }

  19% {
    opacity: 0;
  }

  25% {
    opacity: 0;
    -o-transform: scale(10);
  }

  100% {
    opacity: 0;
  }

}

@-ms-keyframes titleAnimation {
  0% {
    opacity: 0;
    -ms-transform: translateY(200px);
  }

  8% {
    opacity: 1;
    -ms-transform: translateY(0px);
  }

  17% {
    opacity: 1;
    -ms-transform: scale(1);
  }

  19% {
    opacity: 0;
  }

  25% {
    opacity: 0;
    -webkit-transform: scale(10);
  }

  100% {
    opacity: 0;
  }

}

@keyframes titleAnimation {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }

  8% {
    opacity: 1;
    transform: translateY(0px);
  }

  17% {
    opacity: 1;
    transform: scale(1);
  }

  19% {
    opacity: 0;
  }

  25% {
    opacity: 0;
    transform: scale(10);
  }

  100% {
    opacity: 0;
  }

}

.no-cssanimations .cb-slideshow li span {
  opacity: 1;
}

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

}

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

}

There are customizations in the code above to make it work with smugmugs design, however you can downlaod the orginal code from here

CynthiaM · August 9, 2013

Have you tried any of the code from this site? Supposedly they support other browsers:
http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/

rdalrt · August 9, 2013

Nice. I like that a lot. What theme are you using so as to keep the name of you site and menu bar above the slideshow?

electrolyte · August 10, 2013

Thanks for this, your page looks great. I tried to add this to my homepage but it didn't work. When I am customising my homepage the slideshow works but when I log out and view the homepage there is no slideshow. Have I done something wrong?

All I did was add a HTML box to the homepage, copied your HTML and CSS code and changed the links from your photos to mine.

slipkid · August 10, 2013

Great!!
Love the look using that code, real nice.

electrolyte · August 11, 2013

Ignore my earlier reply, I have got the slideshow to work on my homepage and it looks great.

I think when I originally changed the links to the images from your website to mine I introduced a rouge character or something. I deleted the code, started again and it now works.

Thanks so much for sharing the code.

RKnecht · August 11, 2013

This looks very nice. Now I just need to figure out if I want to switch over to this slideshow, or to just use a single, full screen image.

CynthiaM · August 11, 2013

electrolyte wrote: »

Thanks for this, your page looks great. I tried to add this to my homepage but it didn't work. When I am customising my homepage the slideshow works but when I log out and view the homepage there is no slideshow. Have I done something wrong?

All I did was add a HTML box to the homepage, copied your HTML and CSS code and changed the links from your photos to mine.

Looks terrific! Just to clarify, which code did you use and where did you put it? Canyou share just what you did to get the homepage to look this way?
Thanks!

jrhessey · August 11, 2013

Just be aware that this doesn't work with ie 9 or older. I've tried conditional comments to get around it, but they don't work with the new smugmug. I've got a support request in, but i have to wait for the customization heroes to get back to me. If they can tell me a way, then i was planning on showing 1 single fullscreen picture for those browsers, and the slideshow for the new browsers.

jrhessey · August 11, 2013

CynthiaM wrote: »

Looks terrific! Just to clarify, which code did you use and where did you put it? Canyou share just what you did to get the homepage to look this way?
Thanks!

Create a custom page
Put the html code in an html block, change my pictures to your pictures
Put the css code in a css block

That should be eall you need to do.

jrhessey · August 11, 2013

rdalrt wrote: »

Nice. I like that a lot. What theme are you using so as to keep the name of you site and menu bar above the slideshow?

I'm using smokies, I think. I've got the z-index set low enough thoug that all themes should work. If it doesn't, let me know the theme and I'll see what needs changed to make it work.

electrolyte · August 11, 2013

CynthiaM wrote: »

Looks terrific! Just to clarify, which code did you use and where did you put it? Canyou share just what you did to get the homepage to look this way?
Thanks!

Sure, will be happy to let you know what code I used and how I added it to my homepage.

Firstly, I created a HTML content block on my home page near the top of the page. I copied jrhessey's HTML code into the HTML box. I then copied his CSS code into the CSS bit of the HTML block.

I then replaced the 6 images that were links to his site and replaced them with image links to my site.

eg I changed this

.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);
}

to this

.cb-slideshow li:nth-child(1) span {
  background-image: url(http://www.simonbutlerphotography.com/Other/Homepage-Slideshow-Fullscreen/i-vb6FVTT/0/O/IMG_2886.jpg);
}

I did the same for the next 5 images (ie child(2) to child(6)).

I wanted to add a 7th image so I added this to the end of the HTML:

<li>
<span>Image 07</span>
    </li>
</ul>

and worked out that I needed to add this after the child(6) image:

.cb-slideshow li:nth-child(7) span {
  background-image: url(http://www.simonbutlerphotography.com/Weddings/Paul-Olly/i-NtpLNjM/0/O/Paul%20%26%20Olly-2.jpg);
  -webkit-animation-delay: 36s;
  -moz-animation-delay: 36s;
  -o-animation-delay: 36s;
  -ms-animation-delay: 36s;
  animation-delay: 36s;
}

and this after the second lot child(6) delays

.cb-slideshow li:nth-child(7) div {
  -webkit-animation-delay: 36s;
  -moz-animation-delay: 36s;
  -o-animation-delay: 36s;
  -ms-animation-delay: 36s;
  animation-delay: 36s;
}

as I had worked out that each image child will have a delay list of 6 seconds more than the previous child.

Hopefully I've explained that well enough. I'm only basking slightly in jrhessey's original code so if you need any further explanation I'm sure he will be able to help!

jrhessey · August 14, 2013

Put this code in the css content box and you'll have a static background for ie 9 and less browsers that don't support css animations. just change the value in "background: url();" to your picture.

/*-----  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;
}

electrolyte · August 14, 2013

jrhessey wrote: »
Put this code in the css content box and you'll have a static background for ie 9 and less browsers that don't support css animations. just change the value in "background: url();" to your picture.
/*-----  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;
}

Thanks very much! I've added the code to my site.

RichmondImage · August 14, 2013

Can't thank you enough for all this, just put it on my page and it looks amazing

rdalrt · August 15, 2013

Yes, big thanks here as well. This slideshow looks amazing.

apexonephoto · August 15, 2013

Thanks for the amazing work on the slideshow. How do you get the "login" to stay down at the bottom?

Any advice on populating a list of url's so we can do some fast cut and paste in order to add to the number of photos?

jrhessey · August 15, 2013

apexonephoto wrote: »

Thanks for the amazing work on the slideshow. How do you get the "login" to stay down at the bottom?

Any advice on populating a list of url's so we can do some fast cut and paste in order to add to the number of photos?

Put this in your css block

.sm-page-powered-by {
  position: absolute;
  bottom: 0;
}

If you want to hide it all together on the page then this code

.sm-page-powered-by {
  display: none;
}

jrhessey · August 15, 2013

If you would rather have a slideshow without the zoom effect use the following code

<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 }
}

anonymouscuban · August 15, 2013

Have you checked this out on a mobile device? How's it look?

fpajonk · August 16, 2013

Have you checked this out on a mobile device? How's it look?

Works on the iPhone.

Thanks so much jrhessey!!! Hard to believe that Smugmug couldn't do this.

electrolyte · August 18, 2013

It works on my iPhone too.

buckethead · August 18, 2013

Not working for me, can you give me some advice
Wonder if you can give me some advice. For testing, I created a new design with nothing in it. I created a HTML content block on the Homepage, and entered the HTML code and the CSS block you provided. Edited the image links to match up to my photos. After I publish the changes, I just get a list in the middle of my screen Image 01, Image 02, etc. in a vertical list. I've tried viewing it in Safari and Chrome. What am I missing?

electrolyte · August 19, 2013

buckethead wrote: »

Wonder if you can give me some advice. For testing, I created a new design with nothing in it. I created a HTML content block on the Homepage, and entered the HTML code and the CSS block you provided. Edited the image links to match up to my photos. After I publish the changes, I just get a list in the middle of my screen Image 01, Image 02, etc. in a vertical list. I've tried viewing it in Safari and Chrome. What am I missing?

Did you put the CSS code into the CSS box of the HTML block?

jclguru · August 20, 2013

This is working great!

One question...is it possible to load another page instead of an image if somebody is using
anything below IE 10?

The thinking is, if I can load a page instead, then I can setup that page using SM's slideshow
vs a visitor seeing a static image.

Thanks
Doug

juanheredia · August 20, 2013

Great tip. Thank you so much.

southeasternphotography · August 22, 2013

Hmmmm....not to spoil the broth, but I went to the example at the beginning of the post and it looked great. Saw I think 3 images. Went back to look again twice and I got a black screen after the first image. I am on a MacBook Pro, OSX 10.6.8, latest Chrome. Going to go do it once more before posting this....nope, just getting the first image.

leftquark · August 24, 2013

HALLLLELLLLULLLAHHH!!!!!

This was the only thing preventing me from unveiling and you've now solved that!!! Works great! Not the simplest of solutions (would love to just be able to upload a photo to a gallery and have it pick) but it works!!!

Looking forward to SmugMug implementing this and not having to use this "hack" (that's not the right word). You made my day/night/week/month! I'm doing a little dance I'm so happy. Thank you!

southeasternphotography · August 24, 2013

It works for me today after multiple going back to the "example". Somewhere there is a thread that is suppose to have CSS to stop your folder and gallery main images from cutting off the heads of people in the image - like your folder for Family. Found it:
http://www.dgrin.com/showthread.php?t=237488&highlight=cutting

Cheers!

PilotBrad · August 24, 2013

I used the code and got it working... easy-peasy-lemon-squeezy!

Looks great, THANK YOU!

jhelms · August 26, 2013

I love the way this slideshow looks but is there a way to link it to a full SM gallery instead of individual pics?

I use Lightroom to sync my current top 10-12 images into one gallery and would love the slideshow to just use that gallery for the home page.

Working Fullscreen Slideshow... Almost

Comments