WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
Tip: How to center the FLASH slideshow and gallery thumbnails (9 posts)

  1. DivaVocals
    Member
    Posted 2 years ago #

    Oh my goodness.. I am EXHAUSTED!!! FINALLY decided to fix my NGG stylesheet ONCE AND FOR ALL to address two things I see folks ask about ALL THE DAGGONE TIME.. Centering the FLASH slideshow and centering the thumbnail images when displaying a gallery..

    It took a while to find an answer that LOOKED correct (versus some of the guesses I saw posted)

    This post: http://wordpress.org/support/topic/plugin-nextgen-gallery-center-thumbnails?replies=6 (in particular all the responses from rw79 were SUPER helpful in getting the thumbnails centering correctly. (I knew rw79 was on the right track when I saw their solution for IE7/IE8 compatibility)

    I downloaded rw79's stylesheet and incorporated the suggested changes into my stylsheet. (I used the file comparison program Beyond Compare to clearly see the changes needed and where they should go. This is because rw79 had other modifications in their stylesheet which I did not need/want) and FINALLY I got centered thumbnails that works in ALL browsers (except IE7/IE8 of course **LOL**)

    As for centering the Flash slideshow, it turns out that there is something missing from the default NGG stylesheet.. Find the section headed:

    /* ----------- Slideshow -------------*/

    and add the following:

    .ngg_slideshow {
    /* Required to center the Flash slideshow */
    margin: 0 auto;
    text-align:center;
    }

    and the FLASH slideshow will now center correctly. This change is NOT required if you are using the JQuery slideshow. (at least not in my experience)

    I hope this will help save someone some searching.. Gonna add some tags to make this post easy to find..

    nextgen-gallery, center, center thumbnails, center slideshow

    http://wordpress.org/extend/plugins/nextgen-gallery/

  2. DivaVocals
    Member
    Posted 2 years ago #

    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 http://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;
    }

  3. Albzy
    Member
    Posted 2 years ago #

    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!

  4. DivaVocals
    Member
    Posted 2 years ago #

    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**

  5. webwork4money
    Member
    Posted 2 years ago #

    Hello,

    I have the same problem: http://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.

  6. DivaVocals
    Member
    Posted 2 years ago #

    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..

  7. webwork4money
    Member
    Posted 2 years ago #

    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.

  8. badbaby
    Member
    Posted 2 years ago #

    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

  9. DivaVocals
    Member
    Posted 2 years ago #

    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)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic