Working Fullscreen Slideshow... Almost

jarboedoggart

just added it to my site, easy and perfect. Thank you so much for sharing this!

jrhessey

jhelms wrote: »

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.

Not that I am aware of. You would need to use JS and that is no longer permitted with the new SM.

jhelms

jrhessey wrote: »

Not that I am aware of. You would need to use JS and that is no longer permitted with the new SM.

Darn

In the meantime thank you so much for the code; I'm using it in my trial migration and love it so far. Getting close to the 'unveil' and will likely stay with your code.

:ivar

Johnwd

image sizes
Amazing bit of coding only wish i understood it better

Got it working but images seem to be enlarged to much, is there image size that works best with your coding ?

jrhessey

jclguru wrote: »

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

I think you may be able to do an html redirect, not sure though. They usually have to go in the header of the page and we don't have access to that section of the code. Once they fix the conditional comments bug, we can try it.

jrhessey

Johnwd wrote: »

Amazing bit of coding only wish i understood it better

Got it working but images seem to be enlarged to much, is there image size that works best with your coding ?

I'm using X3, there is a non zoom version in here if you would rather use that.

Johnwd

jrhessey wrote: »

I'm using X3, there is a non zoom version in here if you would rather use that.

Could you point in the right direct for the no zoom version that would be awesome, of point me to the bit of code the zooms and I can tinker from there


Thanks for your help in advance

John

Johnwd

slide show

jrhessey wrote: »

I'm using X3, there is a non zoom version in here if you would rather use that.

Hi Please forgive for being so dense, i reread your message and realised that you have already posted the no zoom version

Cheers John

krashedmykarch

re IE-10
Is anyone with a working version of this great idea able to view it in IE9 or earlier? I have loaded the IE9 code but I still can't play it in IE9. It runs well in IE 10.
Thanks!

southeasternphotography

NEVERMIND I got it. Missed the "/1/X3" in the line. Seeing one of my images now!!!! Forget the rest of this post!

I feel stupid. How do you get the photo path to *.jpg without it having the weird sm code instead?


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


Child 3 in the actual code I see after pasting:
http://donhesseyphotography.smugmug.com/Other/Homepage-Slideshow/i-CX69Ndt/1/X3/20120818-_MG_6051-X3.jpg

I tried this:
http://www.southeasternphotography.com/Landscapes/St-Simons-Island/StSimons-D6344.jpg
and I just get a blank in the slideshow. Hessey's photos are showing up fine on MY page

Does External embedding have to be on? I did that for one gallery where I am pulling an image.

I did not set up a separate gallery to hold images. Just choosing from their original galleries.

ouki

All worked well for me. Thanks for sharing.
I noticed a line of coding referencing "url(../images/pattern.png)". What is the use of this? What is the absolute path of that image? I don't believe I have pattern.png anywhere.

krashedmykarch

I had my site up and it looked exactly asI wanted/expected. I published and it was fine. I went back in to tweak one thing and now I have only a black screen home page. I just tried a new page and entered my code and still, no home page. Nothing. So back to the blueprints.

The 'pattern' .png is a black dot pattern which tiles and overlays (in behind actually) the images in the slideshow (which is why it appears as url(../images/pattern.png)") This came from the souce of this code as css3 experiment. No one here that I could find is using it. Everyone seems to just leave it as is.

External embedding has to be turned on if you are trying to link to an image in a gallery where the ext. links is turned off. Just go to that gallery an activate 'external'

Looking for help in all the wrong places!

** If anyone has the time could you post your css from a working slideshow, please. I cannot find any bugs in mine but I am doing something wrong
Thanks!

Mitchell

For those who would be satisfied with a slide show that is not full screen, I found the embedded slide show option to be very user friendly. It certainly may be an easy option for many folks. I'm no coder and don't like to do things I really don't understand.

The results seem fine to me.

http://clearwaterphotography.smugmug.com/

southeasternphotography

Mitchell, on my mac, your slideshow has the flicker problem associated with the previous image printing over the current image and then the current image redraws itself. This is a posted bug, but I have not seen any work yet that they are resolving it....well, at least not posted. The full screen slideshow does not do this. I "know" that SM has a misplaced code that causes this. Hopefully, they are taking their whole slideshow implementation and recoding it to what we all want!

southeasternphotography

@Charles - here is my slideshow html and css:

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>

and the CSS side of the html window:

/*

---

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://http://www.southeasternphotography.com/Boats/Yacht-and-Boat-Marine-Salvage/Mista-Jay-Salvage/i-9vpjMXb/1/X3/gndMistaJayH1.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

---

*/
.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://www.southeasternphotography.com/Boats/Yacht-and-Boat-Marine-Salvage/Mista-Jay-Salvage/i-9vpjMXb/1/X3/gndMistaJayH1.jpg);
}

