Fullscreen Image Layout with Nav Buttons

leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
edited September 2, 2014 in SmugMug Customization
I wanted to play around with alternate gallery styles and one thing that intrigued me was having the images as large as possible (full-screen) while also displaying left/right nav buttons. Essentially to have the lightbox but with my site layout still intact and not in a pop-up window.

After some CSS tweaking, here's it in action: http://www.aaronmphotography.com/Customizations/FullBrowse/n-9CFhT/

fullscreen_browse-M.png

It's still a bit crude, has some FireFox issues (the left/right nav buttons don't work -- someone can help me fix this if they want) but it works pretty well and looks nice.

Here's how to install...

1. Start with a gallery set to "SmugMug" layout.
2. Click Customize -> Customize Site to enter the editor.
3. Make sure to click "Just This Gallery" to make these edits applicable to only this gallery.
4. Add the code to load the font for left/right icons (see below).

Add to your Theme's CSS (Advanced Tab). Must be added at the very top of your CSS code: 
/* Add the Raleway font to make thing left/right button */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: 
    local('Raleway Thin'), 
    local('Raleway-Thin'), 
    url(http://fonts.gstatic.com/s/raleway/v8/RJMlAoFXXQEzZoMSUteGWFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),
    url(http://fonts.gstatic.com/s/raleway/v8/RJMlAoFXXQEzZoMSUteGWPY6323mHUZFJMgTvxaG2iE.eot?#iefix) format('embedded-opentype'), 
    url(http://fonts.gstatic.com/s/raleway/v8/RJMlAoFXXQEzZoMSUteGWD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),
    url(http://fonts.gstatic.com/s/raleway/v8/RJMlAoFXXQEzZoMSUteGWCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

5. Add a CSS Content block to the bottom of your page w/the following code: 
/* Remove the title, and comments sections */
.sm-tile-info, .sm-gallery-footer {
  display: none !important;
}

/* Make the photo take up the entire width of the screen.
   This also pushes the thumbnails under the photo */
.sm-gallery-image-container, .sm-tile-photo {
   width: 100% !important;
}

/* Turn off thumbnails */
.sm-gallery-tilesnav, .sm-gallery-tiles-pagination, .sm-gallery-tiles-container {
  display: none !important;
}

/* Move the image bar with Share, Image Pagination, Tools, Info, Download, etc, down a bit */
.sm-gallery-image-bar {
  top: 5px !important;
}

/* Move the left arrow up and customize look/feel */
.sm-fonticon-AngleBracketLeftSlim {
  position: absolute;
  left: 3%;
  top: -600px;
  z-index: 90;
  font-size: 150px !important;
  font-weight: 100!important;
  font-family: 'Raleway', sans-serif !important;
   transform:scale(0.5,1); /* W3C */
  -webkit-transform:scale(0.5,1); /* Safari and Chrome */
  -moz-transform:scale(0.5,1); /* Firefox */
  -ms-transform:scale(0.5,1); /* IE 9 */
  -o-transform:scale(0.5,1); /* Opera */
}

/* Move the right arrow up and customize look/feel*/
.sm-fonticon-AngleBracketRightSlim {
  position: absolute;
  left: 93%; 
  top: -600px;
  z-index: 90;
  font-size: 150px !important;
  font-weight: 100!important;
  font-family: 'Raleway', sans-serif !important;
  transform:scale(0.5,1); /* W3C */
  -webkit-transform:scale(0.5,1); /* Safari and Chrome */
  -moz-transform:scale(0.5,1); /* Firefox */
  -ms-transform:scale(0.5,1); /* IE 9 */
  -o-transform:scale(0.5,1); /* Opera */
}

.sm-fonticon-AngleBracketRightSlim:before {
  content: '>';
  z-index: 90 !important;
}

.sm-fonticon-AngleBracketLeftSlim:before {
  content: '<';
  z-index: 90 !important;
}

/* Fix the positioning based on window size */
@media only screen and (min-width: 1600px) and (max-width: 1699px) {
  .sm-fonticon-AngleBracketRightSlim { top: -475px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -475px !important; }
}

@media only screen and (min-width: 1500px) and (max-width: 1599px) {
  .sm-fonticon-AngleBracketRightSlim { top: -395px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -395px !important; }
}

@media only screen and (min-width: 1400px) and (max-width: 1499px) {
  .sm-fonticon-AngleBracketRightSlim { top: -350px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -350px !important; }
}

@media only screen and (min-width: 1300px) and (max-width: 1399px) {
  .sm-fonticon-AngleBracketRightSlim { top: -300px !important; left: 92% !important; font-size: 145px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -300px !important; font-size: 145px !important; }
}

@media only screen and (min-width: 1200px) and (max-width: 1299px) {
  .sm-fonticon-AngleBracketRightSlim { top: -270px !important; left: 92% !important; font-size: 145px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -270px !important; font-size: 145px !important; }
}

@media only screen and (min-width: 1100px) and (max-width: 1199px) {
  .sm-fonticon-AngleBracketRightSlim { top: -250px !important; left: 92% !important; font-size: 140px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -250px !important; font-size: 140px !important; }
}

@media only screen and (min-width: 1000px) and (max-width: 1099px) {
  .sm-fonticon-AngleBracketRightSlim { top: -230px !important; left: 91% !important; font-size: 135px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -230px !important; font-size: 135px !important; }
}

@media only screen and (min-width: 801px) and (max-width: 999px) {
  .sm-fonticon-AngleBracketRightSlim { top: -220px !important; left: 90% !important; font-size: 130px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -220px !important; font-size: 130px !important; }
}

@media only screen and (min-width: 775px) and (max-width: 800px) {
  .sm-fonticon-AngleBracketRightSlim { top: -230px !important; left: 90% !important; font-size: 125px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -230px !important; font-size: 125px !important; }
}

@media only screen and (min-width: 675px) and (max-width: 774px) {
  .sm-fonticon-AngleBracketRightSlim { top: -215px !important; left: 90% !important; font-size: 125px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -215px !important; font-size: 125px !important; }
}

@media only screen and (min-width: 600px) and (max-width: 674px) {
  .sm-fonticon-AngleBracketRightSlim { top: -195px !important; left: 90% !important; font-size: 125px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -195px !important; font-size: 125px !important; }
}

@media only screen and (min-width: 575px) and (max-width: 599px) {
  .sm-fonticon-AngleBracketRightSlim { top: -210px !important; left: 90% !important; font-size: 115px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -210px !important; font-size: 110px !important; }
}

@media only screen and (min-width: 511px) and (max-width: 574px) {
  .sm-fonticon-AngleBracketRightSlim { top: -220px !important; left: 90% !important; font-size: 110px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -220px !important; font-size: 115px !important; }
}

@media only screen and (min-width: 451px) and (max-width: 510px) {
  .sm-fonticon-AngleBracketRightSlim { top: -240px !important; left: 88% !important; font-size: 100px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -240px !important; font-size: 100px !important; }
}

@media only screen and (min-width: 376px) and (max-width: 450px) {
  .sm-fonticon-AngleBracketRightSlim { top: -250px !important; left: 87% !important; font-size: 95px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -250px !important; font-size: 95px !important; }
}

@media only screen and (min-width: 301px) and (max-width: 375px) {
  .sm-fonticon-AngleBracketRightSlim { top: -290px !important; left: 85% !important; font-size: 90px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -290px !important; font-size: 90px !important; }
}

@media only screen and (max-width: 300px) {
  .sm-fonticon-AngleBracketRightSlim { top: -300px !important; left: 85% !important; font-size: 80px !important; }
  .sm-fonticon-AngleBracketLeftSlim  { top: -300px !important;  font-size: 80px !important; }
}

Keep in mind that the Gallery Security settings must be set to that the photos display very large (say X3 or Original) or they won't fill up the entire screen.
dGrin Afficionado
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,373 moderator
    edited August 27, 2014
    That's very cool!

    --- Denise
    https://www.denisegoldberg.com ... https://denise.smugmug.com

    Musings & ramblings at https://denisegoldberg.blogspot.com
  • phaserbeamphaserbeam Registered Users Posts: 452 Major grins
    edited August 30, 2014
    Looks great...

    for the firefox issue... i applied the following code for testing: 
    .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
  background-color:red;
}
    i can see the position for the left/right pagination. These are still clickable and seem to work. I guess you need to use some CSS to set the position for these areas according to the navigation arrows?

    I don't know that much about css, but position can be changed, just not sure how to use the same position as for < or >: 
    .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
  background-color:red!important;
  position:relative;
  left:-30em;
  top:-20em;
  width:5em;
  height:5em;
}
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
  background-color:red!important;
  position:relative;
  right:-25em;
  top:-20em;
  width:5em;
  height:5em;
}
  • phaserbeamphaserbeam Registered Users Posts: 452 Major grins
    edited August 30, 2014
    OK... i played a bit with your CSS... here are a few changes that i applied for testing and the navigation arrows seem to work, except for portrait style photos, and if i change screen size the right button moves out of the photo... (i'm using a 1680x1050px screen):

    EDIT: Code updated. Seem to work in most parts... here is a test gallery. As said, portrait style photos don't seem to work...

    EDIT2: it might be easier to place the .sm-gallery-image-bar on top of the photo and move the navigation buttons down. This way the buttons would always be visible even for portrait style photos. Would be nice if the image bar would use the same space as the slideshow/buy-headerbuttons. Having the .sm-gallery-image-bar on top of the photo would make it possible to remove all the @media only screen sections...
    /* Remove the title, and comments sections */
.sm-tile-info, .sm-gallery-footer {
  display: none !important;
}

/* Make the photo take up the entire width of the screen.
   This also pushes the thumbnails under the photo */
.sm-gallery-image-container, .sm-tile-photo {
   width: 100% !important;
}

/* Turn off thumbnails */
.sm-gallery-tilesnav, .sm-gallery-tiles-pagination, .sm-gallery-tiles-container {
  display: none !important;
}

/* Move the image bar with Share, Image Pagination, Tools, Info, Download, etc, down a bit */
.sm-gallery-image-bar {
  top: 5px !important;
}

/* Move the left arrow up and customize look/feel */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
  /* removed most code here... */
  left: 2em;
}
/* Move the right arrow up and customize look/feel*/
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
  right: 2em; 
}
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
  position: absolute;
  background-color:rgba(20,20,20,0.0);
  top: -500px;
  z-index: 90;
  font-size: 1em !important;
  font-weight: 100!important;
  font-family: 'Raleway', sans-serif !important;
  transform:scale(1,3); /* W3C */
  -webkit-transform:scale(1,3); /* Safari and Chrome */
  -moz-transform:scale(1,3); /* Firefox */
  -ms-transform:scale(1,3); /* IE 9 */
  -o-transform:scale(1,3); /* Opera */
  width:5em;
  height:2em;
  padding-right:1.3em;
}
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:hover {
  background-color:rgba(50,50,50,0.2);
}

