Working Fullscreen Slideshow... Almost

fabthi · November 21, 2013

jrhessey wrote: »

Not sure on that answer. I didn't think the scrollbars were there at first. It is doing it on mine as well. Let me look in to it and see if I can figure something out.

Thanks Don, your help is priceless!

jpmac55 · November 24, 2013

I never realized the Slideshow feature wasn't working on my site. I never thought to check because slideshows have been around as long as photo's have been posted on the internet. OH well, time to start reading pages of threads for a fix.

denisegoldberg · November 24, 2013

jpmac55 wrote: »

I never realized the Slideshow feature wasn't working on my site. I never thought to check because slideshows have been around as long as photo's have been posted on the internet. OH well, time to start reading pages of threads for a fix.

The slideshow you're referencing has nothing to do with the customization in this thread. Please don't continue to add the same comment to multiple threads.

--- Denise

jrhessey · November 25, 2013

fabthi wrote: »

Thanks Don, your help is priceless!

The only fix I can get to work breaks the zoom feature of the slideshow. Honestly, I think I like it better.

Put this in the css code

body,html{overflow:hidden}

topmedic · December 3, 2013

Thanks for this . This works well for me. Except...

This code doesn't really work for me on ie 9. It still shows blank. Thoughts? Thanks.

.sm-ie-5, .sm-ie-6, .sm-ie-7, .sm-ie-8, .sm-ie-9 {
  background: url(http://www.willtakepicturesforfood.com/photos/i-PWgnQTr/0/X3/i-PWgnQTr-X3.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

topmedic · December 4, 2013

topmedic wrote: »
Thanks for this . This works well for me. Except...

This code doesn't really work for me on ie 9. It still shows blank. Thoughts? Thanks.
.sm-ie-5, .sm-ie-6, .sm-ie-7, .sm-ie-8, .sm-ie-9 {
  background: url(http://www.willtakepicturesforfood.com/photos/i-PWgnQTr/0/X3/i-PWgnQTr-X3.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Fixed it. Create a separate CSS file just for the code above.

universeee · December 6, 2013

topmedic wrote: »

Fixed it. Create a separate CSS file just for the code above.

Thank you very much, it really helps me!

universeee · December 6, 2013

jrhessey wrote: »

I am using the css3 animations, however they aren't compatible in ie9 and prior. I'm trying to figure out a way to redirect to another page based on ie version or use the modernizr javascript but we can't even load it from an external site. So far having no luck, so I thought I would post it here and see if someone else might come up with something...

Here is the working example

You must either be using Chrome, Firefox, or ie10 to view the transitions, otherwise it shows a black screen.

There are customizations in the code above to make it work with smugmugs design, however you can downlaod the orginal code from here

You are awesome!!!

Thank you very much...

jhelms · December 9, 2013

I'm still using this and very appreciative of the users that have shared info about it but still ache for an automatic fullscreen (or heck, even 'almost' fs) or stretchy slideshow. I update my portfolio gallery via Lightroom and having an automatic slideshow that pulls from my dynamic and ever changing portfolio gallery would really simplify my workflow.

Here's the user feedback page for this:

http://feedback.smugmug.com/forums/17723-smugmug/suggestions/4252553-put-back-the-full-screen-slideshow-for-the-home-pa

If you are out of votes, you can pull up the other items that you have voted on in the past and choose to remove those votes (or take them back) to give you the ability to vote on this!

onefortheroadphoto · December 9, 2013

Image Quality Seems Very Low
I love this slideshow and I really apprecaite all the info and work put in to it!

But, I do have a few things I'm hoping to get some help on:

1. No matter what size screen I'm using to view my site (24", 13", 10.1 tab, Samsung Galazy S4), the slideshow images seem very pixelated and blurry. I've read through the forums and tried all suggestions - I'm using the "Get a Link" option for "X3 Large" and have made sure the link in the code includes ".../1/x3/..." I've also made sure the images are high-res (4790x3172) and sharp. I've zoomed in on my computer (I even have one blown-up/hanging on my wall) and I've even tried re-uploading. I'm not sure what else is going on?

2. I have no had any success in changing the transition speed between each picture - I want to speed it up. I'm using 6 images, displayed for 10 seconds, and it's just a real slow transition between each picture.

Unfortunately my site's not "unveiled" (a lot of work to go!) and with the exception of my images placed in the code, I only have the original non-zoom code copied/pasted from earlier in the forum since I can't get the transition right.

Any help/suggestions would be greatly appreciated!

www.onefortheroadphoto.com

KelleyLife · December 30, 2013

fabthi wrote: »

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

Hi Fabio - Haven't been on this site for in a few months and just saw your comment. I got everything to work correctly (don't remember off the top of my head what I did). The only issues I have are related to those persons running older versions of IE. But when I view using newer versions of IE, Chrome, etc. and looking at various screen sizes from 9" to 27", everything looks great.

Liz

wingnut225 · March 2, 2014

Suddenly, only half my slide show works
Hello,
I've been successfully using this code for my full screen SS for many months now. But now, all of a sudden only the second half of the images will play on the SS. I am using the latest version of Google Chrome ver. 33.0.1750.117 m. Ironically, the SS works perfectly fine on my iPad and Internet Explorer on the pc.

Any suggestions?

Thanks,
Chuck
www.chuckrobinsonphoto.com

Redrockbaloo · March 20, 2014

Full screen Slide Show issue only with latest Chrome
The full screen slide show has been working perfectly for months. Now suddenly I'm having the same issue as mentioned by wingnut25 and only with the latest Chrome. Works well on latest IE11 and Firefox 28 -

Any ideas for a solution???

Thanks,
Andre

www.andrespatz.com

wingnut225 wrote: »

Hello,
I've been successfully using this code for my full screen SS for many months now. But now, all of a sudden only the second half of the images will play on the SS. I am using the latest version of Google Chrome ver. 33.0.1750.117 m. Ironically, the SS works perfectly fine on my iPad and Internet Explorer on the pc.

Any suggestions?

Thanks,
Chuck
www.chuckrobinsonphoto.com

mgitelis · July 20, 2014

hello,
My Homepage Fullscreen Slideshow worjked fine. Today, I tried to add another picture to the slideshow and suddenly i got black background with no pics.
Foolishly, i didn't backup the original code, so i copied and pasted the code that is located at the first Thread with the necessary adjustments (changing the location of the pictures).
Now. all i get is the first picture in the center (not full screen) and the slideshow is not working.
I'll appriciate any kind of help

Thank you

My site URL: www.mgitelis.com

HTML:
<ul class="cb-slideshow">
<li>
Image 01
</li>
<li>
Image 02
</li>
<li>
Image 03
</li>
<li>
Image 04
</li>
<li>
Image 05
</li>
<li>
Image 06
</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.mgitelis.com/photos/i-Bck65dD/0/X3/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 fullscreen slideshow for all other browsers

*/
.sm-page-powered-by {
position: absolute;
bottom: 0;
}

.cb-slideshow, .cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -99999;
}

.cb-slideshow:after {
content: '';
background: transparent url(http://www.mgitelis.com/photos/i-zbcHL24/0/X3/i-zbcHL24-X3.jpg) no-repeat center center;
}

.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}

.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}

.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
color: rgba(169, 3, 41, 0.8);
}

