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

There are several ways you could go about fixing this but the easiest and most cross-browser compatible would probably be to set the css of .slideshow (in nggallery.css) to a fixed width and the containing (parent) element to be a fixed width. Subtract the slideshow width from the container width, divide that by 2 then use that as your left margin. e.g.

div#container {width:500px;}

.slideshow {width:300px; margin-left:100px;} /* margin = (500-300)/2 */

However if you have a fluid layout where your container element can’t be fixed width then you will need extra trickery to get that to work.

Here is a problem I see in the latest version of NexGen 1.6.2 on WordPress 3.0.1 – when I click a thumbnail to see a larger image, the image opens in a lightbox view in the middle of my browser window – perfect!click the arrow to advance to the next image and the next image comes up lower in the browser window – in fact the arrows for advancing fore or back are below the browser window requiring me to scroll down to a) see the whole image, and b) get to the arrows to advance to the next photo. What ever is happening with the code – it is maddening and inconsistent.

Anybody? This is happening in Safari (which is also up to date) – Oddly it works fine in Firefox, works fine in Opera, and it works as it should as well on Chrome.

Yes I am on a Mac – and yes the best thing for me is not use Safari. BUT for those using Safari – they will find the error to be in my site and the NexGen pluggin.

Any suggestions?

If you have more than one gallery, that number will change, i.e. id=2, id=3, etc.

<div align=”center”> is technically deprecated so prolly not a good idea to use it.

@lefever, I’ve not had the problem of the gallery forcing itself down the bottom. I’ve tested the current site I am working on across Firefox, IE7 and IE8, Chrome and Safari with no problems. The only thing I could think of at this point would be that it is an issue with the wordpress template. Have you tried changing it to something like Twentyten to see if that makes a difference?
Can you link me your site and I will have a look at it.

@nathan12343 To center align images I did this:

html:

<div id="container">
   <div class="imagebox">
   <img />
   </div>
</div>

css:

div#container { width:100%; text-align:center; !important}
div.imagebox { width:150px; display:inline-block; margin:0 auto; !important}

(width can be whatever you need)
This works for all the browsers I test on except IE7. I haven’t found a good solution for IE7 but I don’t tend to bother with perfection for an outdated browser that only 7% of people still use (I replaced display:inline-block with float:left using an style-ie7.css stylesheet and conditional comments to target IE7 and IE7 users can lump it or leave it).

You can see an example of this here: http://demo.liquidsilver.net.nz/moniqueendt/gallery/ (album view listing galleries)
http://demo.liquidsilver.net.nz/moniqueendt/nggallery/page-8/album-1/gallery-1/ (Gallery view listing displaying images)

Hi Thorned Rose,

Many thanks, but unfortunately not. The first image starts in the center and then moves to the top left corner, from then on all other images are anchored to the top left. This is what the javascript is throwing out in the style attributes of the images:

<img src="mydomain/image.jpg" style="height: 630px; width: 920px; position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0;">
<img src="mydomain/image2.jpg" style="height: 630px; width: 920px; position: absolute; top: 0px; left: 0px; display: none; z-index: 4; opacity: 0;">

etc

I can’t see how to get rid of the absolute positioning, in my mind its the only thing that can keep forcing the image out of center alignment…

…so I have put a margin-bottom: 10000px on the css for the img in that div and now it is almost perfect, except for the abrupt switch because the second image is no longer fading in. Still, I guess you can’t have everything!!!

Now the last thing for me is to get navigation links to move backwards and forwards through the show……

Hi

I’m on the latest version and have looked at the default theme and also closed the other plugins. I don’t see a slideshow on your site so I think that we’re talking about different things. When I force the slideshow (put /?show=slide at the end of the gallery URL) on one of your galleries the output is the same with the absolute positioning.(take a look through firebug).

thanks