I am trying to clean up/make symmetrical my lightbox gallery. I'm no css wiz, but was trying to fiddle/figure out how to make it work editing the galleria and/or the lightbox css, but to no avail.

Here is the gallery I have working (wonderfully by the way)

http://kenfrankmasonry.com/?q=content/galleries

I'm very happy with the lightbox functionality as well as the galleria, but would love have the thumbnails center, whether there is 4 or 8, etc.

Any help would be much appreciated!

Comments

Mark Theunissen’s picture

Mark Theunissen commented

Good question, you can probably start with:

margin-left:auto;
margin-right:auto;
width:50%;

On the ul element.

The problem is that you have to specify a width, and this probably won't work on IE. I took a quick look online for how to center a bunch of floating divs but it doesn't look like there's one elegant solution. I'm not a CSS wizard either, my bag of tricks is limited to fixing and diagnosing the most common compatibility problems.

apresskibrewer’s picture

apresskibrewer commented

Hey Mark,

thanks for the rapid reply! Really amazing support for this module...

Anyway, maybe I'm showing my true colors here, but where is the best place to slap in this code?

eromba’s picture

eromba commented
Title: Centering Thumbnail block while in lightbox. » How to center Galleria thumbnails

@apresskibrewer: To use what Mark suggested, put the following at the end of your theme's stylesheet, adjusting the width value as necessary:

ul.galleria {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

This code should work regardless of whether Galleria is embedded in the page or in a lightbox.

In my tests, this styling displays correctly in IE7, IE8, and Firefox 3.5 B4.

I hope this helps!

apresskibrewer’s picture

apresskibrewer commented

Helps immensely. Looks like its time for me to pick up a CSS resource if I'm going to continue to play with this stuff.

You guys have been great, awesome support. Thanks mark, and prof1337.

apresskibrewer’s picture

apresskibrewer commented

Have you guys tried this with galleria that has more than a few images? As I continued to add to my galleria, it prematurely started a new row of thumbnails with this function. When left aligned, it will allow 8, but when using the centering style code, it only allows 3 (maybe 4 or 5 depending on the thumb dimensions/margins input)

It's not a huge deal, I'm just trying to avoid a scroll bar/ keep as much info to the north of the page as possible. Is there any way to manually set at what overflow number the galleria would begin to render the second row?

again, the gallery i'm speaking of is at http://www.kenfrankmasonry.com/?q=content/galleries

If your curious.

Thanks a ton again.. btw, off topic, is there a donate button or something, somewhere?

eromba’s picture

eromba commented

There's no way to control exactly what number of thumbnails will display in a given row, but changing the width of the unordered list will effectively do the same thing.

To change this width, use the same styling from #3, but replace "50%" with another value. Since the thumbnails on your site's Galleria are each 70 pixels wide with a 5 pixel right-margin, you can simply set the unordered list's width to multiples of 75 pixels (ie. "75px" for one image per row, "150px" for two images, etc.). I've tested this in Firefox via Firebug and it seems to work quite well.

apresskibrewer’s picture

apresskibrewer commented

I was on the right track... thank you! Seems to work beautifully.

Mark Theunissen’s picture

Mark Theunissen commented
Status: Active » Closed (fixed)

Great news! If you really want to donate, feel free to pop a tip into the Drupal Association's jar:

http://association.drupal.org/civicrm/contribute/transact?reset=1&id=8

glennnz’s picture

glennnz commented
Status: Closed (fixed) » Active

Hiya

#3 works a treat for a fixed number of thumbnails. What about a varying number?

I have my main image centred fine, now I want the thumbnails to be centered underneath, no matter how many there are, and expand sideways until there is no width left, and only then drop to a new line.

Cheers

Glenn

Anonymous’s picture

Anonymous (not verified) commented

I had similar problems because I had 2 gallerias - one with small images and one with large.
What I did was add some jquery script in the node to dynamically add a class to the galleria

<script type="text/javascript">
 //auto set gallery width
$(document).ready(function(){
 $('#galleria-content').addClass('gallery-600');  // or gallery-300 for smaller images
});
</script>

then created the css 

.gallery-600 {width: 600px;}

which fits all the thumbnails under it.

That seems to work. Any other suggestions?

bennash’s picture

bennash commented

At some point the module's output html changed. The following updates the above code from #3

.galleria-thumbnails {
margin-left: auto;
margin-right: auto;
width: 50%;
}