Display Gallery as a Filmstrip

leftquark

I received a request today to see if it was possible to display galleries as a Filmstrip. I'm sure some of the folks on here (aka Lamah) might be able to tweak this to work much cleaner and nicer but for a quick "hack", here's how you can turn your galleries into a Filmstrip.

Sample Gallery showing the Filmstrip:
Vertical layout (left navbar): http://www.aaronmphotography.com/Customizations/Filmstrip/
Horizontal layout (top navar): http://leftquark.smugmug.com/2014/Filmstrip-Sample/n-bv6dq/




Steps:

1. Set your gallery to "Thumbnails" view by clicking "Customize" -> "Gallery Settings" -> "Appearance" --> Gallery Style" to "Thumbnails
2. Set the gallery customizations to be "Just This Gallery" by clicking "Customize" -> "Customize Site" -> and clicking "Make this Gallery Custom" in the sidebar under "All Galleries"
3. Edit the thumbnail options by hovering over the Thumbnails and clicking the green wrench icon in the upper left corer
4. Select "Thumbnails"
5. Set "Spacing Between Photos" to "None"
6. Set "Photo Size" to "Large"
7. Leave "Photo Aspect Ratio" at "1:1"
8. Turn "Info Style" to "Off"
9. Click "Done"
10. Add a "CSS" Content block by dragging it anywhere onto your page from the sidebar, under the "HTML & CSS" tab
11. Paste in the code below
12. Customize the code to fit your photos
13. Click "Done" in the upper right
14. Click "Publish Now"

Here's the CSS code to add. Customize the code in red to fit your photos.
[Note: Every time you add a photo to the gallery you will have to re-customize this]

/* Make the thumbnail photos into 1 row of photos
   You will need to adjust the width to match the # of photos in your gallery 
*/ 
.sm-tiles-list {
  width: [COLOR="red"]8300px[/COLOR] !important; /* CUSTOMIZE THIS */
}

Add a scroll-bar underneath the images:

/* Add a scroll-bar under the photos */
.sm-gallery-images .sm-gallery-tiles-container .sm-tiles-grid {
  overflow-x: scroll;
}

To customize the look of the scroll-bar, FOR CHROME/SAFARI ONLY:
(Change the colors to fit your needs)

/* Start with the SCROLLBAR itself */
.sm-gallery-images .sm-gallery-tiles-container .sm-tiles-grid::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

/* Customize the HANDLE (the part you slide) */
.sm-gallery-images .sm-gallery-tiles-container .sm-tiles-grid::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px !important;
  border-radius: 10px !important;
  background: rgba(240,148,13,1.0) !important;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important;
}

 
/* Customize the TRACK */
.sm-gallery-images .sm-gallery-tiles-container .sm-tiles-grid::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important; 
  -webkit-border-radius: 10px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.09) !important;
}
 
/* Make the opacity of the scroll-bar slightly more transparent when the window is not active */
.sm-gallery-images .sm-gallery-tiles-container .sm-tiles-grid::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(240,148,13,0.7) !important; 
}

If you use the horizontal layout (with the menu on the top) and you want to PIN the menu so it never moves, even as the user scrolls left/right add the following.
If you don't do this, then as you scroll to the right, your menu on the top will disappear as it is scrolled off the page.

/* When you are the owner, fix the SmugMug admin bar to the top of the page, even when you scroll */
.sm-user-owner .sm-page-header {
  position: fixed;
  width: 100% !important;
  top: 0;
  z-index:2;
}

/* When you are the owner, hide the status bar since I don't want to deal with positioning this properly. 
    I'll need to fix this code eventually */
.sm-user-owner .sm-node-status {
  display: none !important;
}

/* When you're the owner SmugMug's code to pin the top works differently, since the SmugMug admin bar displays first.
    So we need to force it to be fixed on the page and give it some position; */
.sm-user-owner .sm-page-layout-region-header {
  position: fixed;
  width: 100% !important;;
  top: 50px !important;
  z-index: 2;
}

/* When you're the owner, we now need to drop the body of the page down since fixing the panels to the top muck with the height of the page */
.sm-user-owner .sm-page-layout-region-body {
  top:[COLOR="Red"]65px;[/COLOR] /* CUSTOMIZE THIS */
}

/* Force the header to be pinned */
.sm-page-layout-region-header {
  position: fixed;
  width: 100% !important;
  z-index: 2;
}

/* Now that we pinned the header, drop the body of the page.
    NOTE: You will need to customize the value in TOP to fit your site */
.sm-page-layout-region-body {
  top:[COLOR="Red"]35px;[/COLOR] /* CUSTOMIZE THIS */
}

Other Notes:

• Your images must be large enough that they work in the "Large" size. Also, they must be large enough so that they'll crop to 1:1 without having to be displayed with black bars on the sides. If I changed my image size to "Large x2" some of my photos had to have black bars on the sides and it looked ugly. I'll have to fix this later on.
• You must update the WIDTH code (in red) every time you add a photo to the gallery.
• Since you are choosing to display the photos in LARGE size, SmugMug will not resize them if the window gets too small. I did, however, test the code on the iPhone5 and an iPad and it works just fine.

Features I Plan on Adding

• Auto re-size based on # photos ... so you don't have to recustomize the code every time
• Add a scroll bar or left/right arrows so the user knows to scroll

Updates:

• 2014-04-18 8:05am: Fix for pinning the header when you are the admin
• 2014-04-18 9:27am: Fix for forcing the header (top menu) to be pinned when not logged in
• 2014-04-21 11:52am: Added Customizing the look of the scroll-bar
• 2014-04-21 12:58am: Fix to make vertical layouts look much nicer by using scrollbar beneath photos instead of expanding the entire width of the page

mbonocore

Awesome Aaron!!!

David_S85

Aaron, great start on what looks like could be a popular customization choice. When I resize my browser, the photos don't resize to fit - something that would be a must on different devices. I'd like to see a "Lamah update" to this before I consider that for my site.

leftquark

David_S85 wrote: »

When I resize my browser, the photos don't resize to fit - something that would be a must on different devices.

I'm with yah on this ... it has to do with the fact that we force the thumbnails to be size "Large". It looks like SmugMug doesn't do the auto-sizing when you customize the Thumbnail display size. Perhaps that a Bug? I'll have to toss it on over to their Heroes and see what they say.

leftquark

mbonocore wrote: »

Awesome Aaron!!!

Try the code I added. Turns out SM does some things differently when you're logged in because of the admin bar at the top. Only works if you scroll down a bit, so I have to force it to pin those sections. A bit of a hack but it works.

leftquark

2014-04-21 11:52am: Added Customizing the look of the scroll-bar

leftquark

2014-04-21 12:58am: Fix to make vertical layouts look much nicer by using scrollbar beneath photos instead of expanding the entire width of the page

David_S85

Love the custom scrollbar.

David_S85

Any further updates with this customization lately?

leftquark

Haven't played around with it because I hadn't seen anyone request anything different. Lemme know if things need tweaking!