feimosi / baguettebox.js Goto Github PK

Would be nice if we could install it with bower.io!

Responsive images never fall back to default href. Image with the biggest size specified by data-at attribute is used instead.

I think the problem is on lines 356-360:

// Find the first image bigger than or equal to the current width
var i = 0;
while(i < keys.length - 1 && keys[i] < width)
    i++;
result = srcs[keys[i]] || result;

While loop stop before checking the last key (i < keys.length - 1) thus there is always some result taken from srcs object. I suggest changing the condition to i < keys.length. Then i will overflow array size, undefined will be returned from srcs and result will be taken from fallback.

I use baguetteBox in app with front-end routing and need init baguetteBox on different routes. As I use front-end routing page doesn't reload between initialization so keydown event handler appears to be bound more than once.
Actually it even doesn't make sense to bind key events when overlay is hidden so my suggestion is bind keydown only when overlay is displayed and unbind after it's hidden.

Should unbind events from all used galleries.

More of a feature request than issue.

Wondering if there could be some sort of check for the 'a' element in the gallery to make sure it contains a link to an image. Then we could run baguetteBox on an element that contains both image links and standard links.

I think why it's not available because of the wrong Semver pattern. Should be v1.0.0, not v.1.0.0.

Since a video is better than words, attached is a demonstration.

https://dl.dropboxusercontent.com/u/3607425/2016-03-29_18-16-45.mp4

My browser is Firefox 46.0b5 on Windows x64 but I see the same with Microsoft Edge.

Settings:

baguetteBox.run(selector, {
    async: false,
    buttons: "auto",
    noScrollbars: true
});

The code if you cannot reproduce this is in this branch here https://github.com/mpc-hc/mpc-hc.org/compare/baguetteBox.js

Hi, can you add callback options like afterShow and afterHide? I append <button> inside data-caption and but the button listener isn't triggered when the <button> is clicked because the button was appended on the fly. Adding afterShow callback might fix this issue.

Example:

<a href="image.jpg" data-caption="<button>Click to download</button>">
    <img src="thumbnail.jpg">
</a>

baguetteBox.run('.gallery', {
    afterShow: function () {
        // btn.addEventListener();
    }
});

To hide scroll bars current solution is
document.body.style.overflow = 'hidden';
But in this case in some browsers (firefox & chrome) the page content rebuilding to refill all window width.

I've been hid scroll bars with this code:

/* for html tag */
document.documentElement.style.overflowY = 'hidden'; 
/* for body tag */
document.body.style.overflowY = 'scroll';

in context:

function showOverlay(chosenImageIndex) {
    /*if(options.noScrollbars)
        document.body.style.overflow = 'hidden';*/
    if(overlay.style.display === 'block') {
        return;
    }
    bind(document, 'keydown', keyDownHandler);
    currentIndex = chosenImageIndex;
    loadImage(currentIndex, function() {
        preloadNext(currentIndex);
        preloadPrev(currentIndex);
    });     

    updateOffset();
    overlay.style.display = 'block';
    if(options.fullScreen)
        enterFullScreen();
    // Fade in overlay
    setTimeout(function() {
        overlay.className = 'visible';
        if(options.afterShow)
            options.afterShow();
        /*kir*/document.documentElement.style.overflowY = 'hidden';
        /*kir*/document.body.style.overflowY = 'scroll';
    }, 50);
    if(options.onChange)
        options.onChange(currentIndex, imagesElements.length);
}

function hideOverlay() {
    /*if(options.noScrollbars)
        document.body.style.overflow = 'auto';*/
    if(overlay.style.display === 'none') {
        return;
    }

    unbind(document, 'keydown', keyDownHandler);
    // Fade out and hide the overlay
    overlay.className = '';
    setTimeout(function() {
        overlay.style.display = 'none';
        exitFullscreen();
        /*kir*/document.documentElement.style.overflowY = 'auto';
        /*kir*/document.body.style.overflowY = 'auto';
        if(options.afterHide)
            options.afterHide();
    }, 500);
}

Live demo on http://kirillaristov.com/en/my-routes/as-the-first-settlers/photos/fav (any clickable image)

This is my first experience in github, sorry if something is wrong.

(Marek, thank you for your project! This is very cool lightbox!)

Very interesting project. It could be useful to add a "carousel" option to cycle from the last image to the first (or from the first to the last image). Obviously the last or first image "bounce effect" should be disabled when the carousel option is active. Thank you

Hi,

I'm using baguetteBox.js for image gallery. I want to auto scroll of images on pop up window.

A quick help on this would be appreciated.

thanks,
Sam Ambler

