Click image > next about baguettebox.js

[feimosi]

Hi,
I was thinking about that feature at the beginning, but then it came to
my mind that I'd need some kind of overlay over the image, what could
prevent right-click mouse actions like 'save image as', so I gave up
that idea.

Regarding the arrows, it's impossible with CSS as they're hardcoded as
SVG in the .js file. Of course you can always change the color by
modifying that file, but I'll think about a new options' field in a
future release.

On 18-Apr-15 6:30 PM, bakman2 wrote:

As subject, is this possible somehow ?

Maybe also nice to make it possible to change the arrow colors via
options or css.

—
Reply to this email directly or view it on GitHub
#23.

[bakman2]

I am trying to fix it myself for the click.

I have added:

 bind(overlay, 'click', function(event) {
        showNextImage();
    });

This works, except when using touch outside the overlay, it will exit the lightbox while going to the next image.

[bakman2]

fix:

  bind(overlay, 'click', function(event) {
        if(event.target && event.target.nodeName !== 'IMG' && event.target.nodeName !== 'FIGCAPTION'){
            hideOverlay();
        }
        else{
            showNextImage();
        }
    });

[feimosi]

I see, but this works only for moving forward. It's more common when you have the image divided into two-clickable areas.
Anyway I don't see the need for that in this script, but feel free to use it yourself.
Regards

[bakman2]

agreed. it works for me.

btw in Safari on OSX 10.10 the gallery behaves quite slow and stutters, would could be the cause of this ?

[bakman2]

Example: www.richardbakker.com

[feimosi]

hmm hard to say, unfortunately I don't have access to OSX to test that. If it happens only on Safari, you could check out older / newer versions. The animations are based on CSS transitions, so it may be some rendering engine problem.

[bakman2]

It happens on chrome as well albeit a little better.

[feimosi]

That's strange, but there's not much I can do right now.

[bakman2]

Strange indeed. It appears to be caused by the loading-spinner.
I have commented it out and it works perfectly now:

   // figure.innerHTML = '<div class="spinner">' +
    //     '<div class="double-bounce1"></div>' +
    //     '<div class="double-bounce2"></div>' +
    //     '</div>';
   // var spinner = document.querySelector('#baguette-img-' + index + ' .spinner');
        // figure.removeChild(spinner);

[feimosi]

Ok, I see, so it looks like the rendering engine can't hold it all. Strange as the spinner is a simple css animation.
I hope that's a temporary problem, because the only solution as you've noticed is to remove it entirely.

[bakman2]

I suspect it is not the animation, but creating/removing elements is quite expensive DOM manipulation.

[feimosi]

Any ideas how to optimize it? Considering that each image has its own loading spinner.

[feimosi]

Does the stuttering still occur on OSX?

Regarding the colors changing via options, I've been thinking about a possible solution, but unfortunately there isn't any reasonable one as it relies on css and :hover.

[feimosi]

@bakman2 can I close this issue? Couldn't be reproduced.