Topic: center a gallery
Is using <center> the best way to center a gallery or not?
Regards,
rp
Pages 1
You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Lite Support → center a gallery
Is using <center> the best way to center a gallery or not?
Regards,
rp
Forgot to tell that i have a gallery that has 12 pictures. Juicebox shows the first 8 and then the next 4.
So i lowered the gallerywith perc. and it does show 2x 6 pics, but the gallery has shifted a little to the left.
Also i noticed that the gallery has shifted downwards a little bit.
Regards,
rp
A Juicebox gallery is essentially a <div> on a web page and perhaps the best way to center a <div> within a parent container is to apply the CSS margin: 0 auto; on the nested <div>.
Try replacing:
<div id="juicebox-container"></div>... with:
<div id="juicebox-container" style="margin: 0 auto;"></div>Otherwise you could add the following CSS to the <head> section of your web page:
<style type="text/css">
#juicebox-container {
margin: 0 auto;
}
</style>The above examples assume that your gallery <div> has an 'id' of juicebox-container. If your gallery <div> 'id' differs, just change it as necessary.
Also i noticed that the gallery has shifted downwards a little bit.
This might be due to a line break <br> or an empty <p> tag above your gallery.
Check the source of your web page in your browser ('Tools -> Web Developer -> Page Source') and take a look at the elements immediately above your gallery <div>.
Hopefully this will help.
I noticed the <p> tag above the gallery. The stranged thing is that when i look in WP at the "text" tab there is
nog <p> tag or even a "normal return".
How do i remove this irritating tag?
The css options that you mentioned i will look into further.
Thanks so far!
Regards,
rp
... when i look in WP...
In addition to my notes above, if you are using WP-Juicebox (the dedicated Juicebox plugin for WordPress)to create and embed your gallery, then the default width for a WP-Juicebox gallery is 100% and the gallery should fill the parent container horizontally (so it should not need to be horizontally centered).
However, if you change the gallery's width and want to horizontally center it, you could open the 'wp-juicebox.php' file in a plain text editor and change line 287 from:
$string_builder .= '<div id="juicebox-container-' . $clean_gallery_id . '"></div>' . PHP_EOL;... to:
$string_builder .= '<div id="juicebox-container-' . $clean_gallery_id . '" style="margin: 0 auto;"></div>' . PHP_EOL;I noticed the <p> tag above the gallery.
Unwanted <p> and <br /> tags within a WordPress page's content might be due to WordPress's wpautop function.
You could try installing a third-party plugin to disable the wpautop functionality, for example Toggle wpautop or wpautop control.
Otherwise, you could implement the manual solution from this forum thread.
Alternatively, you could try installing the Raw HTML plugin and wrap the gallery's embedding code in [raw] ... [/raw] tags. This should prevent extra markup (such as <p> and <br /> tags) from being added to the HTML code by WordPress itself or any third-party theme or plugins.
I don't use WP-Juicebox ( don't like it, sorry), but i do use Juicebox lite 1.4.4.2 ( i like it very much ).
So editting 'wp-juicebox.php' is not an option.
I could not figure out how to edit the css file to center the Juicebox gallery. So i used the code you gave me,
and put it in the txt tab. Looked at the html code. It's in the <head> of the page and works like a charm.
Thanks!
Tried all the plugins you mentioned and the all of them did a fine job. Infact they overdid it a bit and the Juicebox gallery was way to high! So i had to put in a few <br> and also these plugins work very fine.
Thanks again!
Do i have anything to desire? Well the gallery name could be outlined to the left, but that's a minor detail.
I'm glad that you've been able to horizontally center your gallery and remove the <p> and <br /> tags from your embedding code. Thank you for letting me know.
Do i have anything to desire? Well the gallery name could be outlined to the left, but that's a minor detail.
I'm not quite sure what you mean by "outlined to the left". Maybe you explain in greater detail and provide the URL to your gallery so that I could take a look.
If you are referring to the Gallery Title, then you can position and style the Gallery Title using the following configuration options.
galleryTitlePosition ('Customize -> General')
galleryTitleHAlign ('Customize -> General')
galleryFontFace ('Customize -> General')
textColor ('Customize -> Lite')
textShadowColor ('Customize -> Color')
For reference, a list of all configuration options can be found here.
At this page http://wp.raymondprins.com/blog/travel/italy/
the title Italy is almost under Home.
At this page http://wp.raymondprins.com/blog/travel/greece/
the title Greece starts at almost the left on the page.
Like all of the other titles.
This is the way i would like Italy also to be.
I looked at your suggested gallery options, but they are for the pro version.
I use the free version.
Regards,
rp
The Gallery Title in your 'Italy' gallery is flush against the left-hand edge of the gallery.
The difference between your 'Greece' and 'Italy' galleries is that your 'Greece' gallery has a galleryWidth of 100% whereas your 'Italy' gallery has a galleryWidth of 80% and is therefore narrower and the edges of the gallery are not as close to the edges of the parent container.
Increase your 'Italy' gallery's galleryWidth to 100% and you should see your Gallery Title further to the left.
Yes and i did it op purpose. Maybe you missed my post `2016-02-25 00:49:49`in this topic.
I wanted to have even thumb numbers ( 2 x 6 ).
When it´s not posible to outline Italy, no problem!
No problem. I didn't miss your post. I was just explaining why the gallery titles in your two galleries are in different places and how you could change the position of the Gallery Title (by changing the gallery's width) if you wanted to.
As you have discovered, you may need to compromise between the width of your 'Italy' gallery and the position of its Gallery Title.
Just for the record, with Juicebox-Pro, you could set maxThumbColumns="6" to ensure that no more than 6 columns of thumbnails are ever displayed on any page. (That way, you could increase your gallery's with to 100% and retain your 6 thumbnails per page.)
Juicebox Support Forum → Juicebox-Lite Support → center a gallery
Powered by PunBB, supported by Informer Technologies, Inc.