.cb-slideshow li:nth-child(1) span {
background-image: url(http://www.mgitelis.com/photos/i-zbcHL24/0/X3/i-zbcHL24-X3.jpg);
}

.cb-slideshow li:nth-child(2) span {
background-image: url(http://www.mgitelis.com/photos/i-zbcHL24/0/X3/i-zbcHL24-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.mgitelis.com/photos/i-Bck65dD/0/X3/i-Bck65dD-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.mgitelis.com/photos/i-fzJPSV3/0/X3/i-fzJPSV3-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.mgitelis.com/photos/i-S5fZKnX/0/X3/i-S5fZKnX-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.mgitelis.com/photos/i-qQx6KDL/0/X3/i-qQx6KDL-X3.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}

.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}

.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}

.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}

.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}

.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}

@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}

8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}

17% {
opacity: 1;
-webkit-transform: scale(1.1);
}

25% {
opacity: 0;
-webkit-transform: scale(1.1);
}

100% {
opacity: 0;
}

}

@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}

8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}

17% {
opacity: 1;
-moz-transform: scale(1.1);
}

25% {
opacity: 0;
-moz-transform: scale(1.1);
}

100% {
opacity: 0;
}

}

@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}

8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}

17% {
opacity: 1;
-o-transform: scale(1.1);
}

25% {
opacity: 0;
-o-transform: scale(1.1);
}

100% {
opacity: 0;
}

}

@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}

8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}

17% {
opacity: 1;
-ms-transform: scale(1.1);
}

25% {
opacity: 0;
-ms-transform: scale(1.1);
}

100% {
opacity: 0;
}

}

@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}

8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}

17% {
opacity: 1;
transform: scale(1.1);
}

25% {
opacity: 0;
transform: scale(1.1);
}

100% {
opacity: 0;
}

}

