Working Fullscreen Slideshow... Almost

jrhesseyjrhessey Big grinsPosts: 41Registered Users 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 Major grins Posts: 361Registered Users 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 Big grins Posts: 26Registered Users 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 Big grins Posts: 59Registered Users 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 Steve Posts: 231Registered Users 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 Big grins Posts: 59Registered Users 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 Major grins Posts: 366Registered Users 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 Major grins Posts: 361Registered Users 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 Big grins Posts: 41Registered Users 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 Big grins Posts: 41Registered Users 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 Big grins Posts: 41Registered Users 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 Big grins Posts: 59Registered Users 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 Big grins Posts: 41Registered Users 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 Big grins Posts: 59Registered Users 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 Big grins Posts: 65Registered Users 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 Big grins Posts: 26Registered Users Big grins
    edited August 15, 2013
    Yes, big thanks here as well. This slideshow looks amazing.
  • apexonephotoapexonephoto Slideways Grinner Posts: 121Registered Users 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 Big grins Posts: 41Registered Users 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 Big grins Posts: 41Registered Users 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 Inner Tube Pilot Porter Ranch, CaliforniaPosts: 4,586Registered Users, Retired Mod 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 Beginner grinner Posts: 8Registered Users 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 Big grins Posts: 59Registered Users Big grins
    edited August 18, 2013
    It works on my iPhone too.
  • bucketheadbuckethead Happy to be here! Posts: 31Registered Users 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 Big grins Posts: 59Registered Users 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 Major grins Posts: 152Registered Users 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 Major grins Madrid, SpainPosts: 345Registered Users Major grins
    edited August 20, 2013
    Great tip. Thank you so much.
  • southeasternphotographysoutheasternphotography Trouper Posts: 647Registered Users 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 SmugMug Product Team Posts: 3,241Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee
    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!
    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • southeasternphotographysoutheasternphotography Trouper Posts: 647Registered Users 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 Major grins Posts: 339Registered Users Major grins
    edited August 24, 2013
    I used the code and got it working... easy-peasy-lemon-squeezy!

    Looks great, THANK YOU!
  • jhelmsjhelms Major grins Posts: 698Registered Users 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
    D4 | D800 | D700 | SB's x 14
    "Become a Fan" of my photography on Facebook | Follow me on Twitter
«13456
Sign In or Register to comment.