Filmstrip Gallery Style - Aaron Meyers

Filmstrip

One of the more common ways of displaying photos is to have the photo on top with a filmstrip of photos below for navigation. SmugMug doesn't have this built in but it's pretty easy to replicate. Here's how: Examples: 1) Max Bridge 2) My Site (0. Create a gallery and upload some photos to it.) 1. Click "Customize" -> "Gallery Style" and choose "SmugMug" 2. Click "Customize" -> "Content and Design" 3. On the right side bar under "All Galleries" click "Just this Gallery" so that the filmstrip only applies to this gallery. 4. Under the "Content" tab, find "HTML & CSS" and drag/drop a CSS Content Block into the bottom of your page. 5. Add the following CSS:

/* ================================================
= MOVE THUMBNAILS BELOW PHOTO IN SMUGMUG LAYOUT =
================================================ */
/* Move the thumbnails below the photo
This section of code works for all browsers except FireFox. */
.sm-gallery-smugmug .sm-gallery-images.yui3-g {
  -webkit-flex-direction: column !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

/* Make the photo fit the width of the page so it's larger */
.sm-gallery .sm-gallery-images .sm-gallery-image-container {
  width: 100% !important;
}

/* Make the thumbnails fit the width of the page
Also push it down 20 pixels so it's not so close to the captions.
ALTER THIS TO YOUR LIKING */
.sm-gallery .sm-gallery-images .sm-gallery-tiles-container {
  width: 90% !important;
  margin-top: 0px !important;
  margin-left: auto !important;
  margin-right: auto !Important;
}

/* Make it so the thumbnails don't have a specific height + align centrally
YOU'LL WANT TO ADJUST THIS SO YOU GET THE # OF ROWS OF THUMBS YOU WANT. 
THE BIGGER THE NUMBER THE MORE ROWS YOU GET. */
.sm-gallery-tilesnav {
  float: none !important;
  min-height: 100px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* shift tiles over to align centrally.
YOU WILL WANT TO CUSTOMIZE THE MAX WIDTH TO YOUR LIKING */
.sm-gallery-smugmug .sm-gallery-tiles {
  max-width: 85% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* align thumnails pagination centrally */
.sm-gallery-tiles-bar {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Remove captions */
.sm-user-ui .sm-gallery-smugmug .sm-tile-info {
  display: none;
}

/* Remove share buttons
DELETE THIS SECTION IF YOU WANT TO INCLUDE THE SHARE BUTTON */
.sm-button-image-share {
  display: none;
}

/* Remove buy button
DELETE THIS SECTION IF YOU WANT TO INCLUDE THE BUY BUTTON */
.sm-gallery-header {
  /* display: none; */
}

/* Hide the pagination drop-down box (ex: 1 of 2) */
.sm-gallery-tiles-pagination {
  display: none;
}

/* Make sure comments display right below the thumbnails */
.sm-gallery-footer .sm-gallery-comments {
  padding-top: 0px !important;
}
Code original created by Max Bridge here on DGrin: http://www.dgrin.com/showthread.php?p=1985145#post1985145

Comments

Powered by SmugMug Log In