Navigating to another image is with delay

[kironet]

Hello,

I have a problem, I've just installed this plugin. Everything works, but when I'm navigating to another image in gallery, I can see for a second both images(first and second).

                            <li>
                                <a href="/images/products/1489122663-yuiyui.jpg" data-toggle="lightbox" data-gallery="example-gallery">
                                    <img src="https://www.domain.com/images/cache/94x94/images/products/1489122663-yuiyui.jpg" class="img-fluid">
                                </a>
                            </li>
                            <li>
                                <a href="/images/products/1489122663-zxczxc.jpg" data-toggle="lightbox" data-gallery="example-gallery">
                                    <img src="https://www.domain.com/images/cache/94x94/images/products/1489122663-zxczxc.jpg" class="img-fluid">
                                </a>
                            </li>

[ashleydw]

Can you post a full page or jsfiddle?

[noofaq]

I have noticed exactly same issue. What's interesting it does not appear in 4.0.1 version (from CDNJS) but there videos do not work properly when browsing mixed image/videos gallery..

Reproducible in latest Chrome & Firefox versions on Lightbox versions 5.1.x (bootstrap 3.3.7, jquery 2.2.4 - also on jquery 3.1.1)

Basic example available here: http://silqcode.com/issues/ekko-lightbox.html

[ashleydw]

@noofaq Thanks for the example

That is weird. Do you see the same in the example page? https://rawgit.com/ashleydw/lightbox/master/examples/bs3.html

Is this only happening with BS3?

[noofaq]

In fact your page seems to work significantly better, but it is quite hard to notice as the best way is to have very different images with very different sizes.

Project I work on currently is based on Bootstrap3 so unfortunately I cannot test on BS4.

I have played a bit with different versions of code and have created another example page ( http://silqcode.com/issues/ekko-lightbox2.html ) which seems to work a bit better (even if you still are able to see small flicker of old image when browsing).

Changes I have tested (both FF & Chrome):

• jquery version 2.2.4 and 3.0 - no visible difference
• addition of JS tether library - no visible difference
• switch ekko-lightbox 5.1.1 JS code to the one from bs3.html page - no difference
• switch ekko-lightbox 5.1.1 CSS code to the one from bs3.html page - significant improvement (still no ideal unfortunately); this change is in fact what differentiates my two example pages

Even if latest code seems to be better, I would be very glad if this can be still a bit faster (I would even prefer preloader image blinking while change instead of partial visibility of the previous image what looks a bit weird).

[kironet]

Sorry, I can't provide page because it's not done yet for public. But noofaq posted same issue with examples so I think it's not problem in my or his code. I'm also using bootstrap.

[ihchen]

So I was having the same issue as @noofaq and one thing I found was that ekko-lightbox.min.css has 'opacity: 1' for '.ekko-lightbox-container > div.ekko-lightbox-item.' This overrides the '.fade.in' styling from bootstrap, which just sets 'opacity: 1', and therefore, the images do not fade causing the clunky looking behavior. The not minified ekko-lightbox.css does not have 'opacity: 1' set for 'ekko-lightbox-container > div.ekko-lightbox-item' and therefore fades properly.

However, as shown above, this does not fix the clunky behavior. It just makes it harder to notice. I took a look at ekko-lightbox.js and noticed that in the _resize() function, which is called when you navigate between images, it changes the size of the parent containers around the '.ekko-lightbox-item' divs (it changes the height of '.ekko-lightbox-container' and the width of '.modalDialog'.) This means that when you click one of the navigate buttons, the containers resize as the images are fading in and out. But this means the image thats fading out also resizes. I believe this is what causes the clunky behavior. This also explains why having images of the same size looks fine.

[beranPro]

Hi @ashleydw , same problem as @kironet here.

• Bootstrap v4.0.0-alpha.6
• images got different heights

IncludedFiles:

<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.1.1/ekko-lightbox.min.css" integrity="sha256-8aNQFtmxcOMVoOhLD4mrHqaKC2Ui++LmlQsoKTqxwIE=" rel="stylesheet" />
<script crossorigin="anonymous" integrity="sha256-1odJPEl+KoMUaA1T7QNMGSSU/r5LCKCRC6SL8P0r2gY=" src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.1.1/ekko-lightbox.min.js"></script>

HTML Snippet

<div class="row text-center text-lg-left picdump_images">

        <div class="col-lg-3 col-md-4 col-xs-6">
            <a class="d-block mb-4 h-100" data-gallery="picdump" data-toggle="lightbox" href="/files/2/picdump-17-03-10-005.jpg">
                <img alt="" class="img-fluid img-thumbnail" src="/files/2/picdump-17-03-10-005.jpg" />
            </a>
        </div>

        <div class="col-lg-3 col-md-4 col-xs-6">
            <a class="d-block mb-4 h-100" data-gallery="picdump" data-toggle="lightbox" href="/files/2/picdump-17-03-10-025.jpg">
                <img alt="" class="img-fluid img-thumbnail" src="/files/2/picdump-17-03-10-025.jpg" />
            </a>
        </div>
</div>

<script>
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
        event.preventDefault();
        $(this).ekkoLightbox();
    });
</script>

[kironet]

Its better use original lightbox then this. Looks like, they're not planning to fix this bug.

[ashleydw]

fyi, you can probably fix this by removing the css transitions

[tmarco-wo]

I got exactly the same issue... is a fix coming up in the near future? thx

[tmarco-wo]

I used the CSS fix from the issue#252 thread, 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!

[10robinho]

I fixed this issue by using non-minified version for current master.

[nophr]

Problem solved by @10robinho