.sm-fonticon-AngleBracketRightSlim:before {
  content: '>';
  z-index: 90 !important;
}
.sm-fonticon-AngleBracketLeftSlim:before {
  content: '<';
  z-index: 90 !important;
}
/* Fix the positioning based on window size */
@media only screen and (min-width: 1600px) and (max-width: 1699px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -475px !important; }
}

@media only screen and (min-width: 1500px) and (max-width: 1599px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -395px !important; }
}

@media only screen and (min-width: 1400px) and (max-width: 1499px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -350px !important; }
}

@media only screen and (min-width: 1300px) and (max-width: 1399px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -400px !important; }
}

@media only screen and (min-width: 1200px) and (max-width: 1299px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -350px !important; }
}

@media only screen and (min-width: 1100px) and (max-width: 1199px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -250px !important; }
}

@media only screen and (min-width: 1000px) and (max-width: 1099px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -230px !important; }
}

@media only screen and (min-width: 801px) and (max-width: 999px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -220px !important; }
}

@media only screen and (min-width: 775px) and (max-width: 800px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -230px !important; }
}

@media only screen and (min-width: 675px) and (max-width: 774px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -215px !important; }
}

@media only screen and (min-width: 600px) and (max-width: 674px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -195px !important; }
}

@media only screen and (min-width: 575px) and (max-width: 599px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -210px !important; }
}