The plugin seems to fail when running with Prototype.js (my particular project uses Magento, which is dependent on prototype.js, otherwise I'd ditch prototype for sure).

If i have a link to an image that doesn't end with your regex for image matching the image will not be displayed

Hi there,
I apologise if this is a dumb question, I am no coder...
How could I use the baguetteBox in such a way that a gallery would be triggered by a single image?...
I have tried adding the href code on the first image, and afterwards insert the code only for the following images, but this gets faulty results, sometimes it works, sometime it doesn't... :)
(I tried this solution, because it actually works with another script I used in the past)
Any hint would be greatly appreciated...
Thank you so much,
Ana

As subject, is this possible somehow ?

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

I have implemented baguette box on a one of our sites http://www.lbar.com, and it works for some of the smaller profiles, but when we start to use more pictures baguette box will crash on mobile devices. An example to look at is http://www.lbar.com/property/2001-Winchester-Road-Paris-KY-40361_1519425.html. I have tried lowering the preloader to 0, but I am still crashing.

The following works, copied from the build folder (of course changed the path on an image for local testing).

However when I call the same class 'baguetteBoxOne' on an anchor/image inside ng-repeat it doesn't work. Any work around? I'm a novice at JS so I don't know if I will be able to assist very much on the issue.

 <div class="baguetteBoxOne gallery">
                    <a href="img/1-1.jpg" data-caption="Golden Gate Bridge"><img src="img/thumbs/1-1.jpg"></a>
                    <a href="img/1-2.jpg" title="Midnight City"><img src="img/thumbs/1-2.jpg"></a>
                    <a href="../images/SouthernRebels Logo.jpg"><img src="../images/SouthernRebelsLogo75px.jpg"></a>
                    <a href="img/1-4.jpg"><img src="img/thumbs/1-4.jpg"></a>
                    <a href="img/1-5.jpg"><img src="img/thumbs/1-5.jpg"></a>
                    <a href="img/1-6.jpg"><img src="img/thumbs/1-6.jpg"></a>
                    <a href="img/1-7.jpg"><img src="img/thumbs/1-7.jpg"></a>
                    <a href="img/1-8.jpg"><img src="img/thumbs/1-8.jpg"></a>
                </div>

The next snippet is the code in the repeater:

  <tr ng-repeat="u in Users" ng-style="{'color': (u.Status == false ? 'red' : '')}">
                            <td class="baguetteBoxOne">
                                <!--<img ng-show="u.ImagePath == null || u.ImagePath == 'null'" src="../images/avatar.jpg" width="50" height="50" />-->
                                <a class="single-popup" href="{{u.ImagePath}}" title="{{u.Username}}'s Profile Pic">
                                    <img ng-src="{{u.ImagePath}}" width="50" height="50" />
                                </a>
                            </td>

Hi!

Is it possible to add an option, to be able to close the lightbox if you click the open image or maybe if you swipe up, like it is popular now with mobile apps?

Regards,
Matej

Is there any method that i can use to add thumbnails inside the lightbox for better navigation? Thanks.

From the current html output the figcaption is by default full width at the bottom.
It doesnt seem possible to set the width of this to match the width of the image across the bottom
eg https://www.dropbox.com/s/ezhoifb8kmxz13i/Screenshot%202016-02-15%2018.32.10.png?dl=0
Is it possible to add a wrapper to the image in which to target the caption information so that it inherits the same width?

It looks like there's currently no way to show images programmatically.

I.e., the following is not possible, as far as I can tell.

baguetteBox.run('myimage.jpg');

or

baguetteBox.showImage({src:'myimage.jpg', caption: 'whatever'});

Having this ability would allow for easier integration with other scripts and custom markup.

I managed to bastardize a new "showImage" function for myself out of what's available, but such a simple addition could make this script a lot more useful to other people too, I think.

Hi.
I don't know if this is the right place to post this.

Would it be possible to add a download option to the gallery? where a user could click a download button and it would download a full resolution image defined for E.g. data-download="{{path to high resolution 4K PNG image}}"

I currently have some 4k resolution artwork that I don't want to load when you open the gallery but instead provide a download button linking to it.

Cheers,
Jack

P.S This plugin is great!

Hello!

I'm using version 38.0.21.2125.24 beta-m (64-bit) Chrome and when I click close, continues to overlay. When you select something on the page it fades away, like rendering problem. It is Chrome? Had a recent update. I could not test in another version of Chrome, but testing on other browsers and all is right.

PS. Always used the beta version of Chrome. Had a recent update for 64-bit and other corrections.

Any plan to add a navigation feature? I think that can be very useful.

It might look to something like this:

Thanks for the great lightbox!

I wonder if I am able to insert <a> inside the caption. Now I can achieve what I need by doing this

<a id="baguette" href="path-to-img" data-caption="Hi, I'm <a href='#'>clickable<a>">
    <img src="path-to-img">
</a>

I'm sure there is a better way to do that. What you thing about it?

is there any options make that when the picture isn't loaded completely, keep the picture invisible (just loading effect)?
Thank you very much. The Script is simple and nice !

OSX Mavericks, latest Chrome.

After opening up a picture in the lightbox, when you first move your mouse, the black overlay briefly turns off then back on. Here is a gif showing this:

Hello @feimosi , congrats for this nice piece of code ! I meant it, simple, responsive and touch friendly 👍

I'm trying to trigger the display of the overlay + first image on click on another element (completely outside of the gallery element).

I have tried, with the help of jQuery

$('.item').first().trigger('click');

with no success. Do you have any tip or idea to do that ?

Thank you for your help.

Hi,
is it possible to force text wrapping of the captions?
When the text is too long or when the window is too small the caption simply goes out of view because it stays as a single line.
I have tried playing with the css file, in particular with the #baguetteBox-overlay .full-image figcaption {} but couldn't find a solution by myself...any help?
Thanks,

Stefano

Please can switch images without effect (animation: false).
Сделайте пожалуйста возможность переключения изображений без эффекта (animation: false).

Thank you!
Благодарю.

This plugin is offered as an npm package but it doesn't support AMD or CommonJS. How comes? :)

• README
• Demo page

line 160
imagedEventHandlers[imageElement] = imageElementClickHandler;

when there has two or more img element is the same then can not unbind it because the imageElementClickHandler is not the same

can change it to
imagedEventHandlers[galleryID+'__'+imageIndex] = imageElementClickHandler;
?

Unfortunately this makes the plugin useless for me, even though it is very nice. I needed to use it as a component in a single-page app.

Any chance for video support? I know it wouldn't be easy but even the ability to use the default html video player in the lightbox would rock

Hi, how can i customize buttons/arrows? Ths

Fantastic, minimal, very nicely designed script here!

Just running into one annoying bug.. it seems to be breaking when using on a page where the images within the '.gallery' div grow dynamically. I'm building a sort of drag + drop image displaying tool and the script works great for contents already in the gallery.. but the minute I add a new content and try to click on something I get this error in the log:

[Error] NotFoundError: DOM Exception 8: An attempt was made to reference a Node in a context where it does not exist.
removeChild (baguetteBox.min.js, line 7:3867)
onload (baguetteBox.min.js, line 7:3867)

I'm trying to do the baguetteBox.run() code on each time I load new contents.. (probably wrong) also tried first destroying it then re-running it to no avail. Also tested turning 'async' on, but no go. With another lightbox or lytebox, I recall being able to simply re-init the thing with new contents coming in– however your design is really elegant and jquery-free! Any tips? or something obvious I'm missing?

if a video work that prices would not be this script!

Hey, thank you for your nice work!

What about something similar to MagnificPopups delegate option?
It's used to tell which links are used to open the modal.
So you can have
baguetteBox.run('.gallery', {
delegate: '.modal'
});
so only links with "modal" class are considered within gallery (of course still checked if any image is present)
so you could have some image excluded, think this would be nice :)

