[Plugin: NextGEN Gallery] Tip: How to center the FLASH slideshow and gallery thumbnails

here is the section of my stylesheet with the changes incorporated (you will find this at approx lines 13 – 140 in the NGG stylesheet):

/* ———– Album Styles Extend ————-*/

.ngg-albumoverview {
margin-top: 10px;
width: 100%;
clear:both;
display:block !important;
text-align: center;
}

.ngg-album {
height: 100%;
padding: 5px;
margin-bottom: 5px;
border: 1px solid #fff;
}

/* IE6 will ignore this , again I hate IE6 */
/* See also https://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
overflow:hidden;
padding: 5px;
margin-bottom: 5px;
border: 1px solid #ccc;
}

.ngg-album {
overflow: hidden;
padding: 5px;
margin-bottom: 5px;
border: 1px solid #ccc;
}

.ngg-albumtitle {
text-align: center;
font-weight: bold;
margin:0px;
padding:0px;
font-size: 1.4em;
margin-bottom: 10px;
}

.ngg-thumbnail {
float: left;
margin-right: 12px;
}

.ngg-thumbnail img {
background-color:#fff;
border:1px solid #A9A9A9;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;
}

.ngg-thumbnail img:hover {
background-color: #A9A9A9;
}

.ngg-description {
text-align: center;
}

/* ———– Album Styles Compact ————-*/

.ngg-album-compact {
display: inline-block;
height:180px;
padding-right:6px !important;
margin:0px !important;
text-align:center;
width:120px;
}

.ngg-album-compactbox {
background:transparent url(albumset.gif) no-repeat scroll 0%;
height:86px;
margin:0pt 0pt 6px !important;
padding:12px 0pt 0pt 7px !important;
width:120px;
text-align: left;
}

.ngg-album-compactbox .Thumb {
border:1px solid #000;
margin:0px !important;
padding:0px !important;
width:91px;
height:68px;
}

.ngg-album-compact h4 {
font-size:15px;
font-weight:bold;
margin-bottom:0px;
margin-top:0px;
width:110px;
}

.ngg-album-compact p {
font-size:11px;
margin-top:2px;
}

/* ———– Gallery style ————-*/

.ngg-galleryoverview {
overflow: hidden;
margin-top: 10px;
width: 100%;
clear:both;
display:block !important;
text-align:center;
}

.ngg-galleryoverview .desc {
/* required for description */
margin:0px 10px 10px 0px;
padding:5px;
}

.ngg-gallery-thumbnail-box {
display: inline-block;
}

.ngg-gallery-thumbnail {
float: left;
margin: 10px 0 0 10px !important;
text-align: center;
}

i’v tried this with literally everything else and i still cant get the slideshow images to center. The slideshow loads up centered it even show the first image centered for a split second then jumps to the left. its like its taunting me!

and taunting us too since no one can GUESS what is going on without SEEING your site.. Unless you weren’t really asking for help and just passing through to post a rant.. **shrug**

Hello,

I have the same problem: https://www.fk.getgreenhosting.com Go to the Treasures page. The image appears then jumps left.

I really want a box around the image with a black background as well.

Any help would be GREATLY appreciated.

Seems some of ya’ll are inquiring about something unrelated to my topic.. This post is NOT about centering or formatting the JAVASCRIPT (jQuery) slideshow AT ALL.. Please re-read my original post.. (or even the title of this post which makes VERY CLEAR which NGG slideshow I am speaking of in this thread) The two slideshows have separate classes and IDs in the stylesheet and NGG code and therefore styling them is not the same.. Hence the reason for the very explicit post title.. When I went looking for this information, I couldn’t find ANY information on the FLASH slideshow. So I wanted to make sure those who still use it could locate my findings.

As the title indicates, I was posting my experience/CSS for centering TWO things on my site:

• The FLASH slideshow
• Thumbnail images when displaying a gallery

Hence the title of this post:

How to center the FLASH slideshow and gallery thumbnails

The CSS I posted only works for these two things..

If you came to this thread and are inquiring about centering the JAVASCRIPT (jQuery) slideshow, you need to find the classes and IDs in your stylesheet that apply to the jQuery slideshow. You can try applying the changes I posted and see if they work.

BUT…

You should post your inquiries/findings about formatting the JAVASCRIPT (jQuery) slideshow in a new post so folks looking for formatting information for the JAVASCRIPT (jQuery) slideshow can easily find it. Talking about both of these slideshows in the same thread is like talking about apples and oranges since they are NOT the same and do not share the same formatting structure..

Sorry DivaVocals
I don’t know enough to know that I was talking about another fruit. I just know it does not work. I’ll look for jQuery centering posts.
Have a great day.

Not sure if this is the right spot. After upgrading today, I put in a 2 picture gallery which worked fine, but this appeared above the gallery on my front page
[show picture list]
I can’t seem to get rid of this or find it’s source.
Any advice would be helpful.

Noah

badbaby – Based on the title of the post

How to center the FLASH slideshow and gallery thumbnails

I would say that this is definitely the wrong spot for your post since it is not related to the topic of this one… (unless you are speaking of centering the gallery thumbnails and flash slideshow and speaking in code)