@media only screen and (min-width: 511px) and (max-width: 574px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -220px !important; }
}

@media only screen and (min-width: 451px) and (max-width: 510px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -240px !important; }
}

@media only screen and (min-width: 376px) and (max-width: 450px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -250px !important; }
}

@media only screen and (min-width: 301px) and (max-width: 375px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -290px !important; }
}

@media only screen and (max-width: 300px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { top: -300px !important; }
}

/* fix size for navigation buttons */
@media only screen and (min-width: 501px) and (max-width: 1000px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
  transform:scale(0.75,2.25); /* W3C */
  -webkit-transform:scale(0.75,2.25); /* Safari and Chrome */
  -moz-transform:scale(0.75,2.25); /* Firefox */
  -ms-transform:scale(0.75,2.25); /* IE 9 */
  -o-transform:scale(0.75,2.25); /* Opera */
  }
}
@media only screen and (min-width: 1px) and (max-width: 500px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    transform:scale(0.5,1.5); /* W3C */
    -webkit-transform:scale(0.5,1.5); /* Safari and Chrome */
    -moz-transform:scale(0.5,1.5); /* Firefox */
    -ms-transform:scale(0.5,1.5); /* IE 9 */
    -o-transform:scale(0.5,1.5); /* Opera */
  }
}
  • phaserbeamphaserbeam Registered Users Posts: 452 Major grins
    edited August 31, 2014
    based on your code leftquark i created some CSS to move the image tools on top of the photo, so the navigation arrows left/right will always be visible even for portrait style photos.

    It's not perfect because on changing screen size the site elements will move up and down a bit. I've tested that on a gallery without breadcrumb... might need some work if breadcrumb is enabled.

    All tested with FireFox only!

    Testpage can be found here. Here is the CSS: 
    /* don't expand image container at the bottom */
