Mr. Calsot

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.

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.