Working Fullscreen Slideshow... Almost

jrhesseyjrhessey Registered Users Posts: 41 Big grins
edited June 16, 2015 in SmugMug Customization
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
«13456

Comments

  • CynthiaMCynthiaM Registered Users Posts: 364 Major grins
    edited 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/
  • rdalrtrdalrt Registered Users Posts: 26 Big grins
    edited 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?
  • electrolyteelectrolyte Registered Users Posts: 59 Big grins
    edited 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.
  • slipkidslipkid Registered Users Posts: 231 Major grins
    edited August 10, 2013
    Great!!
    Love the look using that code, real nice.
    Regards
    Steve
    www.slipkid.com
    "The problem with socialism is that you eventually run out of other people's money". -- Margaret Thatcher
  • electrolyteelectrolyte Registered Users Posts: 59 Big grins
    edited 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.
  • RKnechtRKnecht Registered Users Posts: 366 Major grins
    edited 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.
    A few Nikon bodies and some fast Nikon glass

    www.richknechtphotography.com
  • CynthiaMCynthiaM Registered Users Posts: 364 Major grins
    edited August 11, 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.

    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!
  • jrhesseyjrhessey Registered Users Posts: 41 Big grins
    edited 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.
  • jrhesseyjrhessey Registered Users Posts: 41 Big grins
    edited 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.
  • jrhesseyjrhessey Registered Users Posts: 41 Big grins
    edited 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.
  • electrolyteelectrolyte Registered Users Posts: 59 Big grins
    edited 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!
  • jrhesseyjrhessey Registered Users Posts: 41 Big grins
    edited 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;
    }
    
  • electrolyteelectrolyte Registered Users Posts: 59 Big grins
    edited 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.
  • RichmondImageRichmondImage Registered Users Posts: 65 Big grins
    edited August 14, 2013
    Can't thank you enough for all this, just put it on my page and it looks amazing
  • rdalrtrdalrt Registered Users Posts: 26 Big grins
    edited August 15, 2013
    Yes, big thanks here as well. This slideshow looks amazing.
  • apexonephotoapexonephoto Registered Users Posts: 121 Major grins
    edited 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?
  • jrhesseyjrhessey Registered Users Posts: 41 Big grins
    edited 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?

    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;
    }
    
  • jrhesseyjrhessey Registered Users Posts: 41 Big grins
    edited 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 }
    }
    
  • anonymouscubananonymouscuban Registered Users, Retired Mod Posts: 4,586 Major grins
    edited August 15, 2013
    Have you checked this out on a mobile device? How's it look?
    "I'm not yelling. I'm Cuban. That's how we talk."

    Moderator of the People and Go Figure forums

    My Smug Site
  • fpajonkfpajonk Registered Users Posts: 8 Beginner grinner
    edited 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.
  • electrolyteelectrolyte Registered Users Posts: 59 Big grins
    edited August 18, 2013
    It works on my iPhone too.
  • bucketheadbuckethead Registered Users Posts: 31 Big grins
    edited 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?
  • electrolyteelectrolyte Registered Users Posts: 59 Big grins
    edited 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?
  • jclgurujclguru Registered Users Posts: 152 Major grins
    edited 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
  • juanherediajuanheredia Registered Users Posts: 345 Major grins
    edited August 20, 2013
    Great tip. Thank you so much.
  • southeasternphotographysoutheasternphotography Registered Users Posts: 647 Major grins
    edited 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.headscratch.gif
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited 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!
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • southeasternphotographysoutheasternphotography Registered Users Posts: 647 Major grins
    edited 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!
  • PilotBradPilotBrad Registered Users Posts: 339 Major grins
    edited August 24, 2013
    I used the code and got it working... easy-peasy-lemon-squeezy!

    Looks great, THANK YOU!
  • jhelmsjhelms Registered Users Posts: 651 Major grins
    edited 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. thumb.gif
    John in Georgia
    Nikon | Private Photojournalist
Sign In or Register to comment.