.sm-page-layout-region.sm-page-layout-region-center {
  min-height:0px!important;
}
/* add some place over the image container for the image tools */
.sm-gallery-image {
  padding-top:3em;
  /* min-height:0px!important; */
  /* position: relative!important; */
  /* top:0em!important; */
}
/* set position for the header tools like slideshow and buy-button */
.sm-gallery-viewport-768,  
.sm-gallery-header {
  margin-top:-3.5em;
}
/* move image bar on top of the photo */
.sm-gallery-image-bar {
  top:1em;
  margin-top:-1em;
  position:absolute!important;
  /* set image bar width=100% -2em for the right arrow button */
  width:calc(100% - 2em)!important;
}

/* Remove the title, and comments sections */
.sm-tile-info, .sm-gallery-footer {
  display: none !important;
}

/* Make the photo take up the entire width of the screen.
   This also pushes the thumbnails under the photo */
.sm-gallery-image-container, .sm-tile-photo {
   width: 100% !important;
}

/* Turn off thumbnails */
.sm-gallery-tilesnav, .sm-gallery-tiles-pagination, .sm-gallery-tiles-container {
  display: none !important;
}

/* Move the left arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
  /* removed most code here... */
  left: 2em;
}
/* Move the right arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
  right: 2em; 
}
/* customize look/feel of left/right arrow*/
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
  position: absolute;
  bottom: -25em;
  z-index: 90;
  font-size: 1em !important;
  font-weight: 100!important;
  font-family: 'Raleway', sans-serif !important;
  transform:scale(2,3); /* W3C */
  -webkit-transform:scale(2,3); /* Safari and Chrome */
  -moz-transform:scale(2,3); /* Firefox */
  -ms-transform:scale(2,3); /* IE 9 */
  -o-transform:scale(2,3); /* Opera */
  width:2em;
  height:2.2em;
  padding-right:0.5em;
  /* if needed, add some background color */
  /* background-color:rgba(20,20,20,0.2);*/
}
/* if needed, add some background color on mouse-over */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:hover {
  background-color:rgba(50,50,50,0.2);
}


/* fix size for navigation buttons */
@media only screen and (min-width: 501px) and (max-width: 1000px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    transform:scale(1.5,2.25); /* W3C */
    -webkit-transform:scale(1.5,2.25); /* Safari and Chrome */
    -moz-transform:scale(1.5,2.25); /* Firefox */
    -ms-transform:scale(1.5,2.25); /* IE 9 */
    -o-transform:scale(1.5,2.25); /* Opera */
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
    left: 1em;
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
    right: 1em; 
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    bottom: -10em;
  }
}
@media only screen and (max-width: 500px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    transform:scale(1,1.5); /* W3C */
    -webkit-transform:scale(1,1.5); /* Safari and Chrome */
    -moz-transform:scale(1,1.5); /* Firefox */
    -ms-transform:scale(1,1.5); /* IE 9 */
    -o-transform:scale(1,1.5); /* Opera */
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
    left: .5em;
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
    right: .5em;
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    bottom: -5em;
  }
}
    I also made some more work on the original code, the left/right arrow look a bit nicer now. Test gallery is still here. 
    /* don't expand image container at the bottom */
