Posted 2 years ago #
hello again,
How can i center the nextgen slideshow on my page or post. iam currently using the following code but it does not work. Do i have to do it in the css.? if so where do i start.
<p style="text-align: center;">[slideshow id=1]</p>
I have looked around and cant fint any thing usefull. all your help would be great.
Rory
Posted 2 years ago #
Similar problem here.
I don't think changing the page HTML will work since, as far as I understand it, this will be over-ridden by the slideshow CSS. Changing the float value to "center" in nggallery.css line 260 works in every browser I've tried except for IE (all versions) which seems to ignore it and just puts the slideshow on the right.
I suppose you could try padding to push the show over but that would assume that all your slides are the same size/orientation.
This alignment issue seems to pop up in several threads but I've yet to hear of an answer. Please post again if you find a solution.
Any thoughts out there?
Tony
Posted 2 years ago #
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.
Posted 2 years ago #
Is it that the slideshow isn't centered of that the images aren't centered within the slideshow div? For me I can't find anywhere to align the images to the middle of its containing div. Somewhere these images are being set absolutely to the top left corner.
Any idea how to do this? It can't be done through CSS as far as I can see because the style is hard coded into the image after the class has been defined.
Posted 2 years ago #
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?
Posted 2 years ago #
Here's something that worked for me -- incredibly simple: Rather than go into the css file, simply go into the page your gallery is on and plunk in this substitute for the NextGen gallery code: <div align="center";>[slideshow id=1]</div>. Voila! NOTE: I have slideshow id set at 1. If you have more than one gallery, i.e. id=2, id=3, etc.
Posted 2 years ago #
If you have more than one gallery, that number will change, i.e. id=2, id=3, etc.
Posted 2 years ago #
This sounds like a great solution though I confess I am no coder. I went into html view in the wordpress admin and where it said " [nggallery id=18] " I replaced it with your code (changing the gallery ID) so that it looks like this on the page:
…accept Him or not). <div align="center";>[nggallery id=18]</div>
I remember this story of the…
But in Safari - I still have the same problem and the gallery wants to force itself toward the bottom of the page despite how open or closed the browser window is.
Maybe I am doing something wrong with the code or maybe Safari just doesn't recognize the code where the other browsers do? Even with the change of code - Firefox. Opera, and Chrome all keep the gallery centered.
Posted 2 years ago #
<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)
Posted 2 years ago #
Great feedback Throned Rose - I will try implementing the code later this afternoon.
Here is the link to the sites I am having the issue:
http://blog.jefflefever.com/ an example from that site would be the galleries here from Prague: http://blog.jefflefever.com/?p=347
My Travelogue site: http://travelog.jefflefever.com/israel/sunrise-6am-back-to-bed-today-is-121209-in-jerusalem/
My old Daily Log (example): http://dailylog.jefflefever.com/?p=1312
The Sales site: http://jefflefever.com/
Here on my News website: http://www.lefever.com/news/six-new-consecrated-space-prints-available-now-at-jefflefever-com/
BUT ONLY IN SAFARI
Firefox, Chrome, Opera - on my MAC, all work as they are supposed to .
Posted 2 years ago #
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...
Posted 2 years ago #
I've found where the absolute positioning comes from and, as I thought, if I remove it then the images are centered perfectly but... the transition effect is completly messed up: the next image fades in below the current image and then jumps to the top when the previous one disappears. Even worse then absolute positioning in the top left!!
Posted 2 years ago #
...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......
Posted 2 years ago #
@nathan12343 Which version of nggallery are you using? If you look at the site I linked, none of the images get absolutely positioned. Maybe it's the NGG style you are using? The one I have activated on that site is "Shadow Effect" (ngg_shadow.css). I would try setting the wordpress template to Twentyten and also the NGG style to the default and seeing if it makes a difference. At least then you might know whether it's one or both of the templates messing with things.
@lefever Rather ironically I am getting that problem in Chrome but not in Safari or Firefox lol. What lightbox are you using? Just the default one or a different one? The last time I had problems like you was with the lightbox script itself. Personally I use Shadowbox JS (http://wordpress.org/extend/plugins/shadowbox-js/) which seems to work flawlessly on my site. You could try switching NGG to use either a different one that it comes with (Shutter or Thickbox) or install another one like Shadowbox JS (setting NGG's javascript effect to "Lightbox") and seeing if that makes any difference.
Posted 2 years ago #
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
Posted 2 years ago #
@nathan12343 Ah, I see exactly what you mean! Try adding:
.ngg-slideshow {margin:0 auto !important;}
to either your template's stylesheet or NGG's style. Tested it in Firefox, Chrome, Safari and IE7&8 and worked for me on all :)
Posted 2 years ago #
Thorned Rose - GOOD NEWS
With the help of a coder friend of mine - before he was going to help me with your suggestions – recommended that it could be a conflicting file extension in Safari since it was working fine on his Mac using Safari- and it was, It was a file extension called Ad Blocker suppose to clean off all the ads on FaceBook.
I do not know if this will be helpful to anyone else but run with it if it is useful.
Thanks for your quick response and willingness to help - really appreciate your know-how and time.
Jeff
Posted 2 years ago #
@lefever LOL. Well, glad to hear it's working for you! I wonder if that's why it's going screwy on my Chrome as well given I have the AdBlock extension for it >.<
And it's no problem at all. I always try to pass on the helpful little tidbits of code I discover whilst working on WordPress sites :)
Posted 2 years ago #
Hi everybody! Happy New 2011
@nathan12343 Where did you exactly touched to remove the hardcoded "style" inserted into the "img" element? I guess it must be in some javascript file, but I'm a little bit lost outside CSS.
Thank you very much.
Posted 2 years ago #
To Thorned Rose,
You have solved Nathan's problem, but I am still quite confused which code to add and where.
I am trying to get my NGGallery (& slide show) to be aligned center, and the gallery is pretty wide (like 800px or so). Could you provide me with the code?
Thanks in advance!
Dana
Posted 2 years ago #
Hi Dana, can you link me the website url that your gallery/slideshow is on.
Posted 2 years ago #
Hi Thorned Rose,
I am simply just wanting the center the gallery and slideshow. It is defaulted on the left side. For privacy reasons I am not providing the website.
Thanks for getting back to me so quickly,
Dana
Posted 2 years ago #
It just makes it a little difficult to ensure that I give you the right code for your particular needs. If you want you can email it to me - support [at] liquidsilver.net.nz
Otherwise have you tried adding .ngg-slideshow {margin:0 auto !important;} to your template's style.css?
Posted 2 years ago #
Do you mean add it to my theme's style.css or to NGGallery's?
Thanks a lot; I may email you if necessary!
Posted 2 years ago #
Your theme's style.css :)
Posted 2 years ago #
It didn't work. The theme I'm using (Photocrati) has its style.css in a separate style folder ("style/style.css").
This is the code I added under "general...":
/* General Page Styles
-------------------------------------------------------------- */
.ngg-slideshow {margin:0 auto !important;}
Posted 2 years ago #
Hello all,
I am having the same issue. I am trying to center all images in my nggallery.
I have tried editing the plugins css with:
.ngg-slideshow {
margin:0 auto !important;
overflow:hidden;
position: center;
}
But the first image will center then everything jumps to be left aligned. Again I think it is hardcoded in the js.
Example can be seen at the following link:
http://paulbowman.me/memorial-for-anna/
Any help or advice you can offer would be much appreciated.
Niall
Posted 2 years ago #
This works for me (nggallery javascript slideshow):
.slideshow object {
margin-left: auto!important;
margin-right: auto!important;
margin:0 auto!important;
}
Posted 2 years ago #
thanks for the reply Johnny but I am using the JS Slideshow.
Problem still remains.
Any other suggestions?
Posted 2 years ago #
I can't promise because I got fed up and went for a flash version... but if you look at line 171 in ngg.js (in nextgen-gallery\js\) you'll find position: "absolute" I think that I changed this to position: "relative" I think that was what worked for me...
This topic has been closed to new replies.
