Topic: Gallery layout questions (embedded in WordPress)

So I am using Wordpress for my site, and have embedded the code in the page.

I used the

"style="margin: 0 auto;"

  fix that was supposed to center my gallery, and it's not working. See it in action here; the gallery is shifted to the left of the content area: http://www.graphitegolem.com/blog/?page_id=644

And is there a way to change the distance between the thumbnails and the main image?

Thanks.

Re: Gallery layout questions (embedded in WordPress)

You have a stray double-quote in your code.
Change:

<div id="juicebox-container" "style="margin: 0 auto;">

... to:

<div id="juicebox-container" style="margin: 0 auto;">

However, your gallery is horizontally centered within its parent container.

If you wish to increase the distance between the thumbnails and the left edge of the gallery, you could:
(1) Change thumbNavPosition="BOTTOM" to thumbNavPosition="CENTER"
(2) Increase the value of the thumbPadding configuration option
(3) Increase the value of the stagePaddingconfiguration option

The next version of Juicebox-Pro will also introduce configuration options which will allow you to horizontally and vertically align the thumbnails and main images within their respective areas (although I do not know when it will be released).

Re: Gallery layout questions (embedded in WordPress)

However, your gallery is horizontally centered within its parent container.

Um, no, it's not?

It's pretty clearly aligned to the left, since the thumbnails are flush with the left side of the container, and the image with the largest horizontal measurement doesn't come close to the right side. Or do you mean that each separate item, the thumbnails and main image RESPECTIVELY, as opposed to the GALLERY (which to me would be the two of them together), are centered within their respective containers?

And I would actually like to reduce the distance between the thumbnails and the main image, if that's at all possible.

Also, changing the thumbNavPosition also made the entire gallery jump from one position to the other, but still slewing left.

Re: Gallery layout questions (embedded in WordPress)

Your gallery (the 'juicebox-container' <div>) is horizontally centered within its parent container and, within the gallery, the thumbnails are centered within the thumbnail area and the main image is centered within the image area. Most of your main images are portrait style and, in a landscape style gallery, there is space to the left and right of the main image. Try resizing your gallery browser (by reducing its width) and you will see that the thumbnails and main images become closer together.

the thumbnails are flush with the left side of the container

This is because you have set thumbsPosition="LEFT" and thumbNavPosition="BOTTOM".

the image with the largest horizontal measurement doesn't come close to the right side

Currently, there is no configuration option available to horizontally align the main images to the right edge of the image area. However, in a browser window of a certain aspect ratio (closer to portrait than landscape), the right side of your main images will be flush against the right edge of the gallery. Try resizing your browser window and you should see this.

And I would actually like to reduce the distance between the thumbnails and the main image, if that's at all possible.

My suggestions above would move the thumbnails away from the left edge of the gallery.
If you wanted the thumbnails as close to the main images as possible (for images of all aspect ratios), you could set the following configuration options:

thumbsPosition="LEFT"
maxThumbRows="3"
maxThumbColumns="3"
thumbNavPosition="BOTTOM"
thumbPadding="0"
imagePadding="0"
imageScaleMode="FILL"

Also, changing the thumbNavPosition also made the entire gallery jump from one position to the other, but still slewing left.

Changing thumbNavPosition from "BOTTOM" to "CENTER" will reserve space to the left and right of the thumbnails for the thumbnail navigation arrows.
As I noted above, there are currently no configuration options to horizontally and vertically align the thumbnails and main images within their respective areas but such options should be introduced in the next version of Juicebox-Pro.

Re: Gallery layout questions (embedded in WordPress)

Your gallery (the 'juicebox-container' <div>) is horizontally centered within its parent container and, within the gallery, the thumbnails are centered within the thumbnail area and the main image is centered within the image area.

This I do not understand. If the <div>, which I assume means the entire gallery, is centered, and then each element is centered within its own area, why does the Main Image have a greater amount of blank space on its left side than its right, if the edge of the thumbnail is assumed to be the edge of the thumbnail container? Why is the Button Bar not centered? Why would the thumbnails be flush to the edge of the container, if the entire gallery is centered within the container?

As far as I'm concerned, if the entire gallery were centered, it would look something like this: http://www.graphitegolem.com/blog/wp-co … ntered.jpg

This is because you have set thumbsPosition="LEFT" and thumbNavPosition="BOTTOM".

I want the thumbnails to the left of the image. That, in fact, was the majority of the reason I bought Pro, as Lite only allows you to have them below. I did not realize that I wouldn't have any control over the gallery layout past putting them on the left side, though.