.sm-page-layout-region.sm-page-layout-region-center {
  min-height:0px!important;
}

/* Remove the title, and comments sections */
.sm-tile-info, .sm-gallery-footer {
  display: none !important;
}

/* Make the photo take up the entire width of the screen.
   This also pushes the thumbnails under the photo */
.sm-gallery-image-container, .sm-tile-photo {
   width: 100% !important;
}

/* Turn off thumbnails */
.sm-gallery-tilesnav, .sm-gallery-tiles-pagination, .sm-gallery-tiles-container {
  display: none !important;
}

/* Move the image bar with Share, Image Pagination, Tools, Info, Download, etc, down a bit */
.sm-gallery-image-bar {
  top: 5px !important;
}

/* Move the left arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
  /* removed most code here... */
  left: 2em;
}
/* Move the right arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
  right: 2em; 
}
/* customize look/feel of left/right arrow*/
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
  position: absolute;
  top: -500px;
  z-index: 90;
  font-size: 1em !important;
  font-weight: 100!important;
  font-family: 'Raleway', sans-serif !important;
  transform:scale(2,3); /* W3C */
  -webkit-transform:scale(2,3); /* Safari and Chrome */
  -moz-transform:scale(2,3); /* Firefox */
  -ms-transform:scale(2,3); /* IE 9 */
  -o-transform:scale(2,3); /* Opera */
  width:2em;
  height:2.2em;
  padding-right:0.5em;
  /* if needed, add some background color */
  /* background-color:rgba(20,20,20,0.2);*/
}
/* if needed, add some background color on mouse-over */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:hover {
  background-color:rgba(50,50,50,0.2);
}


/* Fix the positioning based on window size */
@media only screen and (min-width: 1600px) and (max-width: 1699px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  {
    top: -475px !important;
  }
}
@media only screen and (min-width: 1500px) and (max-width: 1599px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  {
    top: -395px !important;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1499px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -350px !important; 
  }
}
@media only screen and (min-width: 1300px) and (max-width: 1399px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -400px !important; 
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1299px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -350px !important; 
  }
}
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -250px !important; 
  }
}
@media only screen and (min-width: 1000px) and (max-width: 1099px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -230px !important; 
  }
}
@media only screen and (min-width: 801px) and (max-width: 999px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -220px !important; 
  }
}
@media only screen and (min-width: 775px) and (max-width: 800px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -230px !important; 
  }
}
@media only screen and (min-width: 675px) and (max-width: 774px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -215px !important; 
  }
}
@media only screen and (min-width: 600px) and (max-width: 674px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -195px !important; 
  }
}
@media only screen and (min-width: 575px) and (max-width: 599px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -210px !important; 
  }
}
@media only screen and (min-width: 511px) and (max-width: 574px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -220px !important; 
  }
}
@media only screen and (min-width: 451px) and (max-width: 510px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -240px !important; 
  }
}
@media only screen and (min-width: 376px) and (max-width: 450px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -250px !important; 
  }
}
@media only screen and (min-width: 301px) and (max-width: 375px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -290px !important; 
  }
}
@media only screen and (max-width: 300px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -300px !important; 
  }
}

