Menu icon Foundation
Clearing Lightbox and retina.js and Firefox

In case this helps anyone else!

Clearing Lightbox and retina.js weren't playing nicely together in Firefox in some cases.

With the out-of-the-box use of both, if no @2x images are present for full sized images, retina.js adds
width="0" and height="0" attributes to the full sized image which causes the full sized image not to display in Firefox.

Adding " data-no-retina" to the thumnail image wasn't enough, I also had to modify foundation.clearing.js to include the "data-no-retina" attribute to the 'template' image placeholder:

So foundation.clearing.js ~ line 9 (in F5.5.0) is now:

...

    settings : {
      templates : {
        viewing : '<a href="#" class="clearing-close">&times;</a>' +
          '<div class="visible-img" style="display: none"><div class="clearing-touch-label"></div><img data-no-retina src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />' +
          '<p class="clearing-caption"></p><a href="#" class="clearing-main-prev"><span></span></a>' +
          '<a href="#" class="clearing-main-next"><span></span></a></div>'
      },
...

         

This prevents retina.js from calculating and adding the width and height attributes to the image.

This is a hack and obviously affects all images used in clearing, but unless there's some other way of being able to specify on a per-image basis whether there's a retina.js variant, it'll do for now.

clearingretinafirefoxlightbox

In case this helps anyone else!

Clearing Lightbox and retina.js weren't playing nicely together in Firefox in some cases.

With the out-of-the-box use of both, if no @2x images are present for full sized images, retina.js adds
width="0" and height="0" attributes to the full sized image which causes the full sized image not to display in Firefox.

Adding " data-no-retina" to the thumnail image wasn't enough, I also had to modify foundation.clearing.js to include the "data-no-retina" attribute to the 'template' image placeholder:

So foundation.clearing.js ~ line 9 (in F5.5.0) is now:

...

    settings : {
      templates : {
        viewing : '<a href="#" class="clearing-close">&times;</a>' +
          '<div class="visible-img" style="display: none"><div class="clearing-touch-label"></div><img data-no-retina src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" alt="" />' +
          '<p class="clearing-caption"></p><a href="#" class="clearing-main-prev"><span></span></a>' +
          '<a href="#" class="clearing-main-next"><span></span></a></div>'
      },
...

         

This prevents retina.js from calculating and adding the width and height attributes to the image.

This is a hack and obviously affects all images used in clearing, but unless there's some other way of being able to specify on a per-image basis whether there's a retina.js variant, it'll do for now.

Rafi Benkual about 4 years ago

This is helpful for people doing the same! Thanks for sharing!