[Plugin: NextGEN Gallery] Squished Thumbnails

  • sassymonkey

    (@sassymonkey)


    16 years ago

    On latest Safari 3.2, the thumbnails are usually squished horizontally and overlapping closely. Very occasionally, they will render correctly as square thumbnails in a row. But then a refresh will break it again.

    Since I can’t upload a screenshot, I’ll try to illustrate the problem in the glorious fidelity of ASCII!

    Instead of a proper row of square thumbnails with space between like this:
    [ ] [ ] [ ] [ ] [ ]

    The thumbnails look all squished and overlapped like this:
    [[[[[ ]
    The entire thumbnails are there but are highly condensed horizontally within their space.

    Then if you mouse over them, they partially pop open but still overlap something like:
    [ [ [ [ [ ]
    The images are then slightly less squished horizontally but still overlapped.

    This has been happening for all of the beta versions tested of NextGen 1.0 b in various versions of WP 2.7b. I prefer the thumbnails set to square (no landscapes or portraits), but have tried messing with all of the Thumbnail settings and the problem persists.

    I have a rough staging site to try it out on at: https://staging.srwestend.com/nggallery/page-119/album-2/gallery-1/

Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter sassymonkey

    (@sassymonkey)

    BTW, the same problem is happening in Google’s Chrome browser. I assume that since both Safari and Chrome are using the WebKit rendering engine, therein lies the problem: something about the coding in NextGen for the thumbnails is incompatible with WebKit.

    Seeing as how Chrome is already garnering a user base (cnet reported recently that it’s already the fourth most used browser to visit their sites), and seeing as how Safari is well established, maybe this display problem can be tackled sooner rather than later… maybe? C|:-}

    Alex Rabe

    (@alexrabe)

    Have you the same issue with the default theme ?

    cipote

    (@cipote)

    Hey alexrabe,

    Thanks a lot for this plugin! I just started using it.
    Here is a sample of the thumbnail display.

    FYI, I’m using the Maple Leaf by (TemplateLite.com).

    Thread Starter sassymonkey

    (@sassymonkey)

    Indeed, the squished thumbnail problem does NOT exist in both the default theme and the Classic. BTW, the theme I’m using is called “Maple Leaf” available at TemplateLite.com.

    This makes me think there’s something in my theme’s CSS that is affecting NextGen (like maybe an a: or hover: class). This is not the case though. I looked at the various divs that NextGen creates to display thumbnails and they are all uniquely labeled and should not conflict with my theme’s CSS. I also removed a bunch of CSS bits that might affect it with no changes.

    One consistency I did find in Safari is that simply loading a gallery page with thumbnails will nearly always show the squish problem. However, if I click the [Slideshow] link to switch over the the Flash viewer, and then switch back by clicking the [Picture List] link, the thumbnails nearly ALWAYS show up correctly.

    Yet, this is only on Safari. Goggle’s Chrome always shows them squished regardless.

    Very puzzling. I’m at a loss of where to start eliminating code to see if anything affects it.

    Somehow the width of a random number set of images gets set to 20px….i can’t figure out what does that. Chrome’s DOM Inspector even shows you that the original value is read from the CSS, then overwritten out of nowhere with 20px.

    When the page is refreshed the selection of malformed images is almost always different. This may well be a browser bug.

    I fixed this by adding the following to the thumbnail image style in nggallery.css:

    .ngg-gallery-thumbnail img {
     float: left;
     ...
}

    (Also tested in ff, ie7, ie6.)

    It will increase the horisontal thumbnail spacing in ie6, which can be slightly remedied by using padding instead of margin on the thumbnail container as follows (for those who care about ie6):

    .ngg-gallery-thumbnail {
     /*margin-right: 5px;*/
     padding-right: 5px;
     ...
}

    @anyusernamewilldo,
    This seems to have fixed it for me as well!
    Thank you very much for sharing this!

    Ah, I just noticed that this behaviour is back. I see it with both G5 and Intel ship based Macs. I guess now I would look into the theme itself…

    I am planning to use NextGEN gallery, very helpful. https://www.webhostingr.net

    look in your theme’s css for something like img{max-width:98%;} I took that out and the problem went away.

    Thread Starter sassymonkey

    (@sassymonkey)

    Hey, yeah! I did find similar code in my style.css doc for the Maple Leaf template:

    img {
    max-width: 100%;
    }

    I killed it and it seems to work perfectly well on both Safari and Windows Chrome.

    I wonder what it’s for…? Maybe to keep images that are larger than the content column width from displaying beyond that width…? Oh well.

    Nice!

    look in your theme’s css for something like img{max-width:98%;} I took that out and the problem went away.

    Doesn’t works for me :(.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Plugin: NextGEN Gallery] Squished Thumbnails’ is closed to new replies.