Topic: Hi-res (retina) thumbnails fix
Noticed a small issue in the current JuiceBox build and found a way to add hi-res thumbnails that I thought might help someone else out.
In the style declaration that comes from JB in the gallery, it outputs the following (at least for mine):
<img class="jb-thm-thumb-image" src="http://url.com/image.jpg" style="display:block;position:absolute;padding:0;left:0px;top:0px;width:autopx;height:autopx;">
I believe the
autopx
is just a glitch, and doesn't seem to affect anything, but thought I'd point it out.
For the hi-res thumbnails, I wanted to use 2x sized thumbnails, but leave their declared size in the configuration options. I left the size alone in the options, but uploaded thumbnail images that were twice that size, but JB seemed to place them wrong in the thumbnail img div.
I found that adding:
width: 100%;
height: auto;
top: 0 !important;
left: 0 !important;
to the
.jcbx-glry-classic .jb-idx-thb-list .jb-idx-thumb img
line in the theme CSS file, forced them to fill the container. I'm using highly compressed JPGs for this, so shouldn't really take a hit bandwidth wise and now the thumbnails look awesome on retina / hi-res screens (iPad, iPhone, retina MacBook Pro, etc.).
Not sure this helps anyone else, but thought I'd share!
Thanks