@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}

8% {
opacity: 1;
-webkit-transform: translateY(0px);
}

17% {
opacity: 1;
-webkit-transform: scale(1);
}

19% {
opacity: 0;
}

25% {
opacity: 0;
-webkit-transform: scale(10);
}

100% {
opacity: 0;
}

}

@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}

8% {
opacity: 1;
-moz-transform: translateY(0px);
}

17% {
opacity: 1;
-moz-transform: scale(1);
}

19% {
opacity: 0;
}

25% {
opacity: 0;
-moz-transform: scale(10);
}

100% {
opacity: 0;
}

}

@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(200px);
}

8% {
opacity: 1;
-o-transform: translateY(0px);
}

17% {
opacity: 1;
-o-transform: scale(1);
}

19% {
opacity: 0;
}

25% {
opacity: 0;
-o-transform: scale(10);
}

100% {
opacity: 0;
}

}

@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(200px);
}

8% {
opacity: 1;
-ms-transform: translateY(0px);
}

17% {
opacity: 1;
-ms-transform: scale(1);
}

19% {
opacity: 0;
}

25% {
opacity: 0;
-webkit-transform: scale(10);
}

100% {
opacity: 0;
}

}

@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(200px);
}

8% {
opacity: 1;
transform: translateY(0px);
}

17% {
opacity: 1;
transform: scale(1);
}

19% {
opacity: 0;
}

25% {
opacity: 0;
transform: scale(10);
}

100% {
opacity: 0;
}

}

.no-cssanimations .cb-slideshow li span {
opacity: 1;
}

@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 {
font-size: 100px;
}

}

@media screen and (max-width: 600px) {
.cb-slideshow li div h3 {
font-size: 50px;
}

}

leftquark · July 20, 2014

mgitelis wrote: »

hello,
My Homepage Fullscreen Slideshow worjked fine. Today, I tried to add another picture to the slideshow and suddenly i got black background with no pics.
Foolishly, i didn't backup the original code, so i copied and pasted the code that is located at the first Thread with the necessary adjustments (changing the location of the pictures).
Now. all i get is the first picture in the center (not full screen) and the slideshow is not working.
I'll appriciate any kind of help

Thank you

No need to use this anymore. This functionality is now built into SmugMug without having to use this cludge of CSS code. Use the background slideshow that SmugMug added.
http://help.smugmug.com/customer/portal/articles/1367940-how-do-i-change-my-site-s-background-
and
http://www.dgrin.com/showthread.php?t=243821

mgitelis · July 20, 2014

leftquark wrote: »

No need to use this anymore. This functionality is now built into SmugMug without having to use this cludge of CSS code. Use the background slideshow that SmugMug added.
http://help.smugmug.com/customer/portal/articles/1367940-how-do-i-change-my-site-s-background-
and
http://www.dgrin.com/showthread.php?t=243821

Thank you very much!
It's work great.
Just one thing, some of the pictures on the slideshow are cut and i have a scroll bar
Is there any way to get rid of that?

www.mgitelis.com

thanks again

moshi

leftquark · July 20, 2014

mgitelis wrote: »

Thank you very much!
It's work great.
Just one thing, some of the pictures on the slideshow are cut and i have a scroll bar
Is there any way to get rid of that?

www.mgitelis.com

Works fine when I go to your site in Chrome for Mac. None of them are cut and there is no scroll-bar.

mgitelis · July 20, 2014

leftquark wrote: »

Works fine when I go to your site in Chrome for Mac. None of them are cut and there is no scroll-bar.

Hi,

Thanks for the quick response.
I've checked the site on firefox and IE10 on a dell 27" screen and on firefox, IE and chrome on a Dell 14" Laptop and the pictures are still cut, you can easily see it on the last picture.

Thank you

Moshi

thenickdude · July 20, 2014

The photos in the background slideshow are scaled up until they fill the monitor. This means that if they're not exactly the same aspect ratio as your screen, they must be cropped somewhat to make them the same shape as the screen (otherwise a background colour would have to be used to fill in the gaps instead).

Donlivix · June 16, 2015

electrolyte wrote: »

Sure, will be happy to let you know what code I used and how I added it to my homepage.

Likely I'm a bit out of topic, but may I ask you how did you customize your cookie bar?

[img]https://dl.dropboxusercontent.com/u/439899/banner4.png[/img) I tried to add a HTML block but t doesn't superimpose the theme cookie bar, so I got two bars and on the other hand I cannot add any piece of HTML code into the layout theme Thanks a lot Valerio[/img]

Working Fullscreen Slideshow... Almost

Comments