@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!
Hope this helps.
ok..alli did was go into the photo i wanted and got the links..chose from the list of sizes and copied and pasted the code. i don't change my file names ..i am going to start all over with the suggestions added here and see what happens. i have to play this weekend...thx
UGH!! ok.. not sure what my problem is. i am using 18 photos from all over my site so i did the math to do all that fun percentage and time stuff but something is not working. i need to walk away before i blow a gasket!
CSS - not sure why some of the below looks weird but that is how i copied it from my text doc...also note that when i pulled the links for the pics i got the smugmug included but my live site doesn't have that so i tried both ways and still not working...also i tried the footer code by guessing so if this is wrong please correct. and i know the Powered by SM doesn't work at all.
I have tried this slideshow and it works but I cant remove the static picture background from the slide show.
Any suggestions? www.ghulamrasool.com
what do you mean by static? i am seeing the slideshow working. do you mean if you are on a browser that does not support CSS? i think if that code is not there you only see a blank screen. i don't know as i am not on any of those browsers...
also...how did you get ypour footer to stay at the bottom of the page? mine floats in the middle!!
JR...any ideas why this doesn't work? my footer as well as SM footer floats in the middle of the page..grrr!!
Figured it out! Go to Customize, Homepage, Layout. I added 500 to Top Margin. That forced the footer and the Login/Logout to the bottom of the page. Kinda strange. I could try a higher figure and maybe it will go away altogether...maybe not. At least it is not in the middle of the slideshow.:D
WARNING!!!!!! Also, just figured out that when I did that and tried to change code in the html/css block, that the 500 totally messes up trying to use that block. You can get stuck in it with no way to save or cancel - BAD. Had to close the window tab and go back into my website. Changed the 500 back to 0 and was then able to work normally in the block. YOU HAVE BEEN WARNED!
Figured it out! Go to Customize, Homepage, Layout. I added 500 to Top Margin. That forced the footer and the Login/Logout to the bottom of the page. Kinda strange. I could try a higher figure and maybe it will go away altogether...maybe not. At least it is not in the middle of the slideshow.:D
WARNING!!!!!! Also, just figured out that when I did that and tried to change code in the html/css block, that the 500 totally messes up trying to use that block. You can get stuck in it with no way to save or cancel - BAD. Had to close the window tab and go back into my website. Changed the 500 back to 0 and was then able to work normally in the block. YOU HAVE BEEN WARNED!
yikes...well i did add some px to my footer but it only seemed to move it in the customize screen but once i hit done and publish it popped back up...thx for the effort and warning!
EDIT:
ok..i had added px to the content block originally and tnot to the layout section...i tried it at 300 and it seems to work..at least on my size screen (20in)...and as far as getting to the html block, the only way i can seem to get to it is using the tool icon on the sidebar...which is weird to begin with but it works so all is good...now i just need to figure out the other stuff and i will be all set...no zoom and more pics!!
non zoom slide show NOT WORKING!!!!!
ok...i am sooo pulling what little hair i have out....the code for the non zoom slideshow just will now work for me and no one here seems to be able to help... :cry AAAAAAHHHHHH!! running away for now..if i can get this part working i will use it and go live soon...and will worry about adding more pics later....
ok..i am done venting..
here is the code i am trying to use... obtained from here any clues folks?
Make Full page a little smaller
I love the full screen slideshow. It's working great for me. It uses the whole browser window. Is it possible to make it run BELOW the header block(s). I have a Logo Block with my name on it. Under that is my Menu Block. They seem to be both considered in the header block because if I pin the header, both those two blocks get pinned. I unpinned them for the whole site 'cause I do want them to go away when someone scrolls down on other pages. I use the two blocks on all pages.
On the homepage, for my personal logo and menu, it would look cleaner if they sat in the black background of the header and the slideshow took up the rest of the page. Not unveiled yet - so can't see it.
If this is too much programming, just let me know.
If it is not doable, is there a way to make a background color for the header blocks? I've looked all over and cannot find anything to do that. I was thinking maybe a background would overwrite that area of the slideshow. Using the SmugMug Theme.
I love the full screen slideshow. It's working great for me. It uses the whole browser window. Is it possible to make it run BELOW the header block(s). I have a Logo Block with my name on it. Under that is my Menu Block. They seem to be both considered in the header block because if I pin the header, both those two blocks get pinned. I unpinned them for the whole site 'cause I do want them to go away when someone scrolls down on other pages. I use the two blocks on all pages.
On the homepage, for my personal logo and menu, it would look cleaner if they sat in the black background of the header and the slideshow took up the rest of the page. Not unveiled yet - so can't see it.
If this is too much programming, just let me know.
If it is not doable, is there a way to make a background color for the header blocks? I've looked all over and cannot find anything to do that. I was thinking maybe a background would overwrite that area of the slideshow. Using the SmugMug Theme.
well i will tell what i did and maybe you can figure yours out...
i have a top header that is slightly opaq (sp?) using my background color. i had created my own theme so i went back into my theme settings and in there you can change the colors of each section...
try this-
Customize site > entire site > theme tab on side menu > settings (wrench) on active theme > background tab > site sections > Header > choose color and move Alpha slider for opacity > you can do this on sidebars and footer as well if needed...
so if you do this when the slideshow runs you still see some of the top of the pic...actually it is just like my live site is now only way easier to do! good luck!!
WOW! I think that actually worked! Thanks for the detail about how to get where I needed to be. I made the background header VERY black and the slideshow does not show through it - which just may be close enough to what I want. Still has some slideshow image above it which baffles me 'cause you would expect the header to be the uppermost field. Anyway, this appears way better than what I had before. THANKS! Getting closer to unveil....
EDIT: Actually, the image I see above the header in PREVIEW is the Smugmug Upload, Organize, Customize, etc field. So perhaps when I unveil, there will be no image above my header which would be great!
I'm using the Arrow theme and my site is still unveiled.
I've put the full screen slideshow code and it works, but i have 2 problems:
1. During the transition between any 2 pictures i see the first picture of the slideshow.
2. The pictures i've put are in very high resolution, but in the slideshow the pictures are pixlated (in the legacy site, they look great)
I'm using the Arrow theme and my site is still unveiled.
I've put the full screen slideshow code and it works, but i have 2 problems:
1. During the transition between any 2 pictures i see the first picture of the slideshow.
2. The pictures i've put are in very high resolution, but in the slideshow the pictures are pixlated (in the legacy site, they look great)
please help
Moshi
mgitelis.com
Perhaps post a copy of your css code. Did you modify the code? Would especially like to see the lines where it points to your images.
Perhaps post a copy of your css code. Did you modify the code? Would especially like to see the lines where it points to your images.
Hi,
Thank you for your quick response.
I did 2 changes:
1. I've increased the number of photos to 16 (i've copy-paste accordignly)
2. I've changed the location of the photos in the css.
i'm attaching the code
Thank you
Moshi
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://mgitelis.smugmug.com/photos/i-Bck65dD/0/L/i-Bck65dD-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;
}
WOW! I think that actually worked! Thanks for the detail about how to get where I needed to be. I made the background header VERY black and the slideshow does not show through it - which just may be close enough to what I want. Still has some slideshow image above it which baffles me 'cause you would expect the header to be the uppermost field. Anyway, this appears way better than what I had before. THANKS! Getting closer to unveil....
EDIT: Actually, the image I see above the header in PREVIEW is the Smugmug Upload, Organize, Customize, etc field. So perhaps when I unveil, there will be no image above my header which would be great!
glad it helped!! i found it by accident myself!!
and yes the stuff at the top is gone once unveiled...try clicking preview on the top right before you safe your edits and it should go away...
i am still waiting for help wo figure out the issue with non-zoom version not working...other than that all else seems to be working...
I'm using the Arrow theme and my site is still unveiled.
I've put the full screen slideshow code and it works, but i have 2 problems:
1. During the transition between any 2 pictures i see the first picture of the slideshow.
2. The pictures i've put are in very high resolution, but in the slideshow the pictures are pixlated (in the legacy site, they look great)
I did 2 changes:
1. I've increased the number of photos to 16 (i've copy-paste accordignly)
2. I've changed the location of the photos in the css.
i'm attaching the code
Thank you
Moshi
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://mgitelis.smugmug.com/photos/i-Bck65dD/0/L/i-Bck65dD-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;
}
I definitely see some issues in the code. There is math that has to change when you increase the number of images. Early up the code find the section that has 36 seconds. Think this has to reflect the total time. Later down the code where it has the percentages, a different math has to occur here. Plus, I think you have to have one more of each of those for each additional image. Look much further up in this thread and I think you will find the posts on the mathematics you need to do. Or hopefully, the person who knows about the math will read this and chime in with the actual "correct" math for these two areas. Hopefully, this post will get you moving in the right direction!
guys..i finally got it to work the way i wanted!! woot!! more details here if you want to know the code i used....it took a little bit of tweaking but finally how i wanted it to work!! :ivar
good luck!!
I am new at Dgrin and hope I can find help, the nice guys at smugmug support suggested to post my problem here.
I am NOT an CSS or HTML expert, so I would simply like to find a way to make the slideshow on my smugmug start page as big as possible,
rrwenzel.smugmug.com
Could anyone help me with a simple solution?
Thank you so much ! René
I am NOT an CSS or HTML expert, so I would simply like to find a way to make the slideshow on my smugmug start page as big as possible,
rrwenzel.smugmug.com
Could anyone help me with a simple solution?
The standard smug slideshow is limited in size by the available vertical space on your page. You have stacked a site name, a fairly tall logo, and a menu bar. If you want the slideshow a bit larger you could minimize the vertical space you are using above the slideshow and continue to use the standard smugmug slideshow. As far as I know this is the only simple solution available at this time.
If you want a full screen slideshow you can use the code from the first post of this thread and adapt it to your needs.
The standard smug slideshow is limited in size by the available vertical space on your page. You have stacked a site name, a fairly tall logo, and a menu bar. If you want the slideshow a bit larger you could minimize the vertical space you are using above the slideshow and continue to use the standard smugmug slideshow. As far as I know this is the only simple solution available at this time.
If you want a full screen slideshow you can use the code from the first post of this thread and adapt it to your needs.
--- Denise
Thank you! I will try!
However, why is the line with the socail icons so far down? setings are "auto height" and margins all set to "0" !
René
First of all thanks for your hard work and sharing this information. Without the assistance of people like yourself I don't think I would ever have a website. I have tried multiple times to use your code and when I install it it works fine with the links to your images but when I cut and paste my own links in, all I get is a blank screen. I would think this is an easy step, but somehow I'm not getting it. This is my first post so I'm not sure what information you require to assist me, but I'm happy to forward it you if you're able to help. Thanks.
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.
Beautiful work, many many thanks!!!!!!
it works perfectly on iPad, IE 10 on Win7 as well as with Firefox on MacOs.
Only, I use Isis theme with the no zoom code and I have the same issue about slideshow exceeding the logo and menu area: what is the z-index set you are referring to to fix this issue?
I also need to fix a couple more issues:
1 - can I amend the image exposure and the fading pace?
2 - most images I use for the slideshow are 900x600px (I then selected the XL size share link for the code) and they display well on 15-17" laptop screens and iPad as well; but the resolution once viewed on a 20" iMac screen is awkward (nothing comparable with the superb example website) even for one very big image (1260x600) that I tried adding to the slideshow. So I am not sure about what size I should use to have images displayed well on larger screens too.
3 - last but not least, I am pretty sure I have seen a post within the thread about how to remove the SmugMug footer but I can't find it anymore.
Again, great great work with this code!! thumb
2 - most images I use for the slideshow are 900x600px (I then selected the XL size share link for the code) and they display well on 15-17" laptop screens and iPad as well; but the resolution once viewed on a 20" iMac screen is awkward (nothing comparable with the superb example website) even for one very big image (1260x600) that I tried adding to the slideshow. So I am not sure about what size I should use to have images displayed well on larger screens too.
I fixed this one by uploading extra large images (1680x1020)
J
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.
I'm also having the same issue, images are overlayed on my logo and menu on top of the page.
Only, I am not sure where to apply the corrections you suggest. I don't have a "Header" section in my Customize>Homepage.
Instead, I can go on the Logo customizing field
and try to change the top/bottom margins there, which I did but didn't make any difference.
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.
Hi Kelley
just had a look at your site to see how your ss is working and noticed the resolution of your images is rather low.
What size are they? Maybe you should increase the size a bit.
Fabio
I'm also having the same issue, images are overlayed on my logo and menu on top of the page.
Only, I am not sure where to apply the corrections you suggest. I don't have a "Header" section in my Customize>Homepage.
Instead, I can go on the Logo customizing field
and try to change the top/bottom margins there, which I did but didn't make any difference.
I was able to set the color for the area where my "logo" and menu area is. I made it very dark so the slideshow does not show through it. Have forgotten where I did it...one of the SETTINGS areas. See how mine looks now and see if this is what you want. http://www.southeasternphotography.com
I was able to set the color for the area where my "logo" and menu area is. I made it very dark so the slideshow does not show through it. Have forgotten where I did it...one of the SETTINGS areas. See how mine looks now and see if this is what you want. http://www.southeasternphotography.com
Can't find any way to change the background color of logo and menu areas, at least not in the available customization settings I can get.
Besides that, I have a white background in my website and a grey logo; even if possible, I should set a very bright background to go under logo and menu to keep the page homogeneous and that would conflict with text colors .
That said, in your post I previously quoted
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)........
you refer to "margins"; can you recall where you amended those margins settings?
Fabio
Comments
ok..alli did was go into the photo i wanted and got the links..chose from the list of sizes and copied and pasted the code. i don't change my file names ..i am going to start all over with the suggestions added here and see what happens. i have to play this weekend...thx
here is the code i used...any ideas?
thx for any help!!
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> <li> <span>Image 07</span> </li> <li> <span>Image 08</span> </li> <li> <span>Image 09</span> </li> <li> <span>Image 10</span> </li> <li> <span>Image 11</span> </li> <li> <span>Image 12</span> </li> <li> <span>Image 13</span> </li> <li> <span>Image 14</span> </li> <li> <span>Image 15</span> </li> <li> <span>Image 16</span> </li> <li> <span>Image 17</span> </li> <li> <span>Image 18</span> </li> </ul>CSS - not sure why some of the below looks weird but that is how i copied it from my text doc...also note that when i pulled the links for the pics i got the smugmug included but my live site doesn't have that so i tried both ways and still not working...also i tried the footer code by guessing so if this is wrong please correct. and i know the Powered by SM doesn't work at all.
/*----- Put Powered By Smugmug at the Bottom -----*/ .sm-page-powered-by { position: absolute; bottom: 0; } /*----- Put footer at the Bottom -----*/ .footer { 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://tammygphotography.smugmug.com/Portfolio/Nature-Landscapes/i-25QGvPZ/1/XL/PA130412-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: 100%; top: 0px; left: 0px; z-index: 0; } .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 108s linear infinite 0s; -moz-animation: imageAnimation 108s linear infinite 0s; -o-animation: imageAnimation 108s linear infinite 0s; -ms-animation: imageAnimation 108s linear infinite 0s; animation: imageAnimation 108s 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 108s linear infinite 0s; -moz-animation: titleAnimation 108s linear infinite 0s; -o-animation: titleAnimation 108s linear infinite 0s; -ms-animation: titleAnimation 108s linear infinite 0s; animation: titleAnimation 108s 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://tammygphotography.smugmug.com/Portfolio/Nature-Landscapes/i-25QGvPZ/1/XL/PA130412-XL.jpg) } .cb-slideshow li:nth-child(2) span { background-image: url(http://tammygphotography.smugmug.com/Portfolio/Classic-Cars/i-vVHmJg3/1/XL/P8078690-XL.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://tammygphotography.smugmug.com/Portfolio/Nautical/i-pqjgFsG/1/XL/P7158121-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://tammygphotography.smugmug.com/Portfolio/Planes/i-HWh2BCr/1/XL/P6307799-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://www.tammygphotography.com/Portfolio/Flowers-Macro/i-mSRvvnT/1/XL/PA210711-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://www.tammygphotography.com/Portfolio/Liquid-Art/i-3K57ZX3/3/XL/P2081325-XL.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.tammygphotography.com/Portfolio/Classic-Cars/i-qWFwwbb/1/XL/P8078684-XL.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.tammygphotography.com/Portfolio/Nautical/i-PcNfKJb/1/XL/P6247032-XL.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.tammygphotography.com/Portfolio/Planes/i-2ZtFwnt/1/XL/P6307743-XL.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.tammygphotography.com/Portfolio/Flowers-Macro/i-kjKd5wh/1/XL/P7158155-XL.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.tammygphotography.com/Portfolio/Liquid-Art/i-LMkrbZn/3/XL/P2081340-XL.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(12) span { background-image: url(http://www.tammygphotography.com/Portfolio/Nature-Landscapes/i-SRSDmd3/1/XL/PA130273-XL.jpg); -webkit-animation-delay: 66s; -moz-animation-delay: 66s; -o-animation-delay: 66s; -ms-animation-delay: 66s; animation-delay: 66s; } .cb-slideshow li:nth-child(13) span { background-image: url(http://www.tammygphotography.com/Portfolio/Planes/i-mVgcKm9/1/XL/P6307453-XL.jpg); -webkit-animation-delay: 72s; -moz-animation-delay: 72s; -o-animation-delay: 72s; -ms-animation-delay: 72s; animation-delay: 72s; } .cb-slideshow li:nth-child(14) span { background-image: url(http://www.tammygphotography. com/Portfolio/Nature-Landscapes/i-M86WKrG/1/XL/PA050061-XL.jpg); -webkit-animation-delay: 78s; -moz-animation-delay: 78s; -o-animation-delay: 78s; -ms-animation-delay: 78s; animation-delay: 78s; } .cb-slideshow li:nth-child(15) span { background-image: url(http://www.tammygphotography.com/Portfolio/Nature-Landscapes/i-wGkLck2/1/XL/P8298790-XL.jpg); -webkit-animation-delay: 84s; -moz-animation-delay: 84s; -o-animation-delay: 84s; -ms-animation-delay: 84s; animation-delay: 84s; } .cb-slideshow li:nth-child(16) span { background-image: url(http://www.tammygphotography.com/Portfolio/Nautical/i-HSRwbrG/1/XL/P6246862-XL.jpg); -webkit-animation-delay: 90s; -moz-animation-delay: 90s; -o-animation-delay: 90s; -ms-animation-delay: 90s; animation-delay: 90s; } .cb-slideshow li:nth-child(17) span { background-image: url(http://www.tammygphotography.com/Portfolio/Odds-Ends/i-dgmWJSS/1/XL/P6247106-XL.jpg); -webkit-animation-delay: 96s; -moz-animation-delay: 96s; -o-animation-delay: 96s; -ms-animation-delay: 96s; animation-delay: 96s; } .cb-slideshow li:nth-child(18) span { background-image: url(http://www.tammygphotography.com/Portfolio/Odds-Ends/i-rBg3T3k/1/XL/P7147829-XL.jpg); -webkit-animation-delay: 102s; -moz-animation-delay: 102s; -o-animation-delay: 102s; -ms-animation-delay: 102s; animation-delay: 102s; } .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; } .cb-slideshow li:nth-child(12) div { -webkit-animation-delay: 66s; -moz-animation-delay: 66s; -o-animation-delay: 66s; -ms-animation-delay: 66s; animation-delay: 66s; } .cb-slideshow li:nth-child(13) div { -webkit-animation-delay: 72s; -moz-animation-delay: 72s; -o-animation-delay: 72s; -ms-animation-delay: 72s; animation-delay: 72s; } .cb-slideshow li:nth-child(14) div { -webkit-animation-delay: 78s; -moz-animation-delay: 78s; -o-animation-delay: 78s; -ms-animation-delay: 78s; animation-delay: 78s; } .cb-slideshow li:nth-child(15) div { -webkit-animation-delay: 84s; -moz-animation-delay: 84s; -o-animation-delay: 84s; -ms-animation-delay: 84s; animation-delay: 84s; } .cb-slideshow li:nth-child(16) div { -webkit-animation-delay: 90s; -moz-animation-delay: 90s; -o-animation-delay: 90s; -ms-animation-delay: 90s; animation-delay: 90s; } .cb-slideshow li:nth-child(17) div { -webkit-animation-delay: 96s; -moz-animation-delay: 96s; -o-animation-delay: 96s; -ms-animation-delay: 96s; animation-delay: 96s; } .cb-slideshow li:nth-child(18) div { -webkit-animation-delay: 102s; -moz-animation-delay: 102s; -o-animation-delay: 102s; -ms-animation-delay: 102s; animation-delay: 102s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 3% { opacity: 1; -webkit-animation-timing-function: ease-out; } 6% { opacity: 1 } 9% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 3% { opacity: 1; -moz-animation-timing-function: ease-out; } 6% { opacity: 1 } 9% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 3% { opacity: 1; -o-animation-timing-function: ease-out; } 6% { opacity: 1 } 9% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 3% { opacity: 1; -ms-animation-timing-function: ease-out; } 6% { opacity: 1 } 9% { opacity: 0 } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 3% { opacity: 1; animation-timing-function: ease-out; } 6% { opacity: 1 } 9% { 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 } }Any suggestions? www.ghulamrasool.com
what do you mean by static? i am seeing the slideshow working. do you mean if you are on a browser that does not support CSS? i think if that code is not there you only see a blank screen. i don't know as i am not on any of those browsers...
also...how did you get ypour footer to stay at the bottom of the page? mine floats in the middle!!
JR...any ideas why this doesn't work? my footer as well as SM footer floats in the middle of the page..grrr!!
Figured it out! Go to Customize, Homepage, Layout. I added 500 to Top Margin. That forced the footer and the Login/Logout to the bottom of the page. Kinda strange. I could try a higher figure and maybe it will go away altogether...maybe not. At least it is not in the middle of the slideshow.:D
WARNING!!!!!! Also, just figured out that when I did that and tried to change code in the html/css block, that the 500 totally messes up trying to use that block. You can get stuck in it with no way to save or cancel - BAD. Had to close the window tab and go back into my website. Changed the 500 back to 0 and was then able to work normally in the block. YOU HAVE BEEN WARNED!
yikes...well i did add some px to my footer but it only seemed to move it in the customize screen but once i hit done and publish it popped back up...thx for the effort and warning!
EDIT:
ok..i had added px to the content block originally and tnot to the layout section...i tried it at 300 and it seems to work..at least on my size screen (20in)...and as far as getting to the html block, the only way i can seem to get to it is using the tool icon on the sidebar...which is weird to begin with but it works so all is good...now i just need to figure out the other stuff and i will be all set...no zoom and more pics!!
ok...i am sooo pulling what little hair i have out....the code for the non zoom slideshow just will now work for me and no one here seems to be able to help...
ok..i am done venting..
here is the code i am trying to use... obtained from here
any clues folks?
/*----- 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.tammygphotography.com/Portfolio/Nature-Landscapes/i-25QGvPZ/1/XL/PA130412-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: 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: 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; 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.tammygphotography.com/Portfolio/Nature-Landscapes/i-25QGvPZ/1/XL/PA130412-XL.jpg) } .cb-slideshow li:nth-child(2) span { background-image: url(http://www.tammygphotography.com/Portfolio/Planes/i-HWh2BCr/1/XL/P6307799-XL.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.tammygphotography.com/Portfolio/Flowers-Macro/i-mSRvvnT/1/XL/PA210711-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://www.tammygphotography.com/Portfolio/Liquid-Art/i-LMkrbZn/3/XL/P2081340-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://www.tammygphotography.com/Portfolio/Nautical/i-PcNfKJb/1/XL/P6247032-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://www.tammygphotography.com/Portfolio/Nature-Landscapes/i-M86WKrG/1/XL/PA050061-XL.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; } /* 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; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-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 love the full screen slideshow. It's working great for me. It uses the whole browser window. Is it possible to make it run BELOW the header block(s). I have a Logo Block with my name on it. Under that is my Menu Block. They seem to be both considered in the header block because if I pin the header, both those two blocks get pinned. I unpinned them for the whole site 'cause I do want them to go away when someone scrolls down on other pages. I use the two blocks on all pages.
On the homepage, for my personal logo and menu, it would look cleaner if they sat in the black background of the header and the slideshow took up the rest of the page. Not unveiled yet - so can't see it.
If this is too much programming, just let me know.
If it is not doable, is there a way to make a background color for the header blocks? I've looked all over and cannot find anything to do that. I was thinking maybe a background would overwrite that area of the slideshow. Using the SmugMug Theme.
well i will tell what i did and maybe you can figure yours out...
i have a top header that is slightly opaq (sp?) using my background color. i had created my own theme so i went back into my theme settings and in there you can change the colors of each section...
try this-
Customize site > entire site > theme tab on side menu > settings (wrench) on active theme > background tab > site sections > Header > choose color and move Alpha slider for opacity > you can do this on sidebars and footer as well if needed...
so if you do this when the slideshow runs you still see some of the top of the pic...actually it is just like my live site is now only way easier to do! good luck!!
EDIT: Actually, the image I see above the header in PREVIEW is the Smugmug Upload, Organize, Customize, etc field. So perhaps when I unveil, there will be no image above my header which would be great!
I'm using the Arrow theme and my site is still unveiled.
I've put the full screen slideshow code and it works, but i have 2 problems:
1. During the transition between any 2 pictures i see the first picture of the slideshow.
2. The pictures i've put are in very high resolution, but in the slideshow the pictures are pixlated (in the legacy site, they look great)
please help
Moshi
mgitelis.com
Perhaps post a copy of your css code. Did you modify the code? Would especially like to see the lines where it points to your images.
Hi,
Thank you for your quick response.
I did 2 changes:
1. I've increased the number of photos to 16 (i've copy-paste accordignly)
2. I've changed the location of the photos in the css.
i'm attaching the code
Thank you
Moshi
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://mgitelis.smugmug.com/photos/i-Bck65dD/0/L/i-Bck65dD-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://mgitelis.smugmug.com/photos/i-Bck65dD/0/L/i-Bck65dD-X3.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(http://mgitelis.smugmug.com/photos/i-fzJPSV3/0/L/i-fzJPSV3-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://mgitelis.smugmug.com/photos/i-S5fZKnX/0/L/i-S5fZKnX-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://mgitelis.smugmug.com/photos/i-rQCnjQ7/0/L/i-rQCnjQ7-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://mgitelis.smugmug.com/photos/i-vvmj4qJ/0/L/i-vvmj4qJ-L.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://mgitelis.smugmug.com/photos/i-CvGVpsQ/0/L/i-CvGVpsQ-L.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://mgitelis.smugmug.com/photos/i-SZhDwnM/0/L/i-SZhDwnM-L.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://mgitelis.smugmug.com/photos/i-qQx6KDL/0/L/i-qQx6KDL-L.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://mgitelis.smugmug.com/photos/i-rgmsxSr/0/L/i-rgmsxSr-L.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://mgitelis.smugmug.com/photos/i-qsTR5nJ/0/L/i-qsTR5nJ-L.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://mgitelis.smugmug.com/photos/i-DKvXSrD/0/L/i-DKvXSrD-L.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(12) span {
background-image: url(http://mgitelis.smugmug.com/photos/i-h6PXRJw/0/L/i-h6PXRJw-L.jpg);
-webkit-animation-delay: 66s;
-moz-animation-delay: 66s;
-o-animation-delay: 66s;
-ms-animation-delay: 66s;
animation-delay: 66s;
}
.cb-slideshow li:nth-child(13) span {
background-image: url(http://mgitelis.smugmug.com/photos/i-rGmR8fm/0/L/i-rGmR8fm-L.jpg);
-webkit-animation-delay: 72s;
-moz-animation-delay: 72s;
-o-animation-delay: 72s;
-ms-animation-delay: 72s;
animation-delay: 72s;
}
.cb-slideshow li:nth-child(14) span {
background-image: url(http://mgitelis.smugmug.com/photos/i-fMnkWng/0/L/i-fMnkWng-L.jpg);
-webkit-animation-delay: 78s;
-moz-animation-delay: 78s;
-o-animation-delay: 78s;
-ms-animation-delay: 78s;
animation-delay: 78s;
}
.cb-slideshow li:nth-child(15) span {
background-image: url(http://mgitelis.smugmug.com/photos/i-FF3smFF/0/L/i-FF3smFF-L.jpg);
-webkit-animation-delay: 84s;
-moz-animation-delay: 84s;
-o-animation-delay: 84s;
-ms-animation-delay: 84s;
animation-delay: 84s;
}
.cb-slideshow li:nth-child(16) span {
background-image: url(http://mgitelis.smugmug.com/photos/i-sX8t7Mc/0/L/i-sX8t7Mc-L.jpg);
-webkit-animation-delay: 90s;
-moz-animation-delay: 90s;
-o-animation-delay: 90s;
-ms-animation-delay: 90s;
animation-delay: 90s;
}
/* 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;
}
}
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>
<li>
<span>Image 07</span>
</li>
<li>
<span>Image 08</span>
</li>
<li>
<span>Image 09</span>
</li>
<li>
<span>Image 10</span>
</li>
<li>
<span>Image 11</span>
</li>
<li>
<span>Image 12</span>
</li>
<li>
<span>Image 13</span>
</li>
<li>
<span>Image 14</span>
</li>
<li>
<span>Image 15</span>
</li>
<li>
<span>Image 16</span>
</li>
</ul>
and yes the stuff at the top is gone once unveiled...try clicking preview on the top right before you safe your edits and it should go away...
i am still waiting for help wo figure out the issue with non-zoom version not working...other than that all else seems to be working...
I definitely see some issues in the code. There is math that has to change when you increase the number of images. Early up the code find the section that has 36 seconds. Think this has to reflect the total time. Later down the code where it has the percentages, a different math has to occur here. Plus, I think you have to have one more of each of those for each additional image. Look much further up in this thread and I think you will find the posts on the mathematics you need to do. Or hopefully, the person who knows about the math will read this and chime in with the actual "correct" math for these two areas. Hopefully, this post will get you moving in the right direction!
good luck!!
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> <li> <span>Image 07</span> </li> <li> <span>Image 08</span> </li> <li> <span>Image 09</span> </li> <li> <span>Image 10</span> </li> <li> <span>Image 11</span> </li> <li> <span>Image 12</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://www.tammygphotography.com/photos/i-q7n3wfn/0/X3/i- q7n3wfn-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 96s linear infinite 0s; -moz-animation: imageAnimation 96s linear infinite 0s; -o-animation: imageAnimation 96s linear infinite 0s; -ms-animation: imageAnimation 96s linear infinite 0s; animation: imageAnimation 96s 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 96s linear infinite 0s; -moz-animation: titleAnimation 96s linear infinite 0s; -o-animation: titleAnimation 96s linear infinite 0s; -ms-animation: titleAnimation 96s linear infinite 0s; animation: titleAnimation 96s 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.tammygphotography.com/photos/i- q7n3wfn/0/X3/i-q7n3wfn-X3.jpg) } .cb-slideshow li:nth-child(2) span { background-image: url(http://www.tammygphotography.com/photos/i- GNvspTg/0/X3/i-GNvspTg-X3.jpg); -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -o-animation-delay: 8s; -ms-animation-delay: 8s; animation-delay: 8s; } .cb-slideshow li:nth-child(3) span { background-image: url(http://www.tammygphotography.com/photos/i- jVT39Pm/0/X3/i-jVT39Pm-X3.jpg); -webkit-animation-delay: 16s; -moz-animation-delay: 16s; -o-animation-delay: 16s; -ms-animation-delay: 16s; animation-delay: 16s; } .cb-slideshow li:nth-child(4) span { background-image: url(http://www.tammygphotography.com/photos/i- gHKS74C/0/X3/i-gHKS74C-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(5) span { background-image: url(http://www.tammygphotography.com/photos/i- 49TrHTD/0/X3/i-49TrHTD-X3.jpg); -webkit-animation-delay: 32s; -moz-animation-delay: 32s; -o-animation-delay: 32s; -ms-animation-delay: 32s; animation-delay: 32s; } .cb-slideshow li:nth-child(6) span { background-image: url(http://www.tammygphotography.com/photos/i- M75w6TB/0/X3/i-M75w6TB-X3.jpg); -webkit-animation-delay: 40s; -moz-animation-delay: 40s; -o-animation-delay: 40s; -ms-animation-delay: 40s; animation-delay: 40s; } .cb-slideshow li:nth-child(7) span { background-image: url(http://www.tammygphotography.com/photos/i- 2Kw7Ghv/0/X3/i-2Kw7Ghv-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(8) span { background-image: url(http://www.tammygphotography.com/photos/i- tHt6R3r/0/X3/i-tHt6R3r-X3.jpg); -webkit-animation-delay: 56s; -moz-animation-delay: 56s; -o-animation-delay: 56s; -ms-animation-delay: 56s; animation-delay: 56s; } .cb-slideshow li:nth-child(9) span { background-image: url(http://www.tammygphotography.com/photos/i- rFMDtdP/0/X3/i-rFMDtdP-X3.jpg); -webkit-animation-delay: 64s; -moz-animation-delay: 64s; -o-animation-delay: 64s; -ms-animation-delay: 64s; animation-delay: 64s; } .cb-slideshow li:nth-child(10) span { background-image: url(http://www.tammygphotography.com/photos/i- cLhpdm9/0/X3/i-cLhpdm9-X3.jpg); -webkit-animation-delay: 72s; -moz-animation-delay: 72s; -o-animation-delay: 72s; -ms-animation-delay: 72s; animation-delay: 72s; } .cb-slideshow li:nth-child(11) span { background-image: url(http://www.tammygphotography.com/photos/i- 8wcfKGB/0/X3/i-8wcfKGB-X3.jpg); -webkit-animation-delay: 80s; -moz-animation-delay: 80s; -o-animation-delay: 80s; -ms-animation-delay: 80s; animation-delay: 80s; } .cb-slideshow li:nth-child(12) span { background-image: url(http://www.tammygphotography.com/photos/i- Q8Ndrxc/0/X3/i-Q8Ndrxc-X3.jpg); -webkit-animation-delay: 88s; -moz-animation-delay: 88s; -o-animation-delay: 88s; -ms-animation-delay: 88s; animation-delay: 88s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 4% { opacity: 1; -webkit-animation-timing-function: ease-out; } 8% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 4% { opacity: 1; -moz-animation-timing-function: ease-out; } 8% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 4% { opacity: 1; -o-animation-timing-function: ease-out; } 8% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 4% { opacity: 1; -ms-animation-timing-function: ease-out; } 8% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 4% { opacity: 1; animation-timing-function: ease-out; } 8% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } } /* Animation for the title */ @-webkit-keyframes titleAnimation { 0% { opacity: 0; } 4% { opacity: 1; } 8% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes titleAnimation { 0% { opacity: 0; } 4% { opacity: 1; } 8% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes titleAnimation { 0% { opacity: 0; } 4% { opacity: 1; } 8% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes titleAnimation { 0% { opacity: 0; } 4% { opacity: 1; } 8% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } } @keyframes titleAnimation { 0% { opacity: 0; } 4% { opacity: 1; } 8% { opacity: 1; } 16% { 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 am new at Dgrin and hope I can find help, the nice guys at smugmug support suggested to post my problem here.
I am NOT an CSS or HTML expert, so I would simply like to find a way to make the slideshow on my smugmug start page as big as possible,
rrwenzel.smugmug.com
Could anyone help me with a simple solution?
Thank you so much ! René
If you want a full screen slideshow you can use the code from the first post of this thread and adapt it to your needs.
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
Thank you! I will try!
However, why is the line with the socail icons so far down? setings are "auto height" and margins all set to "0" !
René
Hi,
First of all thanks for your hard work and sharing this information. Without the assistance of people like yourself I don't think I would ever have a website. I have tried multiple times to use your code and when I install it it works fine with the links to your images but when I cut and paste my own links in, all I get is a blank screen. I would think this is an easy step, but somehow I'm not getting it. This is my first post so I'm not sure what information you require to assist me, but I'm happy to forward it you if you're able to help. Thanks.
I haven't been following this thread lately. I see this is for using 12 images correct? And is this the zoom or non-zoom version?
it works perfectly on iPad, IE 10 on Win7 as well as with Firefox on MacOs.
Only, I use Isis theme with the no zoom code and I have the same issue about slideshow exceeding the logo and menu area: what is the z-index set you are referring to to fix this issue?
I also need to fix a couple more issues:
1 - can I amend the image exposure and the fading pace?
2 - most images I use for the slideshow are 900x600px (I then selected the XL size share link for the code) and they display well on 15-17" laptop screens and iPad as well; but the resolution once viewed on a 20" iMac screen is awkward (nothing comparable with the superb example website) even for one very big image (1260x600) that I tried adding to the slideshow. So I am not sure about what size I should use to have images displayed well on larger screens too.
3 - last but not least, I am pretty sure I have seen a post within the thread about how to remove the SmugMug footer but I can't find it anymore.
Again, great great work with this code!!
Venice PhotoBlog
Venice PhotoBlog
I'm also having the same issue, images are overlayed on my logo and menu on top of the page.
Only, I am not sure where to apply the corrections you suggest. I don't have a "Header" section in my Customize>Homepage.
Instead, I can go on the Logo customizing field
and try to change the top/bottom margins there, which I did but didn't make any difference.
Venice PhotoBlog
just had a look at your site to see how your ss is working and noticed the resolution of your images is rather low.
What size are they? Maybe you should increase the size a bit.
Fabio
Venice PhotoBlog
I was able to set the color for the area where my "logo" and menu area is. I made it very dark so the slideshow does not show through it. Have forgotten where I did it...one of the SETTINGS areas. See how mine looks now and see if this is what you want. http://www.southeasternphotography.com
Besides that, I have a white background in my website and a grey logo; even if possible, I should set a very bright background to go under logo and menu to keep the page homogeneous and that would conflict with text colors
That said, in your post I previously quoted you refer to "margins"; can you recall where you amended those margins settings?
Fabio
Venice PhotoBlog