Hi there,

I would like to return the slide back to the first gallery image.

Currently, when you get to the last image, the user gets 'stuck'.

Please provide support on how to fix this?

So this is weird :/ In my main OS, Windows 10 64-bit, the buttons don't show up in auto mode.

On my Windows 7 VM they show up. Something must be different in the touch detection.

Can you update to the newest version?
Maybe combine the gulp bump-patch task with npm publish to keep it always sync.

Hello @feimosi they nice lib)

I was interested then trying use with image placeholder services, where gallery builded unexpectedly.
So after debug i find image filter that works by regex rule /.+\.(gif|jpe?g|png|webp)/i

May be add custom filter?

baguetteBox.run('.gallery', {
  filter: new RegExp('.+\.(gif|jpe?g|png|webp)', 'i')
});

and to skip filtering

baguetteBox.run('.gallery', {
  filter: null
});

when the image is opened in the popup screen, zooming is disabled or almost unusable. since the mobile width is short so if u could add zooming enhancement, it would be a great experience for user to zoom in the opened image.
thanks

Clicking on the figcaption dismiss the lightbox. I don't know if that is an intended behavior, but this prevent user to select or highlight texts from the caption.

Hello!

I have 4 new features to your code:

-- titleTag - copy title tag from thumbnail to main image; this one is good for copyright notice, but to have fullscreen photos

-- removeButtonsAfter - remove navigation and close buttons after some idle time and show them on mousemove; this one is very good when using keyborad navigation

-- noScrollbars - remove scrollbars from body element while displaying image in overlay

-- fullScreen - display overlay in full screen

All features are disabled by default and can be set using options object while calling run().

Modified file is available here: http://malizwrk.net/baguetteBox-v1.4.2/baguetteBox-H.Lo.js
Live demo is available here: http://malizwrk.net/gallery/

Tried to write code in your style.

I finally found a great pure Javascript image plugin! Thank you!

It seems loading spinner stays for few more seconds after completion of image. In one case it remained for ever (I use latest FF).

PS:
As a feature request do you think about zoom effect? Something like https://github.com/bmcmahen/image-zoom or Fluidbox