Swap the Image and Thumbnails in SM Layout

leftquark

One of the CSS customization requests that I received was to swap the position of the Main Image and the Thumbnails in the SmugMug gallery layout. It was requested to have the image on the left and the thumbnails on the right.

Several months ago I wrote a CSS customization to implement this. It broke several weeks ago when SmugMug updated their CSS grid software to FlexBox. Thanks to wonderful SmugMug technical support I was put in touch with their lead developer who gave me just the hint I needed to solve the problem.

For those of you using my CSS Customization for this, please update to the latest version. Code is on my Customizations page:
http://www.aaronmphotography.com/Customizations/Gallery/SM-Layout/Swap-Photo-Thumbnails-SM

/* ================================================
   = SWAP IMAGE AND THUMBNAILS IN SMUGMUG LAYOUT  =
   ================================================ */
/* In SmugMug Layout, swap the thumbnails and the image.
    The image moves to the left and the thumbnails on the right.
    This section of code works for all browsers except FireFox. */
.sm-gallery-smugmug .sm-gallery-images.yui3-g {
  webkit-flex-direction: row !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

/* Move the image to the left. This code is required for FireFox */
.sm-gallery-smugmug .sm-gallery-image-container {
  float: left !important;
}

/* Move the comments section left as well */
.sm-gallery-content .sm-gallery-footer .sm-gallery-comments-container {
  margin-left: 0% !important;
}

/* Move the thumbnails slightly to the right to give some space between image and thumbs */
.yui3-u .sm-gallery-tiles-container .sm-gallery-tilesnav {
  margin-left: 5px !important;
}

/* Move the main image left so it lines up properly with the left side of the area */
.sm-gallery {
  margin-left: 0px !important;
}

/* Move the thumbnails to the right side of the page */
.sm-gallery-tiles-container .sm-gallery-tiles-bar,
.sm-gallery-tiles-container .sm-gallery-tilesnav {
  float: right;
}

/* Move the thumbnail pagination drop-down menu slightly up */
.sm-gallery-smugmug .sm-gallery-tiles-pagination {
  margin-top: -30px;
}

leftquark

If you're already using my code, all you need to addis the following:

.sm-gallery-smugmug .sm-gallery-images.yui3-g  {
  webkit-flex-direction: row !important;
  -ms-flex-direction: row  !important;
  flex-direction: row !important;
}

leftquark

Found an error in the code. I had initially said to replace (remove) a set of code ... turns out that code was making it work in Firefox. The following is needed to work in Firefox:

/* Move the image to the left. This code is required for FireFox */
.sm-gallery-smugmug .sm-gallery-image-container {
  float: left !important;
}

Original post has been updated with the full set of correct code.

HarlanBear

Thanks, Aaron!! The full version new code worked for me FF, IE & Chrome; the addition to existing code did not, for some reason.
But all is good.