Try resizing your gallery browser (by reducing its width) and you will see that the thumbnails and main images become closer together.

For me, this isn't really an acceptable solution, as it's not giving me the layout I want when I bring the gallery up in what I consider a normal browser layout. Maybe this works better for mobile; I don't know, I'm not a web expert here.

Currently, there is no configuration option available to horizontally align the main images to the right edge of the image area. However, in a browser window of a certain aspect ratio (closer to portrait than landscape), the right side of your main images will be flush against the right edge of the gallery. Try resizing your browser window and you should see this.

I don't want the main image aligned right.

I want it, along with the thumbnails, nicely aligned center. Since everything is centered in my Wordpress site, it looks off-center with the thumbnails flush to the left and the main image (apparently) floating in no particular place.

thumbsPosition="LEFT" - I had this already.
maxThumbRows="3"  - I had this already.
maxThumbColumns="3"  - I had this already.
thumbNavPosition="BOTTOM"  - I had this already.
thumbPadding="0" -Doesn't provide any real appreciable effect, aside from making the thumbnails closer together.
imagePadding="0"  - I had this already.
imageScaleMode="FILL" - This balloons the image to the point where I can't see all of it, no matter what I seem to do to my browser's proportions. I'm not sure why this is even an option. ScaleMode = "SCALE" seems to keep it within the bounds of the container, though again, it's not really centered, and I'm kind of disappointed with this so far.

Re: Gallery layout questions (embedded in WordPress)

This I do not understand. If the <div>, which I assume means the entire gallery, is centered, and then each element is centered within its own area, why does the Main Image have a greater amount of blank space on its left side than its right, if the edge of the thumbnail is assumed to be the edge of the thumbnail container?

Take a look at this screenshot using Firefox's 'Inspect Element' functionality. The dotted line shows the thumbnail area. The area to the right of the thumbnail area is the image area. The thumbnails are horizontally centred within the thumbnail area and there is an equal amount of space to the left and right of the main image within the image area.

Why is the Button Bar not centered

This is caused by a bug (buttonBarHAlign="CENTER" does not work when thumbsPosition="LEFT" or "RIGHT") which has already been addressed and will be fixed in the next version of Juicebox-Pro.

Why would the thumbnails be flush to the edge of the container, if the entire gallery is centered within the container?

Setting thumbsPosition="LEFT" (in conjunction with thumbPadding="0" and thumbNavPosition="BOTTOM") will automatically have the thumbnails flush to the left edge of the gallery. My suggestions above will allow you to move the thumbnails away from the left edge of the gallery.
Centering the gallery (the 'juicebox-container' <div> with the background color of #63000) within your page (so that there is an equal amount of space either side of it) is different to positioning the gallery elements within the gallery.

I want it, along with the thumbnails, nicely aligned center.

From the mock-up screenshot you provided, it looks like the layout you are after might be achieved by simply increasing the value of the stagePadding configuration option from its default value of zero, e.g. stagePadding="50"

Re: Gallery layout questions (embedded in WordPress)

Take a look at this screenshot using Firefox's 'Inspect Element' functionality. The dotted line shows the thumbnail area. The area to the right of the thumbnail area is the image area. The thumbnails are horizontally centred within the thumbnail area and there is an equal amount of space to the left and right of the main image within the image area.

I did, and they aren't really, but I'm not going to fight with you any more about 10 pixels or so in the main image area, and probably about 4 in the thumbnail area.

Centering the gallery (the 'juicebox-container' <div> with the background color of #63000) within your page (so that there is an equal amount of space either side of it) is different to positioning the gallery elements within the gallery

Thank you for explaining that now; this is not completely obvious to the uninitiated.

It has that background color so I can see whether or not these efforts to center it are actually working- as I already mentioned, the main problem is that the fact that the pieces of the gallery, however you want to group or classify them, look out of place with the rest of the page's center-aligned content.

Changing the StagePadding didn't do anything by itself. Changing the ThumbPadding didn't do anything period, aside from make the thumbnails closer together. Changing the ThumbNavPosition (for whatever reason) to Center along with changing the Stagepadding seems to have (more or less) fixed the issue, though really, I have the nagging feeling that if I went and measured it again, it would not actually be centered, but close enough as not to be worth arguing about, and really, I'm still somewhat vexed that the main image is not absolutely centered within its container, especially with a Scale option enabled- shouldn't the program be taking care of this?

Re: Gallery layout questions (embedded in WordPress)

Currently, there is a fixed 10px separation between the main image and the thumbnails (when they are positioned LEFT or RIGHT). This will be removed in the next version of Juicebox-Pro.