Menu icon Foundation
Orbit + Clearing Light (almost) working

How to 'X' out of the Light-box and return without collapsing?

http://codepen.io/Phil-D/details/DLlsI

Thank you in advance

1111 screen shot 2014 07 23 at 8.38.21 pm

2222screen shot 2014 07 23 at 8.38.45 pm

333screen shot 2014 07 23 at 8.39.04 pm

btw: I know the 'Next' & 'Previous' buttons aren't working but thats not the problem now

btw: I know the 'Next' & 'Previous' buttons aren't working but thats not the problem now

Orbitclearing light boxcollapse

How to 'X' out of the Light-box and return without collapsing?

http://codepen.io/Phil-D/details/DLlsI

Thank you in advance

1111 screen shot 2014 07 23 at 8.38.21 pm

2222screen shot 2014 07 23 at 8.38.45 pm

333screen shot 2014 07 23 at 8.39.04 pm

btw: I know the 'Next' & 'Previous' buttons aren't working but thats not the problem now

btw: I know the 'Next' & 'Previous' buttons aren't working but thats not the problem now

Lyn about 5 years ago

Hey there,

1st : You're calling $(document).foundation(); twice, which makes some things not working (like your orbits).

2nd : You should not use non CDN contents as CSS or JS. You'd better download it and host it yourself. Plus there's high chance you'll get Cloudflare blocked when linking to Zurb's content directly.

3rd : The stylesheet docs.css that you got from Foundation docs pages is a modified version of the foundation.css. You're overloading your website there.

4th and last : I found the culprit in your issue, which lies in the close function of the clearing plugin.
Just add this at the end of you page to fix it :

Foundation.libs.clearing.close = function (e, el) {
  e.preventDefault();
  var root = (function (target) {
    if (/blackout/.test(target.selector)) {
      return target;
    } else {
      return target.closest('.clearing-blackout');
    }
  }($(el))),
  body = $(document.body), container, visible_image;

  if (el === e.target && root) {
    body.css('overflow', '');
    container = $('div', root).first();
    visible_image = $('.visible-img', container);
    visible_image.trigger('close.fndtn.clearing');
    this.settings.prev_index = 0;
    $('ul[' + this.attr_name() + ']', root)
      .css('width', '').closest('.clearing-blackout')
      .removeClass('clearing-blackout');
    container.removeClass('clearing-container');
    visible_image.hide();
    visible_image.trigger('closed.fndtn.clearing');
  }

  return false;
}

Kind regards,

Lyn.