A simple css fix to get rid of image overflow when resizing

[sagive]

So, you're experiencing a problem? no problem.

I am using the most recent version.

I have found that when dealing with images of different sizes there is a small overflow of the image above the border making the transition look bad.

Here is what i used (just a bit of css) to make everything look a bit more smoother.

.ekko-lightbox .ekko-lightbox-container {
    overflow: hidden !important;
    -webkit-transition: width 300ms ease-in-out, height 300ms ease-in-out !important;
    -moz-transition: width 300ms ease-in-out, height 300ms ease-in-out !important;
    -o-transition: width 300ms ease-in-out, height 300ms ease-in-out !important;
    transition: width 300ms ease-in-out, height 300ms ease-in-out !important;
}

Thanks for the great library ;)

[tmarco-wo]

Thanks for your answer! I used your CSS fix, but changed the transitions to appear a bit quicker.

But the thing that really got rid of my main issue (--> after changing to the next image in a different size, the old image appears for a short amount of time), was a fix in the "ekko-lightbox.min.js"-file (or the non-minified version, if you're using that).

I experimented with decreasing the timeout from 500 to eventually 0 (or just get rid of the whole timeout-function)

setTimeout(function () {
    if (!_this2._$lightboxBodyTwo.hasClass('in')) _this2._$lightboxBodyTwo.empty();
    if (!_this2._$lightboxBodyOne.hasClass('in')) _this2._$lightboxBodyOne.empty();
}, 500);

Changing it to zero finally fixed my issue!

Thx for the great lightbox plugin!

[msphair]

@tmarco-wo 👍