Navigating to another image is with delay

kironet commented 7 years ago

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 commented 7 years ago

Can you post a full page or jsfiddle?

noofaq commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

ashleydw commented 7 years ago

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

tmarco-wo commented 7 years ago

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

tmarco-wo commented 7 years ago

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 commented 7 years ago

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

nophr commented 7 years ago

Problem solved by @10robinho

ashleydw / lightbox

Navigating to another image is with delay #245