Menu icon Foundation
Clearing : first image not center

Hello,

When i use clearing, sometime the first image is not center. I don't understand why.
I use firefox 26.0

Thx

Capture du 2014 01 22 12 33 58

clearinglightbox

Hello,

When i use clearing, sometime the first image is not center. I don't understand why.
I use firefox 26.0

Thx

Capture du 2014 01 22 12 33 58

This post has been closed. No new replies can be added.

Katherine Chu almost 6 years ago

Can you show your markup please, thanks.

carnaudj almost 6 years ago

which markup ? what is it ? (i m french sorry)
This capture come from the foundation website.

thx

Katherine Chu almost 6 years ago

Ah. I see what you mean. I've just visited http://foundation.zurb.com/docs/components/clearing.html using Firefox v.26 too. There's a slight delay when js is loading, as it is fine when refreshing the page or going back into lightbox mode. You shouldn't experience the same when developing your own site.

Daniel Koskinen almost 6 years ago

I have the exact same issue in Firefox, both in the docs and on a site I'm developing. Is there a way to force Clearing to re-draw when the image is loaded?

Michael C. almost 6 years ago

I've been bitten by this bug as well. Any way around it?

Rafi Benkual almost 6 years ago

Can't get this to happen more than once even using incognito window. It's worth taking a look. FF27 just came out. We should try it there.

Adam Parks almost 6 years ago

Yep, I'm getting this too on FF27. Functionality is fine on Safari 7.0.1. I have a different issue to work out on Chrome, and I haven't tried on IE.

Kevin Kuenkele almost 6 years ago

I have the same issues using Firefox 27.0.1.

Any solutions for this?

i am working on a css fix for this.. but atm it doens't work very well :D

Stefan Staudenmeyer almost 6 years ago

Dirtiest fix I ever wrote was for this:

      $(function(){
          var runtime  = 1000;
          var interval = 100;
          var timer    = null;

          resize = function(){
              timer = setInterval("Foundation.libs.clearing.resize()", interval);
          }
          setTimer = function(){
              setTimeout("clearTimer", runtime);
          }

          clearTimer = function(){
              window.clearInterval(timer);
          }
          $('.clearing-thumbs li a').on('click', function(){
              resize();
              setTimer();
          });
      });

jmarceli over 5 years ago

There might be some issues which I'm not aware of but here is my solution for this problem (I paste a bit more code to make changes easier to find)
In foundation.clearing.js:

    resize : function () {
      var image = $('img', '.clearing-blackout .visible-img');

      //if (image.length) {
        //this.center(image);
      //}
    },

...

        this.loaded(image, function () {
          image.css('visibility', 'visible');
          // toggle the gallery
          root.addClass('clearing-blackout');
          container.addClass('clearing-container');
          visible_image.show();
          this.fix_height(target)
            .caption($('.clearing-caption', visible_image), $image)
            //.center(image)
            .shift(current, target, function () {
              target.siblings().removeClass('visible');
              target.addClass('visible');
            });
        }.bind(this));

Adjust css to center image without using JS.
File _clearing.scss:

    .visible-img {
      height: 95%;
      position: relative;

      img {
        margin: 0 auto;
        display: block;
        //position: absolute;
        //#{$default-float}: 50%;
        //top: 50%;
        //margin-#{$default-float}: -50%;
        max-height: 100%;
        max-width: 100%;
      }
    }

I was working with clearing version 5.0.3

Pawel Ozga over 5 years ago

The simplest solution is to overwrite the img class like this changing the way image is centered:

.visible-img img {
  margin: auto !important;  /* !important to overwrite negative margin-left and margin-top foundation js gives for images in clearing*/
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

This works in FF, Chrome, IE 8-11 as far as I've tested.

Christopher Canisius over 5 years ago

There has been an issue on git hub but they closed the ticket. I can´t understand why because the bug absolutely is existing in my foundation 5.3.3
https://github.com/zurb/foundation/issues/3410

S. Salazar about 5 years ago

It's pretty outlandish that the advice for this issue, from someone at Zurb, is "it probably won't happen on your site."

This still exists in Firefox 33 and is caused by Foundation. This is a bug. This needs to be fixed...

João Figueiredo almost 5 years ago

I cannot believe that this issue still hasn't been solved. I have tried every single one of your provided solutions and the result is still the same...

link: http://hjalshammar-limousin.se/galleri.php

Kevin Jäck almost 5 years ago

The last version of fix worked for me:

.visible-img img {
    width:auto;
    margin: auto !important;  /* !important to overwrite negative margin-left and margin-top foundation js gives for images in clearing*/
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

After that the margin of the first image is correct.

With regards

Kevin