/* fix size for navigation buttons */
@media only screen and (min-width: 501px) and (max-width: 1000px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    transform:scale(1.5,2.25); /* W3C */
    -webkit-transform:scale(1.5,2.25); /* Safari and Chrome */
    -moz-transform:scale(1.5,2.25); /* Firefox */
    -ms-transform:scale(1.5,2.25); /* IE 9 */
    -o-transform:scale(1.5,2.25); /* Opera */
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
    left: 1em;
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
    right: 1em; 
  }

}
@media only screen and (max-width: 500px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    transform:scale(1,1.5); /* W3C */
    -webkit-transform:scale(1,1.5); /* Safari and Chrome */
    -moz-transform:scale(1,1.5); /* Firefox */
    -ms-transform:scale(1,1.5); /* IE 9 */
    -o-transform:scale(1,1.5); /* Opera */
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
    left: .5em;
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
    right: .5em;
  }
}
    I like the idea of having such a gallery style by default from SmugMug, might be worth a feature request. they should be able to handle the screen resizing stuff much better.
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited September 2, 2014
    phaserbeam wrote: »
    Testpage can be found here.

    Test Gallery went to a 404 page. Is the link right?
    phaserbeam wrote: »
    I like the idea of having such a gallery style by default from SmugMug, might be worth a feature request. they should be able to handle the screen resizing stuff much better.

    I completely agree. I'll bring it up. Who knows what's in the works but I surely hope more gallery styles are!

    Also, quick question: Is the latest version of code the one you pasted second in your last post? It's hard to tell the difference between the 2 code snippets. Sorry for being lazy and not dissecting and figuring it out myself.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • phaserbeamphaserbeam Registered Users Posts: 452 Major grins
    edited September 2, 2014
    leftquark wrote: »
    Test Gallery went to a 404 page. Is the link right?
    I cleaned up my pages after i finalized the work on my new design, i must have deleted those two sample galleries. I just recreated it... sorry.

    leftquark wrote: »
    Also, quick question: Is the latest version of code the one you pasted second in your last post? It's hard to tell the difference between the 2 code snippets. Sorry for being lazy and not dissecting and figuring it out myself.

    Yes, the last code snippet in my previous post is the one i have used in the test gallery here.

    I'll try to explain what i have changed and why...

    The main code change was the replacement of this part from your code: 
    /* Move the left arrow up and customize look/feel */
.sm-fonticon-AngleBracketLeftSlim {
  position: absolute;
  left: 3%;
  top: -600px;
  z-index: 90;
  font-size: 150px !important;
  font-weight: 100!important;
  font-family: 'Raleway', sans-serif !important;
   transform:scale(0.5,1); /* W3C */
  -webkit-transform:scale(0.5,1); /* Safari and Chrome */
  -moz-transform:scale(0.5,1); /* Firefox */
  -ms-transform:scale(0.5,1); /* IE 9 */
  -o-transform:scale(0.5,1); /* Opera */
}
.sm-fonticon-AngleBracketLeftSlim:before {
  content: '<';
  z-index: 90 !important;
}
    This was just moveing the < and > from the pagination section right into the photo without also moving the button itself.
    I replaced it by this code: 
    /* Move the left arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
  /* removed most code here... */
  left: 2em;
}
/* Move the right arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
  right: 2em; 
}
/* customize look/feel of left/right arrow*/
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
  position: absolute;
  top: -500px;
  z-index: 90;
  font-size: 1em !important;
  font-weight: 100!important;
  font-family: 'Raleway', sans-serif !important;
  transform:scale(2,3); /* W3C */
  -webkit-transform:scale(2,3); /* Safari and Chrome */
  -moz-transform:scale(2,3); /* Firefox */
  -ms-transform:scale(2,3); /* IE 9 */
  -o-transform:scale(2,3); /* Opera */
  width:2em;
  height:2.2em;
  padding-right:0.5em;
  /* if needed, add some background color */
  /* background-color:rgba(20,20,20,0.2);*/
}
/* if needed, add some background color on mouse-over */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:hover {
  background-color:rgba(50,50,50,0.2);
}
    This code also does not need to add an extra ">" or "<" and in my opinion the navigation arrows do look much nicer.

    I also changed the positioning in the media section. I do only change the y-axis of the arrows here, the x-axis is handled by this code: 
    /* Move the left arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
  /* removed most code here... */
  left: 2em;
}
/* Move the right arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
  right: 2em; 
}
    I'm using the :first-child and :last-child for direct access to the navigation arrows, maybe there is some better way to do that.

    The resizing on smaller screensizes is now an extra part in my code so it's easier to handle. For smaller arrows i also have to change the position on the x-axis. Sample: 
    /* fix size for navigation buttons */
