[Plugin: NextGEN Gallery] Any Way to Center Gallery Thumbs?

  • I hate to refer to myself as a noob with this sort of stuff, but compared to most on here I definitely am. I have searched through all the pages I could find and could not turn up anything that could help me with what I am trying to do. I love NextGEN, but am having difficulty adjusting it to my site due to ignorance on my behalf. Essentially, what I am trying to do is put galleries in all of my reviews using nextgen.

    Now, I’ve tried to adjust the CSS as much as I can, but without being able to use any kind of ‘< center >’ tag that works I’m just stumped on how I can keep a uniform look when people visit the site with different resolutions. I use 8 images for all galleries, and what I want is for them to all sit next to one another uniform. If the images have to break and wrap around on a new line, I would like for the second line to be centered. I’ll post a few shops to show what I have and what I’m *wanting* to do.

    Using this page as an example:
    https://www.variedcelluloid.net/?page_id=127

    At my resolution of 1152×864, the page looks roughly like this

    I would like to have it look something like this.

    Or more preferred, like this. Now, I can produce this effect using simple ‘padding’ properties but when I change resolutions it isn’t going to keep that same two column structure.

    Anyone have any advice? Need me to post my css? Is there anything I can do to produce a similar effect? If so, can you give me any kind of clue so I can google it? Am I looking over some option that is right out in the open? Really just trying to perfect my review pages, and I hope this question isn’t totally idiotic – though I’m sure it is.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter variedcelluloid

    (@variedcelluloid)

    Anybody have any ideas? I’ve pretty much run out of fresh thoughts on the subject, and am looking for help any way I can get it ??

    Thread Starter variedcelluloid

    (@variedcelluloid)

    Still trying and trying. I’m just wrapping my head around the whole float command, and have went over the stylesheet trying to hopefully find anything I can adjust that corresponds with the items within the float command. I’m wanting the thumbnails to center, not the gallery-box itself. I’ve tried ‘margin-left: auto;’ & ‘margin-right: auto;’ on pretty much everything under the “Gallery Style” section to no avail. As well as playing with padding commands, ‘text-align: center;’ and just about anything else I can find to try. I’m starting to wonder if what I’m looking for is outside the stylesheet, and if it is, where and what? Not sure, I’ll just keep trying I suppose.

    Thread Starter variedcelluloid

    (@variedcelluloid)

    I’ll give this one last bump. I’ve split my thumbnail-gallery into two pages for now, hope it’s not going to be my permanent fix but it might have to be.

    I don’t have a clue! I’ve tried about 20 hacks.

    ?: how did you split the thumb gallery? clever-n-nice.

    yeah – how?

    I’ve gone through everything css related

    Can’t figure out – perhaps a js thing?

    Thread Starter variedcelluloid

    (@variedcelluloid)

    Hey guys, yeah sorry about the late reply – but splitting the gallery is pretty simple. It’s under Gallery >> Options >> Gallery. On the “Number of images per page:” box you just select the number of graphics you want on the page at once and it will split them up that way. I usually have 8 images per review, so I split it by 4 and it makes two even pages (well, in some browsers and at some resolutions… argh!).

    Here’s a screencap to show you where the option is exactly:

    https://www.variedcelluloid.net/images/gallery-split.jpg

    It’s working for me as a temporary solution – but like you all I’m hoping for someone who might have a better trick that will solve my problem.

    You cannot center three images if you use float , but you can center a gallery more or less with marging. What do you need for that :

    Firebug : there exist no better tool to test online the result of you css modification

    Here is a example : https://nextgen.boelinger.com/gallery-page/

    If I add for example to .ngg-galleryoverview { margin-left:45px; }, it’s a little bit centered. (Ok, the theme has a fixed width, which makes it easier )

    If you remove from .ngg-galleryoverview width: 100%; and add margin-left:100px; it will show up with two pics in a row

    I’m still a beginner for CSS. so any ideas, tweak or recommendation are always welcome…

    Thread Starter variedcelluloid

    (@variedcelluloid)

    “You cannot center three images if you use float…”

    Hi Alex, sorry to be a pest, but is there any alternative to using float? Would this require delving into the PHP and such? I’m a beginner with much of this, so this may be a stupid question. Like asking a mechanic “So it’ll work if I just put a new engine in it right? How do I do that?” or something.

    I have no other idea

    I had the same problem but I solved it by setting a % value for the ngg-album class. Since I have 3 columns, I set 31% on .ngg-album and adjusted the margins etc so it looks like the thumbs are nicely spaced across the content area. Look here for the example.

    you would actually want to set that value to 33% – 33 x 3 = 99 which is closest to 100%.

    and that works well if your theme is fixed width, but for fluid themes it doesn’t allow automatic adjustments to the user’s preferred format. a slight limitation.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Plugin: NextGEN Gallery] Any Way to Center Gallery Thumbs?’ is closed to new replies.