.cb-slideshow li:nth-child(2) span {
background-image: url(http://www.southeasternphotography.com/Landscapes/St-Simons-Island/i-D34hJxp/1/X3/StSimons-D6344.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://www.southeasternphotography.com/Street-Scenes/Exchange-Club-Fair-Galleries/Exchange-Club-Fair-2010/i-fsV8L53/1/X3/Fair-D7770.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://www.southeasternphotography.com/Art/Manipulated-Photographs-in/i-dnM2XLB/1/X3/Ibis-Flying-pencil-1&2-1.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://www.southeasternphotography.com/Cars/Brunswick-Car-Show/i-c5qtqd3/1/X3/Auto-2999-Redhot.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://www.southeasternphotography.com/History/Hofwyl-Broadfield/Hofwyl-Christmas-Event-12-05/i-JJksMnX/1/X3/HofwylXmas-Dcrop24545.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 somes lines of code where certain fixes are made for other browsers way up in this thread. I have not added those yet. What you see above is thust the original code posted and it is working fine for me. I will be adding those fixes soon.

Cheers!

Mitchell

southeasternphotography wrote: »

Mitchell, on my mac, your slideshow has the flicker problem associated with the previous image printing over the current image and then the current image redraws itself. This is a posted bug, but I have not seen any work yet that they are resolving it....well, at least not posted. The full screen slideshow does not do this. I "know" that SM has a misplaced code that causes this. Hopefully, they are taking their whole slideshow implementation and recoding it to what we all want!

Interesting bug. I do not see this on any windows machines or on my ipad. I will check on a macbook pro when I get home.

Thanks.

krashedmykarch

southeasternphotography wrote: »

@Charles - here is my slideshow html and css:

There are somes lines of code where certain fixes are made for other browsers way up in this thread. I have not added those yet. What you see above is thust the original code posted and it is working fine for me. I will be adding those fixes soon.Cheers!

Thanks so much for a quick response. I'll find you to celebrate if I can get it working.
Cheers back,
Thanks!

Johnwd

re slide show

krashedmykarch wrote: »

Thanks so much for a quick response. I'll find you to celebrate if I can get it working.
Cheers back,
Thanks!

Said before this bit of code is fantastic

One thing i recommend you do is clear your browser CASHE, mine was holding onto the original photos which confuseds me some what.

Just a simple tip which saves your recoding the CCS Code, create a gallery load in the 6 images ( or more if you have added further coding) and make them pic1, pic2 etc that way when you want to change the images simply replace the images with the same file names so no playing around with the CSS coded one you have did it for the first time only

John

charlesdaly

Johnwd wrote: »

Said before this bit of code is fantastic

One thing i recommend you do is clear your browser CASHE, mine was holding onto the original photos which confuseds me some what.

Just a simple tip which saves your recoding the CCS Code, create a gallery load in the 6 images ( or more if you have added further coding) and make them pic1, pic2 etc that way when you want to change the images simply replace the images with the same file names so no playing around with the CSS coded one you have did it for the first time only

John

Thanks John. SM heros tell me that something is broken in my galleries. So I'm waiting for an engineer to check it out. I keep all my scripts in a library in Notepad format so I just make code changes in there then just copy and paste.
Thanks,

southeasternphotography

@Johnwd -

wrote:

and make them pic1, pic2 etc that way when you want to change the images simply replace the images with the same file names so no playing around with the CSS coded one you have did it for the first time only

BRILLIANT!!!!!!!!!!!!!!!!!!!! Thanks!

ouki

I noticed when the Internet speed is slow, it takes a few seconds to load the first slide image. Till then it displays a blank page. Is there a way to put a timeglass or a still image before the slideshow is fully loaded? What is your best advise to speed it up a bit?

southeasternphotography

southeasternphotography wrote: »

@Johnwd -



BRILLIANT!!!!!!!!!!!!!!!!!!!! Thanks!

Oops! There does seem to be a bit of code you will still have to change.

http://www.southeasternphotography.com/Other/Slide-images/i-f9rXcvD/1/X3/pic1.jpg The RED piece. Each of my images has a different code here. So, I would assume a new image would have a different code here, too. All images are in the same gallery. Am I right? Still LOVE it.

BTW, what does the /1 do?

Johnwd

re size of the zoom

jrhessey wrote: »

I'm using X3, there is a non zoom version in here if you would rather use that.

Looking for a way to reduce the size of the zoom, I am not that great with CSS so not sure where to look,
love how the slide show work, would prefer so see a bit more of my images

John

KelleyLife

Image Link
Don, thanks so much for spending your time to write this code. I loaded it to my Homepage and it displayed your pictures beautifully. However, I'm having two problems:

First, I can't seem to capture the right image address for my pictures, I've tried multiple variations of the address to no avail. Where exactly are you guys grabbing your image address from?

Second, my header and menu items are showing up inside the displayed picture at the top instead on top of the picture.

Thanks for any help
Liz

southeasternphotography

Just the normal image path and the code for it. Go to the gallery and click on an image so it shows you the piece of code. Like this image:
http://www.southeasternphotography.com/Nature/Birding-Galleries/American-Bald-Eagle/i-pjbrwVN

then add the actual filename of the image you used when you uploaded it. I used pic1.jpg, pic2.jpg, etc.
Make sure you have the /1/X3 (don't know what the /1 is but it won't work without it) added behind the code and then add the filename like this:
http://www.southeasternphotography.com/Nature/Birding-Galleries/American-Bald-Eagle/i-pjbrwVN/1/X3/pic1.jpg

I had placed my images in an OTHER gallery that I had as "unlisted" and had the slideshow images gallery as unlisted. That did not work! Had to make the root and the slideshow gallery public. External Embedding may need to be turned on for the images gallery - in Organize.

Somewhere, I picked a file path and name that had the double code in it - /i-pjbrwVN/hfjieirskdjk. That does not work either.

The slideshow is a full screen or full browser screen image. It must be being treated as a background image. Then your header and menu items are overlaid on the background image. I get the same thing as you are getting. No way around that at this time. I, too, would rather have those two blocks ABOVE the image.

I went in Customize and for the header gave it a "0" top margin and "0" bottom margin. Did the same thing for the Menu items block. That tightened things to the top of the screen. Worked better for the galleries, too (as I have the same header and Menu items on ALL pages). I also did the same thing for the breadcrumb block. Much tighter presentation to me.

Perhaps the code writer can look into this. Anyway, it works flawlessly on my Mac with Chrome. The SM homepage slideshow has a bug where it flashes the previous image on top of the current image for a very short time causing the slideshow to have a flicker.

KelleyLife

southeasternphotography wrote: »

Just the normal image path and the code for it. Go to the gallery and click on an image so it shows you the piece of code. Like this image:
http://www.southeasternphotography.com/Nature/Birding-Galleries/American-Bald-Eagle/i-pjbrwVN

then add the actual filename of the image you used when you uploaded it. I used pic1.jpg, pic2.jpg, etc.
Make sure you have the /1/X3 (don't know what the /1 is but it won't work without it) added behind the code and then add the filename like this:
http://www.southeasternphotography.com/Nature/Birding-Galleries/American-Bald-Eagle/i-pjbrwVN/1/X3/pic1.jpg

I had placed my images in an OTHER gallery that I had as "unlisted" and had the slideshow images gallery as unlisted. That did not work! Had to make the root and the slideshow gallery public. External Embedding may need to be turned on for the images gallery - in Organize.

Somewhere, I picked a file path and name that had the double code in it - /i-pjbrwVN/hfjieirskdjk. That does not work either.

The slideshow is a full screen or full browser screen image. It must be being treated as a background image. Then your header and menu items are overlaid on the background image. I get the same thing as you are getting. No way around that at this time. I, too, would rather have those two blocks ABOVE the image.

I went in Customize and for the header gave it a "0" top margin and "0" bottom margin. Did the same thing for the Menu items block. That tightened things to the top of the screen. Worked better for the galleries, too (as I have the same header and Menu items on ALL pages). I also did the same thing for the breadcrumb block. Much tighter presentation to me.

Perhaps the code writer can look into this. Anyway, it works flawlessly on my Mac with Chrome. The SM homepage slideshow has a bug where it flashes the previous image on top of the current image for a very short time causing the slideshow to have a flicker.

Thanks so much for your help. I got the picture links added in and everything works fine.....almost. Some of my pictures are coming through too big for the screen. I used the non-zoom CSS, tweaked the percentages and that helped a bit but cuts off the bottom of the picture. I'm on a 27" iMac using Chrome.

One other thing I couldn't figure out is how to get my links (Home Gallery) to have the same transparency level as the Logo title is. Couldn't find an alpha slider that related to the links.

Thanks again for the help
http://kelleylife.smugmug.com/

charlesdaly

Hi Kellylife, your ss looks perfect and that's exactly what I've been struggling with for two weeks until I finally gave up. Seeing your site has me excited again. Did you use the exact code that
http://www.dgrin.com/member.php?u=7026 posted for me in post 46 (above) or did you change it?
If you would, would you please post the css you used?

southeasternphotography

@KellyLife - What theme are you using in your unveiled site?

@Charlesdaly - KellyLife used the change found way up this post to make the slideshow where it does not use the zoom feature which IS in the code in post 46. So, yes he changed it. I also have NOT added to my #46 code the changes found way above that are suppose to help out various browser issues.

KelleyLife

charlesdaly wrote: »

Hi Kellylife, your ss looks perfect and that's exactly what I've been struggling with for two weeks until I finally gave up. Seeing your site has me excited again. Did you use the exact code that
http://www.dgrin.com/member.php?u=7026 posted for me in post 46 (above) or did you change it?
If you would, would you please post the css you used?

Hi Charles - I'm posting the CSS code below. It works great with the exception of the items I listed in my previous post. Another thing I discovered is when I checked using my work computer this morning (IE 8.0) it puts a static image like Don had described but it looks like it's pulling an entirely different theme. The Heading is in a different font, the image doesn't fill the screen, the primary color is grey instead of black...not sure what's going on when presented in IE.

Keep in mind when you see this code I do not have a clue what I'm doing when I tweak the percentages, it's all trial and error.

Liz

/*

---

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://kelleylife.smugmug.com/Everything/MPs/Mish-Mash/i-46dRKGS/0/XL/Mom%20and%20Baby-XL.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: 105%;
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: 105%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 25% 25%;
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: 105%;
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://kelleylife.smugmug.com/Everything/Vacation/Canada/i-cspmQFJ/0/XL/Lake%20Louise%204-XL.jpg)

}
.cb-slideshow li:nth-child(2) span {
background-image: url(http://kelleylife.smugmug.com/Everything/Vacation/Canada/i-6VKBcdG/0/M/Lake%20Louise%2014-M.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://kelleylife.smugmug.com/Everything/Slideshow/i-WpLv2p2/0/XL/The%20Four%20Islands-XL.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://kelleylife.smugmug.com/Everything/MPs/Mish-Mash/i-rbmFDj6/1/XL/P1020179-XL.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://kelleylife.smugmug.com/Everything/MPs/Mish-Mash/i-46dRKGS/0/XL/Mom%20and%20Baby-XL.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://kelleylife.smugmug.com/Everything/Slideshow/i-qnMfnzj/0/XL/Summer-XL.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 }
}

KelleyLife

southeasternphotography wrote: »

@KellyLife - What theme are you using in your unveiled site?

@Charlesdaly - KellyLife used the change found way up this post to make the slideshow where it does not use the zoom feature which IS in the code in post 46. So, yes he changed it. I also have NOT added to my #46 code the changes found way above that are suppose to help out various browser issues.

@southeasternphotography - I used the Sierra theme

Liz