@media only screen and (min-width: 501px) and (max-width: 1000px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    transform:scale(1.5,2.25); /* W3C */
    -webkit-transform:scale(1.5,2.25); /* Safari and Chrome */
    -moz-transform:scale(1.5,2.25); /* Firefox */
    -ms-transform:scale(1.5,2.25); /* IE 9 */
    -o-transform:scale(1.5,2.25); /* Opera */
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
    left: 1em;
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
    right: 1em; 
  }
}
    As you can see, i made some changes in many places, most of this was a result of try-and-error (as mentioned earlier, i'm not that good at css). The sample gallery seem to work.

    Just for the record, here is the complete code: 
    [B][COLOR="Red"]/*          version#1 - image bar on bottom of the photo    */
/*          move pagination icons up                                */[/COLOR][/B]
/* don't expand image container at the bottom */
.sm-page-layout-region.sm-page-layout-region-center {
  min-height:0px!important;
}

/* Remove the title, and comments sections */
.sm-tile-info, .sm-gallery-footer {
  display: none !important;
}

/* Make the photo take up the entire width of the screen.
   This also pushes the thumbnails under the photo */
.sm-gallery-image-container, .sm-tile-photo {
   width: 100% !important;
}

/* Turn off thumbnails */
.sm-gallery-tilesnav, .sm-gallery-tiles-pagination, .sm-gallery-tiles-container {
  display: none !important;
}

/* Move the image bar with Share, Image Pagination, Tools, Info, Download, etc, down a bit */
.sm-gallery-image-bar {
  top: 5px !important;
}

/* Move the left arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
  /* removed most code here... */
  left: 2em;
}
/* Move the right arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
  right: 2em; 
}
/* customize look/feel of left/right arrow*/
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
  position: absolute;
  top: -500px;
  z-index: 90;
  font-size: 1em !important;
  font-weight: 100!important;
  font-family: 'Raleway', sans-serif !important;
  transform:scale(2,3); /* W3C */
  -webkit-transform:scale(2,3); /* Safari and Chrome */
  -moz-transform:scale(2,3); /* Firefox */
  -ms-transform:scale(2,3); /* IE 9 */
  -o-transform:scale(2,3); /* Opera */
  width:2em;
  height:2.2em;
  padding-right:0.5em;
  /* if needed, add some background color */
  /* background-color:rgba(20,20,20,0.2);*/
}
/* if needed, add some background color on mouse-over */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:hover {
  background-color:rgba(50,50,50,0.2);
}


/* Fix the positioning based on window size */
@media only screen and (min-width: 1600px) and (max-width: 1699px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  {
    top: -475px !important;
  }
}
@media only screen and (min-width: 1500px) and (max-width: 1599px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  {
    top: -395px !important;
  }
}
@media only screen and (min-width: 1400px) and (max-width: 1499px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -350px !important; 
  }
}
@media only screen and (min-width: 1300px) and (max-width: 1399px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -400px !important; 
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1299px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -350px !important; 
  }
}
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -250px !important; 
  }
}
@media only screen and (min-width: 1000px) and (max-width: 1099px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -230px !important; 
  }
}
@media only screen and (min-width: 801px) and (max-width: 999px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -220px !important; 
  }
}
@media only screen and (min-width: 775px) and (max-width: 800px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -230px !important; 
  }
}
@media only screen and (min-width: 675px) and (max-width: 774px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -215px !important; 
  }
}
@media only screen and (min-width: 600px) and (max-width: 674px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -195px !important; 
  }
}
@media only screen and (min-width: 575px) and (max-width: 599px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -210px !important; 
  }
}
@media only screen and (min-width: 511px) and (max-width: 574px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -220px !important; 
  }
}
@media only screen and (min-width: 451px) and (max-width: 510px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -240px !important; 
  }
}
@media only screen and (min-width: 376px) and (max-width: 450px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -250px !important; 
  }
}
@media only screen and (min-width: 301px) and (max-width: 375px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -290px !important; 
  }
}
@media only screen and (max-width: 300px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome  { 
    top: -300px !important; 
  }
}

