Almost done with gallery, little more help needed

mbridge87 · March 24, 2014

Hello everyone,

I've returned to a gallery style that "LeftQuark" (among others) helped me out with a while back but I'm having trouble with the alignment of the thumbnails below the main image.

This is the page on my site:

http://www.maxbridge.co.uk/Website-Assets/Website-Images/Galleries/Location/

And this is the code that I'm currently using:

/* ================================================
= 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: 0px !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: 100px !important;
}

/* Remove owner buy + captions */
.sm-user-ui .sm-gallery-smugmug .sm-tile-info, .sm-button-skin-accent {
display: none;
}

As you'll see from the site the thumbnails, their navigation arrows and the thumbnails page icons are not aligned correctly and nothing I do will fix the problem.

Please help

vdotmatrix · March 24, 2014

Nice design!

Hey I am having the same issue.....

mbridge87 · March 24, 2014

Just in case anybody else decides to use this code I was having trouble with it so make sure you remove this part ".sm-button-skin-accent". from here:

/* Remove owner buy + captions */
.sm-user-ui .sm-gallery-smugmug .sm-tile-info, .sm-button-skin-accent {
display: none;
}

I replaced it with this which removes a little more of other things (owner buy button and share buttons etc.)

/* Remove owner buy + captions */
.sm-user-ui .sm-gallery-smugmug .sm-tile-info, .sm-button-image-share, .sm-gallery-header {
display: none;
}

If anyone has a solution to the alignment thing I'd really love it if you could let me know. I'm still stumped.

Jingle Images · March 24, 2014

mbridge87 wrote: »

Hello everyone,

I've returned to a gallery style that "LeftQuark" (among others) helped me out with a while back but I'm having trouble with the alignment of the thumbnails below the main image.

This is the page on my site:

http://www.maxbridge.co.uk/Website-Assets/Website-Images/Galleries/Location/

And this is the code that I'm currently using:

/* ================================================
= 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: 0px !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: 100px !important;
}

/* Remove owner buy + captions */
.sm-user-ui .sm-gallery-smugmug .sm-tile-info, .sm-button-skin-accent {
display: none;
}

As you'll see from the site the thumbnails, their navigation arrows and the thumbnails page icons are not aligned correctly and nothing I do will fix the problem.

Please help

This will not Solve it for every viewing screen but can put you in the right direction

.sm-gallery-smugmug .sm-gallery-tiles {
margin-left: auto;
margin-right: auto;
width: 1050px;
}

mbridge87 · March 25, 2014

Hey,

Thanks for that. I did try that before but for some reason I could not get it working, must have done something wrong.

I've made some changes which do work but there's a problem when the browser is made smaller. I had to shift the tiles over by 90px so that they would centrally align. The reason for this is that I believe there is an image missing from the end of the thumbnails, meaning that if you align in the usual way it will never look centered. The problem being that now when viewed on smaller screens it's pushed over 90px and again is not centered...

For some reason the pagination also does not stay centered on smaller screens.

If anyone has any ideas for a solution to this I would be so so grateful.

Here's the code I'm using now.

/* ================================================
= 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: 0px !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 {
min-height: 100px !important;
margin-left: auto;
margin-right: auto;
}

/* shift tiles over to align centrally */
.sm-gallery-smugmug .sm-gallery-tiles {
margin-left: 90px;
margin-right: auto;
}

/* align thumnails pagination centrally */
.sm-gallery-tiles-pagination {
margin-left: auto;
margin-right: auto;
width: 1050px;
}

Jingle Images · March 25, 2014

Maybe try something with auto sizing the thumbnails them self to fit the size of screen.

mbridge87 · March 25, 2014

Hey Jingle,

I've managed to get the thumbnails to align correctly by restricting the width of the box to 86%. The following code was used:

/* shift tiles over to align centrally */
.sm-gallery-smugmug .sm-gallery-tiles {
max-width: 86%;
margin-left: auto;
margin-right: auto;
}

However I now cannot get the pagination to align properly. I've figured out that this is because it's container is now 86% of the page due to the previous code used. However, once again I'm stumped as to how to get this aligned right. I've tried all I can think of but nothings working...really wish I knew more about code!!!

If I specify the width of the pagination to be 1050px (page width) then it will centre but it then does not work on mobile/tablet etc. Solution I thought would be to specify this as 100% width rather than using the px value but this does not work.

Any ideas?

Thanks for the help by the way.

mbridge87 · March 25, 2014

I SOLVED IT!!! Can not explain how happy I am!

If anyone wants a similar looking gallery use the following code:

/* ================================================
= 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: 0px !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 {
min-height: 100px !important;
margin-left: auto;
margin-right: auto;
}

/* shift tiles over to align centrally */
.sm-gallery-smugmug .sm-gallery-tiles {
max-width: 86%;
margin-left: auto;
margin-right: auto;
}

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

/* Remove owner buy + captions */
.sm-user-ui .sm-gallery-smugmug .sm-tile-info, .sm-button-image-share, .sm-gallery-header {
display: none;
}

/* Hide the word "menu" */
.sm-page-widget-5308994 .sm-h5 {
visibility: hidden;
}

/* Change the title "Menu" to "Choose a Gallery" */
.sm-page-widget-5308994 .sm-h5:before {
content: "CHOOSE A GALLERY";
visibility: visible;
margin-left: 30px;
}

Please note you will need to change all of the ID's for your pages.

Credit to everyone who has helped me get this working. Leftquark, Mike, Jingle and anyone else who has commented. Thank you!!

Jingle Images · March 25, 2014

Your welcome. Glad it worked out for you.

Almost done with gallery, little more help needed

Comments