Hi Charles - I'm posting the CSS code below. It works great with the exception of the items I listed in my previous post.
Thanks so much and I will try that and report back. It looks good to me on ff, ie10 and ie9 (ie9 has the static image which is expected. My earlier attempts would not show the static on less than ie10.
@KellyLife - Did you place this CSS code in the HTML Block which has both an HTML and CSS component? You threw me with the
/*
Put Powered By Smugmug at the Bottom
*/
.sm-page-powered-by {
position: absolute;
bottom: 0;
}
at the top of the code as though you put all this in the MAIN CSS block for your home page.
@KellyLife - Did you place this CSS code in the HTML Block which has both an HTML and CSS component? You threw me with the
/*
Put Powered By Smugmug at the Bottom
*/
.sm-page-powered-by {
position: absolute;
bottom: 0;
}
at the top of the code as though you put all this in the MAIN CSS block for your home page.
No I copied the code straight from the code listed in post 19 of this thread. I had tried using the HTML block and putting both the HTML and CSS code into the respective tabs but it didn't work. So I took out the CSS code from the HTML block and added a separate CSS block with the code and that seemed to do it. Not sure if that was right or not but it worked
No I copied the code straight from the code listed in post 19 of this thread. I had tried using the HTML block and putting both the HTML and CSS code into the respective tabs but it didn't work. So I took out the CSS code from the HTML block and added a separate CSS block with the code and that seemed to do it. Not sure if that was right or not but it worked
Liz
Interesting! WOnder if that has anything to do with the issues when viewing from other browser? Did you move it out "because it didn't work" because of the filepath issue? Tried moving it back?
Interesting! WOnder if that has anything to do with the issues when viewing from other browser? Did you move it out "because it didn't work" because of the filepath issue? Tried moving it back?
So, I went back and deleted the CSS block and added it into the CSS tab of the HTML block. The only thing that showed was my Header info. Went back to the separate blocks and everything worked fine.
No I copied the code straight from the code listed in post 19 of this thread. I had tried using the HTML block and putting both the HTML and CSS code into the respective tabs but it didn't work. So I took out the CSS code from the HTML block and added a separate CSS block with the code and that seemed to do it. Not sure if that was right or not but it worked
So, I went back and deleted the CSS block and added it into the CSS tab of the HTML block. The only thing that showed was my Header info. Went back to the separate blocks and everything worked fine.
css3 slide show
I have renewed sympathy for cocaine addicts. Leave then return. I keep coming back to this ss. I finally got it so it worked perfectly in customize view, published it (different file name so no worries) and I got a black page yet again. Back to the best I can do so far which is a sm ss. The mashup is due to the css3 coding. How Lin got it is beyond this feeble brain but I admire it.
Bon chance,
I pût the code and I have a White strip in the middle. If I click on customizing I see in the white CSS APP PLACEHOLDER
When a selected the page ( before click on customize) I see my header and nav bar , my footer and in the middle I see my page name in a grey rectangle ( I supposed is the White strip in the slideshow page )
I pût the code and I have a White strip in the middle. If I click on customizing I see in the white CSS APP PLACEHOLDER
When a selected the page ( before click on customize) I see my header and nav bar , my footer and in the middle I see my page name in a grey rectangle ( I supposed is the White strip in the slideshow page )
How can I fix it ?
Are you live? Can you add your website to your DGRIN profile so we can see it and the problem (if you still have the code in)?
Are you live? Can you add your website to your DGRIN profile so we can see it and the problem (if you still have the code in)?
I have exactly that in preview. I go back to customize and I click on theme, jiggle the footer alpha channel (jiggle means move it to low opacity then move it back to where it was) I get a perfectly clean homepage and the ss plays 'perfectly'. So I publish. All I get is the header showing and in the top left corner of the screen I see some of the html (list) showing as text. The rest of the page is total white. I click on galleries in my nav (which is the only thing showing) and the galleries and the rest of the site works fine. I have given up on this. The code is basically css3 which some browsers can't display and, from what I understand, SM has somehow created it's own CSS properties which I don't understand at all.
Fastline's slide show is a good example. Soon it will be available to us. If that excites you check the price tag for having that.
Is there any way to randomize the slideshow that's been posted in this thread? Also, I haven't published my new site yet so not sure if you'll be able to see it by clicking on the link in my signature.
Is there any way to randomize the slideshow that's been posted in this thread? Also, I haven't published my new site yet so not sure if you'll be able to see it by clicking on the link in my signature.
If you mean the full screen slideshow, then no. We are begging the developer to figure that out!!
No again, we will only see your legacy site until you "unveil".
CSS - the hide the SM link is not working. i have the abbreviated Photo Sharing link
also, how do i get my footer to not land in the middle of the page? no matter what size i make the block it still pops up on the middle of the screen..
/*
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
*/
@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 }
}
ok...just for grins and giggles i tried to add a regular slideshow block on top of the full screen...interesting outcome indeed!!
another question...if i wanted to have just one full screen photo added (no matter the browser) so i could add a slideshow on top, what code would i use?
@Tammy - As to the footer in the middle of the screen, I "think" you could add a text block and make it large enough to throw the offending footer way down the page. Don't put anything in the text block -maybe a space if it had to have something. Mine does the same in Preview Mode. I have also made a request that the footer display AFTER anything else on the page. Seems like a "duhhhh" kind of programming thing. But I notice this on ALOT of New SM sites when going from page to page the footer displays FIRST and then the rest of the page displays forcing the footer down. VERY ANNOYING! I have not heard any response yet.
What happens if you delete in the html and the CSS everything except for the first image in the CSS which mentions it being a background image?
@Tammy - As to the footer in the middle of the screen, I "think" you could add a text block and make it large enough to throw the offending footer way down the page. Don't put anything in the text block -maybe a space if it had to have something. Mine does the same in Preview Mode. I have also made a request that the footer display AFTER anything else on the page. Seems like a "duhhhh" kind of programming thing. But I notice this on ALOT of New SM sites when going from page to page the footer displays FIRST and then the rest of the page displays forcing the footer down. VERY ANNOYING! I have not heard any response yet.
What happens if you delete in the html and the CSS everything except for the first image in the CSS which mentions it being a background image?
well that didn't work!! i tried to change the dimensions of the block but that isn't possible...not sure why but i can't get the little menu bar tio come u p when i hover over the area...only able to get to the wrench on the side bar...grrrr..
i will try that with the single image..but right now the non zoom slideshow is bugging the crap out of me...i also am trying to add several more photos to have it scroll through but with no luck!!
well that didn't work!! i tried to change the dimensions of the block but that isn't possible...not sure why but i can't get the little menu bar to come up when i hover over the area...only able to get to the wrench on the side bar...grrrr..
i will try that with the single image..but right now the non zoom slideshow is bugging the crap out of me...i also am trying to add several more photos to have it scroll through but with no luck!!
why must this coding be such a PITA??
anybody able to help a poor girl out on this?? i am at a loss....
issue one - move footer to bottom of page with full screen slide show - adding a text box did not work
issue two - how to make the slideshow work without zooming the pics..i tried the code in this thread and it didn't work...
issue 3 - how do i add more photos to the slideshow? i want to scroll through 10 images. i tried to copy the code and change the numbers and transition times but it was acting weird. it would go through the first six and then skip over a few. not sure what is up.
any one out here that can help? i would greatly appreciate it!!
Problem with slideshow
Hi all,
Thanks so much for the code for the full screen slideshow. It's what I've been waiting for before I unveil my new site. Your slide show lists 6 images. When I copied your code, it worked fine. I added to the HTML and CSS to show 11 images. It works fine the first time it runs through the 11 images. After the 11th image, I thought it would start from the beginning again but it doesn't. It randomly selects images. It also looks like some images want to start but it then quickly shows another image if that makes sense. I was hoping you could review the CSS and show me where I went wrong. I am using Chrome and get the same results on IE and my iPad. I also changed it so that it would not zoom per the code that you posted.
Thanks so much!,
Chuck
Here is the CSS:
/*
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
*/
@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 }
}
Hi all,
Thanks so much for the code for the full screen slideshow. It's what I've been waiting for before I unveil my new site. Your slide show lists 6 images. When I copied your code, it worked fine. I added to the HTML and CSS to show 11 images. It works fine the first time it runs through the 11 images. After the 11th image, I thought it would start from the beginning again but it doesn't. It randomly selects images. It also looks like some images want to start but it then quickly shows another image if that makes sense. I was hoping you could review the CSS and show me where I went wrong. I am using Chrome and get the same results on IE and my iPad. I also changed it so that it would not zoom per the code that you posted.
Thanks so much!,
Chuck
looks like you are having the same issue i am...i am waiting patiently for an answer..it seems the OP has not returned...
looks like you are having the same issue i am...i am waiting patiently for an answer..it seems the OP has not returned...
You need to do a little math to figure things out if you add or delete photos to the slideshow - finding the keyframe step.
Here's how to figure it out: divide the time of each image by the total time of all images. That will give you your keyframe step percentage.
Example, with 6 second images at 36 total seconds (6 images) you get .16666 or 17%. That's your keyframe step. Half of that is .083333 or 8%. That's the beginning. Add the beginning to your keyframe step and you have the end at 25%.
You need to do a little math to figure things out if you add or delete photos to the slideshow - finding the keyframe step. /
Aaron, your ss seems to work just fine -although the scroll bar won't go to the bottom and begins to jitter. Is it hosted on SM? If so, what design did you use. I've been trying to get this right for almost a month and you are the closest to making it work that I've seen. I've gotten it to run perfectly in preview but when I publish, it's gone.
How did you do that?
Thanks!
<img src="https://us.v-cdn.net/6029383/emoji/Laughing.gif" border="0" alt="" >!! well there is my problem! i am not a math person AT ALL!! and i had no idea i needed that for this! thx for all the help!! i will go see if i can get it to work...
one other thing..how do i get the footer to stay at the bottom of the page? i don't even see the SM footer on your page just your title...i have a copyright footer that stays in the middle of the screen!! thx again!<img src="https://us.v-cdn.net/6029383/emoji/wings.gif" border="0" alt="" >
Aaron, your ss seems to work just fine -although the scroll bar won't go to the bottom and begins to jitter. Is it hosted on SM? If so, what design did you use. I've been trying to get this right for almost a month and you are the closest to making it work that I've seen. I've gotten it to run perfectly in preview but when I publish, it's gone.
How did you do that?
Thanks!
i had a problem with the side bar too...make the screen resolution smaller and then u can see the whole side bar..not sure why it is so large...
Added code, still no go.
Hi, I tried to do this was on my home page I added HTML to HomePage. It created the block in the middle of the page.
I add in the HTML code and I see the Image 01, Image 02, Image 03, etc on the page. Once I add the CSS code the HTML output disappears and no pictures display.
I did notice that ../images/patterns.png line. Is that something to be concerned about?
@Wingnut...EDIT: I mean @Tammy - looking at your filenames at the end of each codeline... Are those the actual names of the files that you uploaded to SmugMug? The background image appears to be using the code designator (don't know what to call it) twice - same code. The second code should be the REAL filename.jpg.
The rest of your filenames appear to have been copied from the size of the file as you were looking at it. Like in X3. Again, the end of the line should have the ACTUAL filename you used when uploading to Smugmug. The /X3 in the code line already uses the X3 file size, I think.
Not sure how SM deals with the "_" in front of your DSC*****.jpg. Guessing you are uploading files without renaming them on your computer other than adding "edit-edit-edit" to the end, etc. Not naming them with a real structure may hurt you in the future when you have thousands and thousands of files IMHO. Just a thought.
Anyway, the filenames you are using do not conform to the manner that the original code was written and that is why I am thinking you are having troubles.
Love that it gives you random images sometimes!!!!! Maybe you have stumbled on to something there!
Hi, I tried to do this was on my home page I added HTML to HomePage. It created the block in the middle of the page.
I add in the HTML code and I see the Image 01, Image 02, Image 03, etc on the page. Once I add the CSS code the HTML output disappears and no pictures display.
I did notice that ../images/patterns.png line. Is that something to be concerned about?
Is there something else I should be looking at?
Thanks and I look forward to your reply.
The patterns.png does not seem to matter and seems most everyone just leaves it in the code. What images are you actually seeing when you only put the HTML code in - before the CSS? Also, did you create an HTML block, and enter the HTML in the HTML side and the CSS in the CSS side of that SAME block? Or did you put CSS in a separate CSS block?
You need to do a little math to figure things out if you add or delete photos to the slideshow - finding the keyframe step.
Here's how to figure it out: divide the time of each image by the total time of all images. That will give you your keyframe step percentage.
Example, with 6 second images at 36 total seconds (6 images) you get .16666 or 17%. That's your keyframe step. Half of that is .083333 or 8%. That's the beginning. Add the beginning to your keyframe step and you have the end at 25%.
Hi, I tried to do this was on my home page I added HTML to HomePage. It created the block in the middle of the page.
I add in the HTML code and I see the Image 01, Image 02, Image 03, etc on the page. Once I add the CSS code the HTML output disappears and no pictures display.
I did notice that ../images/patterns.png line. Is that something to be concerned about?
Is there something else I should be looking at?
Thanks and I look forward to your reply.
Resolved. I added a CSS block to the homepage. Moved the CSS code from the HTML to a CSS block.
Tested and now SS works!!
Comments
Thanks so much and I will try that and report back. It looks good to me on ff, ie10 and ie9 (ie9 has the static image which is expected. My earlier attempts would not show the static on less than ie10.
Looks great to me.
Charles
Port Credit. Canada
http://charlesdalyphotography.com
/*
Put Powered By Smugmug at the Bottom
*/
.sm-page-powered-by {
position: absolute;
bottom: 0;
}
at the top of the code as though you put all this in the MAIN CSS block for your home page.
No I copied the code straight from the code listed in post 19 of this thread. I had tried using the HTML block and putting both the HTML and CSS code into the respective tabs but it didn't work. So I took out the CSS code from the HTML block and added a separate CSS block with the code and that seemed to do it. Not sure if that was right or not but it worked
Liz
Interesting! WOnder if that has anything to do with the issues when viewing from other browser? Did you move it out "because it didn't work" because of the filepath issue? Tried moving it back?
So, I went back and deleted the CSS block and added it into the CSS tab of the HTML block. The only thing that showed was my Header info. Went back to the separate blocks and everything worked fine.
Strange! Beyond me to help in that!
I have renewed sympathy for cocaine addicts. Leave then return. I keep coming back to this ss. I finally got it so it worked perfectly in customize view, published it (different file name so no worries) and I got a black page yet again. Back to the best I can do so far which is a sm ss. The mashup is due to the css3 coding. How Lin got it is beyond this feeble brain but I admire it.
Bon chance,
Charles
Port Credit. Canada
http://charlesdalyphotography.com
When a selected the page ( before click on customize) I see my header and nav bar , my footer and in the middle I see my page name in a grey rectangle ( I supposed is the White strip in the slideshow page )
How can I fix it ?
Charles
Port Credit. Canada
http://charlesdalyphotography.com
Are you live? Can you add your website to your DGRIN profile so we can see it and the problem (if you still have the code in)?
Fastline's slide show is a good example. Soon it will be available to us. If that excites you check the price tag for having that.
Charles
Brampton, Canada
www.charlesdalyphotography.com
www.bednarczykphotography.com
If you mean the full screen slideshow, then no. We are begging the developer to figure that out!!
No again, we will only see your legacy site until you "unveil".
Cheers!
Help! i tried to do the slide show without the zoom and it is not liking it. i got it to work with the zoom but i wanted to try without..
here is what i have for code - what am i missing? thx!
NON ZOOM FULL SCREEN SLIDESHOW
HTML CSS - the hide the SM link is not working. i have the abbreviated Photo Sharing link
also, how do i get my footer to not land in the middle of the page? no matter what size i make the block it still pops up on the middle of the screen..
another question...if i wanted to have just one full screen photo added (no matter the browser) so i could add a slideshow on top, what code would i use?
thx for any help!!
What happens if you delete in the html and the CSS everything except for the first image in the CSS which mentions it being a background image?
well that didn't work!! i tried to change the dimensions of the block but that isn't possible...not sure why but i can't get the little menu bar tio come u p when i hover over the area...only able to get to the wrench on the side bar...grrrr..
i will try that with the single image..but right now the non zoom slideshow is bugging the crap out of me...i also am trying to add several more photos to have it scroll through but with no luck!!
why must this coding be such a PITA??
anybody able to help a poor girl out on this?? i am at a loss....
issue one - move footer to bottom of page with full screen slide show - adding a text box did not work
issue two - how to make the slideshow work without zooming the pics..i tried the code in this thread and it didn't work...
issue 3 - how do i add more photos to the slideshow? i want to scroll through 10 images. i tried to copy the code and change the numbers and transition times but it was acting weird. it would go through the first six and then skip over a few. not sure what is up.
any one out here that can help? i would greatly appreciate it!!
Hi all,
Thanks so much for the code for the full screen slideshow. It's what I've been waiting for before I unveil my new site. Your slide show lists 6 images. When I copied your code, it worked fine. I added to the HTML and CSS to show 11 images. It works fine the first time it runs through the 11 images. After the 11th image, I thought it would start from the beginning again but it doesn't. It randomly selects images. It also looks like some images want to start but it then quickly shows another image if that makes sense. I was hoping you could review the CSS and show me where I went wrong. I am using Chrome and get the same results on IE and my iPad. I also changed it so that it would not zoom per the code that you posted.
Thanks so much!,
Chuck
Here is the CSS:
/*
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://www.chuckrobinsonphoto.com/photos/i-SzqrX7K/0/X3/i-SzqrX7K-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://www.chuckrobinsonphoto.com/Photography/Maryland-1/i-w66Rnps/1/X3/_DSC4923-Edit-X3.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(http://www.chuckrobinsonphoto.com/WEBSITE/Galleries/Bar-Harbor-1/i-7HdNPgR/1/X3/Lighthouse-Edit-Edit-Edit-Edit-Edit-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://www.chuckrobinsonphoto.com/WEBSITE/Galleries/Death-Valley-1/i-tmMkKvn/1/X3/_DSC6934-Edit-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://www.chuckrobinsonphoto.com/WEBSITE/Galleries/Death-Valley-1/i-dXLtjMJ/1/X3/_DSC8903-Edit-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://www.chuckrobinsonphoto.com/photos/i-hwxzmpR/1/X3/i-hwxzmpR-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://www.chuckrobinsonphoto.com/photos/i-6kHp5VH/1/X3/i-6kHp5VH-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(7) span {
background-image: url(http://www.chuckrobinsonphoto.com/photos/i-MrwGnpc/1/X3/i-MrwGnpc-X3.jpg);
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(http://www.chuckrobinsonphoto.com/photos/i-TLcbphw/1/X3/i-TLcbphw-X3.jpg);
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
.cb-slideshow li:nth-child(9) span {
background-image: url(http://www.chuckrobinsonphoto.com/photos/i-B2sJbsj/1/X3/i-B2sJbsj-X3.jpg);
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
-ms-animation-delay: 48s;
animation-delay: 48s;
}
.cb-slideshow li:nth-child(10) span {
background-image: url(http://www.chuckrobinsonphoto.com/photos/i-pCq7dhP/1/X3/i-pCq7dhP-X3.jpg);
-webkit-animation-delay: 54s;
-moz-animation-delay: 54s;
-o-animation-delay: 54s;
-ms-animation-delay: 54s;
animation-delay: 54s;
}
.cb-slideshow li:nth-child(11) span {
background-image: url(http://www.chuckrobinsonphoto.com/photos/i-wnV6mCs/1/X3/i-wnV6mCs-X3.jpg);
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
.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;
}
.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
}
.cb-slideshow li:nth-child(8) div {
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s
}
.cb-slideshow li:nth-child(9) div {
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
-ms-animation-delay: 48s;
animation-delay: 48s
}
.cb-slideshow li:nth-child(10) div {
-webkit-animation-delay: 54s;
-moz-animation-delay: 54s;
-o-animation-delay: 54s;
-ms-animation-delay: 54s;
animation-delay: 54s
}
.cb-slideshow li:nth-child(11) div {
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s
}
/* 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 }
}
I think it has to do with the percentages in the CSS code. Check out this website and scroll down to where it says "Now, let's have a look at the slideshow animation..." http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
You need to do a little math to figure things out if you add or delete photos to the slideshow - finding the keyframe step.
Here's how to figure it out: divide the time of each image by the total time of all images. That will give you your keyframe step percentage.
Example, with 6 second images at 36 total seconds (6 images) you get .16666 or 17%. That's your keyframe step. Half of that is .083333 or 8%. That's the beginning. Add the beginning to your keyframe step and you have the end at 25%.
Thus:
@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 }
}
If you want 10 images at 6 seconds, 6/60= .10 or 10%.
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
5% { opacity: 1; animation-timing-function: ease-out; }
10% { opacity: 1 }
15% { opacity: 0 }
100% { opacity: 0 }
}
I'm using 12 images at 6 seconds each. 6/72= .08333 so I use:
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
4% { opacity: 1; animation-timing-function: ease-out; }
8% { opacity: 1 }
12% { opacity: 0 }
100% { opacity: 0 }
}
Hope that helps you guys!
You can find out more directly at the code's source and add text animation and other stuff: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
Website: www.aaronbrownphotos.com
Facebook: www.facebook.com/aaronbrownphotography
Twitter: www.twitter.com/abrownphotos
Aaron, your ss seems to work just fine -although the scroll bar won't go to the bottom and begins to jitter. Is it hosted on SM? If so, what design did you use. I've been trying to get this right for almost a month and you are the closest to making it work that I've seen. I've gotten it to run perfectly in preview but when I publish, it's gone.
How did you do that?
Thanks!
Charles
Port Credit. Canada
http://charlesdalyphotography.com
<img src="https://us.v-cdn.net/6029383/emoji/Laughing.gif" border="0" alt="" >!! well there is my problem! i am not a math person AT ALL!! and i had no idea i needed that for this! thx for all the help!! i will go see if i can get it to work...
one other thing..how do i get the footer to stay at the bottom of the page? i don't even see the SM footer on your page just your title...i have a copyright footer that stays in the middle of the screen!! thx again!<img src="https://us.v-cdn.net/6029383/emoji/wings.gif" border="0" alt="" >
Hi, I tried to do this was on my home page I added HTML to HomePage. It created the block in the middle of the page.
I add in the HTML code and I see the Image 01, Image 02, Image 03, etc on the page. Once I add the CSS code the HTML output disappears and no pictures display.
I did notice that ../images/patterns.png line. Is that something to be concerned about?
Is there something else I should be looking at?
Thanks and I look forward to your reply.
__________________________
http://www.cyberphotogs.com
The rest of your filenames appear to have been copied from the size of the file as you were looking at it. Like in X3. Again, the end of the line should have the ACTUAL filename you used when uploading to Smugmug. The /X3 in the code line already uses the X3 file size, I think.
Not sure how SM deals with the "_" in front of your DSC*****.jpg. Guessing you are uploading files without renaming them on your computer other than adding "edit-edit-edit" to the end, etc. Not naming them with a real structure may hurt you in the future when you have thousands and thousands of files IMHO. Just a thought.
Anyway, the filenames you are using do not conform to the manner that the original code was written and that is why I am thinking you are having troubles.
Love that it gives you random images sometimes!!!!! Maybe you have stumbled on to something there!
Hope this helps.
The patterns.png does not seem to matter and seems most everyone just leaves it in the code. What images are you actually seeing when you only put the HTML code in - before the CSS? Also, did you create an HTML block, and enter the HTML in the HTML side and the CSS in the CSS side of that SAME block? Or did you put CSS in a separate CSS block?
could you provide the full CSS ive been trying to do this but its not working trying for 12 images at 6 seconds long ?
Resolved. I added a CSS block to the homepage. Moved the CSS code from the HTML to a CSS block.
Tested and now SS works!!
__________________________
http://www.cyberphotogs.com