/* fix size for navigation buttons */
@media only screen and (min-width: 501px) and (max-width: 1000px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    transform:scale(1.5,2.25); /* W3C */
    -webkit-transform:scale(1.5,2.25); /* Safari and Chrome */
    -moz-transform:scale(1.5,2.25); /* Firefox */
    -ms-transform:scale(1.5,2.25); /* IE 9 */
    -o-transform:scale(1.5,2.25); /* Opera */
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
    left: 1em;
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
    right: 1em; 
  }

}
@media only screen and (max-width: 500px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    transform:scale(1,1.5); /* W3C */
    -webkit-transform:scale(1,1.5); /* Safari and Chrome */
    -moz-transform:scale(1,1.5); /* Firefox */
    -ms-transform:scale(1,1.5); /* IE 9 */
    -o-transform:scale(1,1.5); /* Opera */
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
    left: .5em;
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
    right: .5em;
  }
}
    The major problem on this code is that it will not really work for portrait style photos, the navigation arrows will be moved up "xxx pixels" from the image bar on bottom of the photo. If the photo is landscape that will work, on portrait style photos the navigation arrows might be out of screen and the visitor must scroll down a bit.
    That's why i tried to move the image bar with the pagination arrows on top of the photo. This way you can move the both arrows "xxx pixels" down. This way both navigation arrows would always be on the same position on the y-axis and thus always visible. Did work for some parts but was not that perfect, feel free to improve it. Here's my latest code, test gallery is here: 
    [COLOR="Red"][B]/*          version#2 - image bar on top of the photo        */
/*          move pagination icons down/portrait style fix?   */[/B][/COLOR]
/* don't expand image container at the bottom */
.sm-page-layout-region.sm-page-layout-region-center {
  min-height:0px!important;
}
/* add some place over the image container for the image tools */
.sm-gallery-image {
  padding-top:2em;
}
/* set position for the header tools like slideshow and buy-button */
.sm-gallery-viewport-768,  
.sm-gallery-header {
  margin-top:0em;
}
/* move image bar on top of the photo */
.sm-gallery-image-bar {
  top:3em;
  margin-top:-1em;
  position:absolute!important;
  /* set image bar width=100% -2em for the right arrow button */
  width:calc(100% - 4em)!important;
}

/* Remove the title, and comments sections */
.sm-tile-info, .sm-gallery-footer {
  display: none !important;
}

/* Make the photo take up the entire width of the screen.
   This also pushes the thumbnails under the photo */
.sm-gallery-image-container, .sm-tile-photo {
   width: 100% !important;
}

/* Turn off thumbnails */
.sm-gallery-tilesnav, .sm-gallery-tiles-pagination, .sm-gallery-tiles-container {
  display: none !important;
}

/* Move the left arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
  /* removed most code here... */
  left: 2em;
}
/* Move the right arrow up */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
  right: 2em; 
}
/* customize look/feel of left/right arrow*/
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
  position: absolute;
  bottom: -25em;
  z-index: 90;
  font-size: 1em !important;
  font-weight: 100!important;
  font-family: 'Raleway', sans-serif !important;
  transform:scale(2,3); /* W3C */
  -webkit-transform:scale(2,3); /* Safari and Chrome */
  -moz-transform:scale(2,3); /* Firefox */
  -ms-transform:scale(2,3); /* IE 9 */
  -o-transform:scale(2,3); /* Opera */
  width:2em;
  height:2.2em;
  padding-right:0.5em;
  /* if needed, add some background color */
  /* background-color:rgba(20,20,20,0.2);*/
}
/* if needed, add some background color on mouse-over */
.sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:hover {
  background-color:rgba(50,50,50,0.2);
}


/* fix size for navigation buttons */
@media only screen and (min-width: 501px) and (max-width: 1000px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    transform:scale(1.5,2.25); /* W3C */
    -webkit-transform:scale(1.5,2.25); /* Safari and Chrome */
    -moz-transform:scale(1.5,2.25); /* Firefox */
    -ms-transform:scale(1.5,2.25); /* IE 9 */
    -o-transform:scale(1.5,2.25); /* Opera */
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
    left: 1em;
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
    right: 1em; 
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    bottom: -10em;
  }
}
@media only screen and (max-width: 500px) {
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    transform:scale(1,1.5); /* W3C */
    -webkit-transform:scale(1,1.5); /* Safari and Chrome */
    -moz-transform:scale(1,1.5); /* Firefox */
    -ms-transform:scale(1,1.5); /* IE 9 */
    -o-transform:scale(1,1.5); /* Opera */
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:first-child {
    left: .5em;
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome:last-child {
    right: .5em;
  }
  .sm-gallery-image-pagination .sm-button.sm-button-size-small.sm-button-skin-default.sm-button-nochrome {
    bottom: -5em;
  }
}
Sign In or Register to comment.