Move thumbnails to the bottom

mbridge87

Hello,

Another question.

I'd like to move the thumbnails within the Smugmug Gallery to underneath the main image, rather than to one side. I found a thread about moving them to the right but could not figure out how to move them to the bottom.

I'd then like the main image to be a bit bigger, taking up the space left over from where the thumbnails had been.

I hope this makes sense.

Thanks

mbridge87

"bump"

phaserbeam

mbridge87 wrote: »

I'd like to move the thumbnails within the Smugmug Gallery to underneath the main image, rather than to one side. I found a thread about moving them to the right but could not figure out how to move them to the bottom.

I'd then like the main image to be a bit bigger, taking up the space left over from where the thumbnails had been.

Not sure if this is possible. It may be the same problem as requested by users to make the thumbs bigger by default. You can change the position of various items but you can not make elements bigger then provided by smugmug.

Here is some code that would move the thumbs down the preview image, but if even if you play with the values you can not make the preview bigger.

.yui3-u .sm-gallery-image-container,
.yui3-u .sm-gallery-tiles-container {
    width:100%;
}
.yui3-u .sm-gallery-image-container,
.sm-tile-wrapper .sm-tile-photo {
    width:100%;
    height:1000px;
}

leftquark

mbridge87 wrote: »

I'd like to move the thumbnails within the Smugmug Gallery to underneath the main image, rather than to one side. I found a thread about moving them to the right but could not figure out how to move them to the bottom.

I'd then like the main image to be a bit bigger, taking up the space left over from where the thumbnails had been.

This should do the trick for ya. I haven't tested it in Firefox, which might not work.

/* ================================================
   = 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: 100% !important;
  margin-top: 20px !important;
}

/* Make it so the thumbnails align on the left */
.sm-gallery-tiles-container .sm-gallery-tilesnav {
  float: none;
}

/* Make it so the thumbnails don't have a specific height.
    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 {
  min-height: 200px !important;
}

/* Make the photo title and caption fit the width of the page */
.sm-user-ui .sm-gallery-smugmug .sm-tile-info {
  max-width: 100% !important;
}

Looks like this:

mbridge87

You're both legends!

Thanks for the help.

I've not had a chance to try it out but as soon as I do I'll let you know the results.

Thanks

phaserbeam

leftquark wrote: »

This should do the trick for ya. I haven't tested it in Firefox, which might not work.

Interesting that it seem to work in other browsers... but yes, i tried it in Firefox and the preview photo does not get stretched.
This may get fixed with upcoming FF28.

brandofamily

phaserbeam wrote: »

Interesting that it seem to work in other browsers... but yes, i tried it in Firefox and the preview photo does not get stretched.
This may get fixed with upcoming FF28.

I tried the code too using FF. The main image stretched for a few seconds then shrunk back down in size.

mbridge87

Hey everyone,

Thanks so much for helping me with this.

I've tried all of the above and while I did prefer it it's still not what I'd really want. I think perhaps it's the smugmug galleries themselves, I'm just not a hug fan. What I'd really like is the preview above with a scrollable film strip below.

Are there any third party plugins that I can use to make a gallery? Maybe something like "wow slider", I believe this does not work with SmugMug

Thanks

Hikin' Mike

mbridge87 wrote: »

Hey everyone,

Thanks so much for helping me with this.

I've tried all of the above and while I did prefer it it's still not what I'd really want. I think perhaps it's the smugmug galleries themselves, I'm just not a hug fan. What I'd really like is the preview above with a scrollable film strip below.

Are there any third party plugins that I can use to make a gallery? Maybe something like "wow slider", I believe this does not work with SmugMug

Thanks

It was a let-down when the New SM didn't provide a style like that. IMO, the Smugmug style is the ugliest thing ever.

mbridge87

Hey Mike,

Agreed! No matter what I do I can't get the gallery to be something I like.

If anybody does know of a third party gallery designer I could use or has any other tips I'd love to hear them...really feel like I'm hitting a brick wall with my site, if I wasn't skint I'd pay someone to design it for me. Ha Ha.

mbridge87

One thing I'd be happy to do is gallery similar to this one:

http://www.katehopewellsmith.com/galleries/engagement.php

I imagine I will come into the same issue with increasing the size of the main image though.

If anyone has any ideas I'd love to hear them

Thanks

brandofamily

mbridge87 wrote: »

One thing I'd be happy to do is gallery similar to this one:

http://www.katehopewellsmith.com/galleries/engagement.php

I imagine I will come into the same issue with increasing the size of the main image though.

If anyone has any ideas I'd love to hear them

Thanks

That gallery is very buildable. Content blocks and a little CSS and I'm sure you could do it. There is a site, I cannot recall the name right now, that has all kinds of CSS only stuff like that. I thinks it's called CSSPlay.

Lille Ulven

I know this thread is old, but people might still want to implement its code...so

Just as some information as I just experienced some trouble with my navigational arrows after using leftquarks code to get the thumbnails to display below the photos:

In case your navigation errors for the thumbnails now collide with the buttons (info / share / download / ...) you might want to add the following code:

/* make the navigation arrows smaller for one line at bottom design */
.sm-gallery-smugmug .sm-gallery-nav .sm-fonticon {
  heigh: 90px !important;
  line-height: 96px !important;
  margin-top: -60px !important;
}

The trouble I am referring to means that if one of those buttons happens to be placed above one of the thumbnail-moving-buttons you will have to hit very accurate spots to get the button to work instead of the arrow-function.
The code above changes the size of these buttons from height=144px and line-height=144px and changes the margin-top from 81px.

Good luck

Lille Ulven