[Plugin: NextGEN Gallery] Center the Slideshow on my page

You’re quite right. I also have changed:

Line 260 from $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) { to $slides.css({}).hide().each(function(i) {

Line 417 from $s.css('position','absolute'); to $s.css('position',' ');

Well I thought that the solution from Thorned Rose and Nathan worked… but it doesn’t. I still get the images (except the first!) loading at the top left: https://www.boasaida.com/

I have the following code:

<div id="gallerycontainer">
<div class="gallery">
[slideshow id=1]
</div>
</div>

and (I’m using Thesis, hence the .custom bit):

.custom #gallerycontainer {
	width:100%;
	text-align:center;
	margin-bottom: 25px;
}

.custom div.gallery {
	width:627px;
	display:inline-block;
	margin:0 auto;
}

Any ideas on what I’m missing?

I see that you deleted the position: absolute from the code but left left: 0; top: 0 I think that this is what is stopping the images from centering. But I could be wrong!

I have a solution for this issue, although it requires a few edits.

First we need to make 3 changes in the: jquery.cycle.all.min.js or jquery.cycle.all.js files.
*Note: If you would like to test-edit and use the non minified files for editing you need to edit nggallery.php around line 350.
**Note: you should minify this after you are done editing.
***Note: these instructions refer to line numbers in the non-minified files.

1) line 260 (remove css part)
original -> $slides.css({position: ‘absolute’, top:0, left:0}).hide().each(function(i)
edited -> $slides.hide().each(function(i)

2) line 471 (remove line of code entirely)
original -> $s.css(‘position’,’absolute’);
edited -> “”

3) line 854 (remove line of code entirely)
original -> opts.cssBefore = { top: 0, left: 0 };
edited -> “”

BTW: The last edit only applies to the fade transition if you want to adjust this for other transitions you will have to edit their respective cssBefore options. And for some transitions this may not work (i.e. slide transitions). I have only tested it with fade.

The above will remove all the absolute positioning information from being set by the jquery cycle functions.

Now we need to add proper centering for each image.

We need to make several changes in the: ngg.slideshow.js or ngg.slideshow.min.js files.
*Note: If you would like to test-edit and use the non minified files for editing you need to edit nggallery.php around line 350.
**Note: you should minify this after you are done editing.
***Note: these instructions refer to line numbers in the non-minified files.

1) line 103 (change greater than to greater than or equal to)
original -> if (img.width > maxWidth)
edited -> if (img.width >= maxWidth)

2) line 109 (change greater than to greater than or equal to)
original -> if (img.height > maxHeight)
edited -> if (img.height >= maxHeight)

3) line 115 (change block of code)
original -> jQuery( img ).css({
‘height’: height,
‘width’: width
});
edited -> var xOffset = (maxWidth-width)/2;
var yOffset = (maxHeight-height)/2;

jQuery( img ).css({
‘height’: height,
‘width’: width,
‘position’: ‘absolute’,
‘top’: yOffset,
‘left’: xOffset
});

The last edit finds the difference between the container and the image’s resize dimensions and then offsets the image by half of that amount – resulting in a vertically and horizontally centered image.

If you want to only do one of the dimensions, horizontally for example, then you will want to eliminate the code for the yOffset and set the top to ‘0’. If you dont want to center your image but just want to align the image to a different sides you can just directly set top,left,bottom or right parameters.

I found an error in the code.

On line 99 of ngg.slideshow.js

change:
var width = img.width, height = img.height;
to:
var width = img.width, height = img.height;

This fixes an issue with centering if the image is smaller than the containing area.

On a related note, if instead of using the JW slideshow, when using the NEXTGEN MonoSlideshow plugin then the slides are centered when wrapped as centered text.

Thorned Rose’s method is what finally made mine center after no success with all the other settings.

I have dual side bars with the center post page about 500px wide.

I was able to tell that the show was dead center by watching the spinner as it first loaded.

I could not tell by the slides themselves because a lot of them were different widths.

For example a pic with a width of 262 px, made the slide show appear to be aligned left, while another pic that was 400px wide displayed with equal margins both sides.

So, unless there is a setting in some file to center the pics within the centered slide show itself, it looks like Nextgen is not coded to center varied widths images. You have to first center Nextgen, then adjust the widths of your pics so that the margins come out equal on both sides.

That’s what did it in my case.

By the way, make sure you press the CTRL F5 keys to clear the cache, otherwise that can fool you as well in not seeing results for changes made.

I use Nextgen because I need multiple galleries, but I like WP-cycler because it allows me to hyperlink the pics, and stop the slides on mouse hover, and it’s always centered, but it won’t allow multiple galleries like Nextgen will. I use it with Nextgen on the same page.

I noticed that WP-cycler is strict about the image size upload. If it’s not the same size that you set your slide show width and height, it won’t accept the upload, maybe because otherwise, the pics would be off center like Nextgen.

Thanks, anitasavio!

Your suggestion worked for me!

Hi all,

Im also having issues centering pictures on my page, i followed Calsot’s instructions a couple of weeks back that appeared to work, however now its out of alignment again.

If any one could help , it would be really appreciated

https://myoverlandadventure.com/indonesia-west-sumatra/

Alex….where are you for help with this seemingly common issue???? i too want to center the slideshow, thumbs, galleries, etc….everything automatically defaults to left. Help please, it looks very unprofessional like this.

Well, it looks like there is still no definitive solution, so although I am not very good with css, and I wanted something that would do it in the actual WP page I messed around and came up with this:

<div style=” position:relative; padding-left: 16px; left: 50%; margin-left:-486px; ” >[nggallery id=5]</div>

It works fine.

This is a single-image-at-a-time sideshow, and the images are pretty large … 973 px wide as a matter of fact. The padding left corrects for a shift towards the left that I couldn’t find the raisin for. I learned that in college over 50 years ago when I was a physics major. It was a common practice. If you kept coming up with the same required adjustment, you entered a “factor” in the equation to make everything neat and trim. So I figured if it was good enough for J. Robert Oppenheimer in 1945,and his Big Boy lit up the sky over Alamogordo anyway, whether the math needed to be adjusted or not, it was certainly good enough for me.

Besides, we didn’t have computers then. We used slide rules and they always required some adjusting.

Anyway, at last I have found a chance to contribute. ??