Best practice for adding borders to thumbnails?

[jefftucker1952]

Tinkering with JG, and I quickly discovered that if I applied a CSS border to #mythumbs img, it got stripped off by the JG script. I've managed to get a working border on the thumbnails by targeting .jg-entry (and adding enough JG margins to compensate for it), but wondered if I was just missing something safer, or more straightforward.

Depending upon the page background color, one often needs at least a little 1px border to avoid having the images visually "bleed" into the background.

ETA: BTW, I've discovered that while using .jg-entry as a CSS target for borders does work, when combined with using refreshSensitivity to avoid the "flickering window" problem, it produces ugly cropping of the thumbnails on the right side. You can get away with a one-pixel border, but anything larger than that, and you're in trouble!

[acwolff]

This is only a problem on a PC, so as a work-around I remove the vertical scrollbar and use the mousewheel for scrolling. Try is in this example: https://www.andrewolff.nl/FotoSerie/Wandelingen/Oostvaarderplassen/index.html

[jefftucker1952]

I'm not talking about the JG border attribute, which puts a border on the entire gallery. I'm asking about putting borders on the individual thumbnails.

And disabling normal browser navigation isn't a "solution" to any problem. The vertical scrollbar indicates to the visitor that there's additional material on the page, which might not be obvious. It tells him how far down the page he currently is. It gives him a more direct way to move down than using the scroll wheel. And there are pointing devices out there that have no scroll wheel. In short, hiding the scrollbar when there really is additional content is an awful idea.

[acwolff]

I agree with you that hiding the vertical scrollbar on a PC is not the ideal solution, it would be far better if this problem could be solved in the Justified gallery code. But it is not as bad as you suggest:

• It solves the problem.
• With a justified Gallery it is easy to see that there is additional material on the page.
• A vertical scrollbar is visually an ugly element which takes space which could better be used for your photos.
• Most people use these day mobile devices to view your galleries and on these devices the problem is absent and you see on these devices also no vertical scrollbar. I am just porting a tablet view to a PC!

[RudyMas]

You could also go the other way, I have my vertical scrollbar always visible on the part of the website with the thumbnails in it. (rmfoto.be)

[jefftucker1952]

Yes, I've considered surrendering and going with the "scrollbar always visible" approach. It takes care of a host of problems, including the dreaded "flicker" issue. Borders on thumbnails then become possible without cropping. Something about it offends my sense of aesthetics, but failing a script-based solution to the flicker issue, it's worth considering.

[jefftucker1952]

It appears that the solution to the challenge of applying borders to the thumbnails is to use ordinary CSS on the thumbnail images, but with !important, to keep them from being stripped off. But then you also need to add a box-sizing attribute.

#mythumbs img {
    border: 3px solid red !important;
    padding: 2px !important;
    box-sizing: border-box;
}

You then need to increase the JG border (which isn't really a border at all) enough to prevent cropping on the right and bottom sides of the thumbnail table - how much depends upon how large your thumbnail borders are.

See https://github.com/miromannino/Justified-Gallery/issues/358

[acwolff]

Yes Jeff that works fine as you can see here., but borders of 1 pixel do sometimes partly disappear.

As an experiment, I hide here the vertical scroll-bar if the mouse is not above the window. I use this css code:

body {
  overflow-y: hidden !important;
}
body:hover {
  overflow-y: auto !important;
}