1. Home
  2. Customization
  3. Custom edge-2-edge animated slideshow for your SmugMug site

Custom edge-2-edge animated slideshow for your SmugMug site

Intro

Many of you have asked me if there is a way to make the current version of the built-in SmugMug slideshow fill the scene – edge-2-edge.  The answer to this question is unfortunately no – no matter what size your images are – the slideshow will always show some margin – which in many cases works well – but there are moments where you would like your slideshow to fill the whole width of the web browser window { no matter the size of the screen or browser window }.

I have created an easy to use slideshow that you can implement as a header, footer or even the main slideshow on a page/homepage.

This slideshow has a built-in, cool Ken Burns effect { pan and zoom } which will bring more life to your design.

 

You can test-drive this slideshow at the bottom of this page.

 

HTML code

You will need to add a HTML content block to the page, wherever you would like the slideshow to appear.  Then you will need to add this code to it:

As you can see I am going to be using 5 images in my slideshow – you can add more images than 5 just by adding additional lines of the code – like in this example:

This is it!  In the HTML tab of the HTML content block we have done all of the work that is needed.

 

CSS code

Now switch to the CSS tab of your HTML content block and add this code to it:

I know this may look a little overwhelming at first – but trust me – this is easy to implement.  You can leave the whole code as it is and just replace image links with your own images.

CSS NOTES

As you can see I have made notes in the CSS code, where you will need to replace links to your own images.  I do not recommend using images larger than X3Large.

You can also change the height of the slideshow by changing the px value in the code { see my note in the code }.

Each slide is set for 6 seconds so if you add an additional slide to your code – you need to increase the slide duration by 6 second.  As you can see the last .pic-5 is set for the duration of 24s and if you would like to add an additional slide to the slideshow .pic-6 will need to be set for 30s because – 24s + 6s = 30s – the code would then look like this:

 

Updated on March 23, 2017

Was this article helpful?

Related Articles

Comments

  1. you the man it is all awesome!!!.. i’ll be doing this soon.

    Thank you very much

  2. I have the same question as the header photo 😀
    Do you know how to put text, logo and even a menu on the slideshow?
    Thanks man!

  3. Hey Tom, how can I tweak the code for the slideshow to have a full screen height?

  4. This rocks! Thank you very much. Quick question…instead of having a slideshow for 5 images, is there a way to plug in code for a specific gallery instead of individual pics?

      1. THANK you so much for your rapid response. I plugged in the CSS code above, replaced your image with my image URL and for some reason, it will not change the photo. I pulled the URL for the 5 images and replaced the image info you have in the CSS code. All I get is a blank page.

        http://www.kellydykesphotography.com

        I am grabbing the URL for each image but noticed your first image is: https://photos.smugmug.com/photos/i-HBM6qqV/0/X3/i-HBM6qqV-X3.jpg

        My first image URL is: https://www.smugmug.com/gallery/n-kFW42Q/i-ppjx2hf/A

        The difference is in the extension (-XL3.jpg). My images are lacking that info. Could this be the problem I am experiencing? I know it’s DEFINITELY user error on my part.

        I cannot tell you hoe much I appreciate your help.

        1. Kelly, thank you very much for your comment.

          You are grabbing the wrong link to your image. Instead of grabbing the link to an image – you are grabbing a link that will display your image in your gallery { which will not work }.

          So first thing you need to do is to make sure that the gallery, where your image is located is either PUBLIC or UNLISTED { not password protected or private }. In the gallery settings make sure that you TURN OFF the HIDE OWNER feature – you do not need that.

          Then double click on the image that you would like to use for the slideshow → click the SHARE icon that appears below the image → choose the image size that you would like to use { for example X3Large } then copy the image link and use it in the slideshow code.

          Do let me know if that worked for you.

          1. You are a genius! Thank you a million times over for your help. I am checking out your custom codes to add a little character without losing a clean feeling.

  5. One more question…the above info was awesome and I thank you very much. My question is, “Is there a way I can make the slideshow fit for mobile or tablet viewing?” It looks perfect on a lap or desktop but when I view it on my phone, it’s pretty large, the phone has to be turnd into landscape mode and it is still a bit too wide. I even changed the width to 1024px and 960px without seeing a change.

  6. Sorry, I have one more question. “Is there a way I can make the slideshow fit for mobile or tablet viewing?” It looks perfect on a lap or desktop but when I view it on my phone, it’s pretty large?” I’ve been searching your tutorials for HTML or CSS code for seamless mobile viewing(Android or iPhone) but I don’t see to see one.

    1. Kelly you have to make your slideshow 100%. If you keep it on fixed width – it will not scale nicely on smaller screens.

  7. Hi there, thanks for all your work, really cool. I’ve been trying to impliment this as my slideshow on my homepage and I got it to work just fine, but when I view it on my phone the slideshow appears really tall and narrow instead of scaling the images to the width of the phone screen. I have the width set to 100%, and I set my height to 1200px to make it look better on my computer. Is there any way to set the height to 100% or anything else I can do to have it scale to the size of the device I’m viewing on?

    Thanks a ton!

    1. Hey Gage,

      I have just added few lines of code at the bottom that will allow you to modify the behaviour of this slideshow on mobile – ENJOY.

  8. This is fab. thanks. Just tried it on a test site that I’m starting to build. For some reason, it’s not going edge to edge, I’m sure I’m doing something wrong, can you help? Thanks

    1. Hey Nicck,

      You have side margins activated on both sides of your layout. To turn them off you just need to log in to your SmugMug account → click CUSTOMIZE → CONTENT AND DESIGN → on the right side select LAYOUT → set the side margins to 0.

      Best regards

  9. Wow, you are awesome for sharing this with us! Excited to try it out. Thanks!

  10. This is wonderful… thank you. I just tried and it worked. Do you happen to have a tutorial on how you made those lovely text boxes, you know the ones that say “My First Text” and “My Second Header”? with the border around them? I didn’t see it anywhere, but thought I’d ask!

    1. Naomi! Yeah I have been thinking about those text boxes and how to make the easiest way to explain how to create them. I will add the tutorial on how to make them – but it will take a while. It is not easy – because this would require for you to figure out the ID tags of your text and image boxes. But I will add it sooner or later.

      1. Sweet! Thanks! By the way, I figured out how to add text to my “Download Image” button, thanks to your other tutorial for the “Download All” button… I used the same css and found the ID using the “inspect” tool on Chrome. Took a few tries, but I got it. Just sharing incase others want to change that one too… Super fun making these customizations. 🙂

  11. Hi Tom, great work.
    For some reason my slideshow isnt repsonsive to mobile screens, the height does not adjust. I have copied and pasted your code exactly on my site so using your images too just to test. Any ideas ?

  12. Thanks, when I compare my site on mobile to yours, your slideshow seems much smaller, whereas mine takes up nearly full screen height. Is this what you see ?

  13. ok thanks, is that fairly straightforward CSS ? I can try myself if so, if its complicated i wont bother!

    1. Hey Arnold – add this code to the CSS tab of the HTML content block:

      /*Mobile support*/

      @media screen and (max-width: 670px) {
      .pic-wrapper {
      height: 250px !important;
      }
      }

      And let me know if that worked.

  14. If you look at my site now you will see a tall thin looking slideshow – is this correct?

    1. Arnold your slideshow looks fine – not sure what you are seeing. You can adjust the mobile height by editing the px value in the code that I have sent you previously.

Leave a Comment