banthagroup / fslightbox Goto Github PK

An easy to use vanilla JavaScript plug-in without production dependencies for displaying images, videos, or, through custom sources, anything you want in a clean overlying box.

License: MIT License

JavaScript 98.72% HTML 1.28%

gallery lightbox modal vanilla-javascript vanilla-js

fslightbox's Introduction

Vanilla JavaScript Fullscreen Lightbox Basic

Description

A vanilla JavaScript plug-in without production dependencies for displaying images, videos, or, through custom sources, anything you want in a clean overlying box. The project's website: https://fslightbox.com.

Installation

Through an archive downloaded from the website.

Just before the end of the <body> tag:

<script src="fslightbox.js"></script>

Or, through a package manager.

npm install fslightbox

And import it in your project's JavaScript file, for example through the Node.js "require" function:

require("fslightbox")

Basic usage

<a data-fslightbox="gallery" href="https://i.imgur.com/fsyrScY.jpg">
	Open the first slide (an image)
</a>
<a 
	data-fslightbox="gallery"
	href="https://www.youtube.com/watch?v=xshEZzpS4CQ"
>
	Open the second slide (a YouTube video)
</a>
<a
	data-fslightbox="gallery"
	href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
>
	Open the third slide (an HTML video)
</a>
<a data-fslightbox="gallery" href="#vimeo">
	Open the fourth slide (a Vimeo video—a custom source)
</a>
<iframe
	id="vimeo"
	src="https://player.vimeo.com/video/22439234"
	width="1920px"
	height="1080px"
	frameBorder="0"
	allow="autoplay; fullscreen"
	allowFullScreen
></iframe>

Documentation

Available at: https://fslightbox.com/javascript/documentation.

Demo

Available at: https://fslightbox.com/javascript.

Browser Compatibility

Browser	Works?
Chrome	Yes
Firefox	Yes
Opera	Yes
Safari	Yes
Edge	Yes
IE 11	Yes

fslightbox's People

Contributors

Stargazers

Watchers

fslightbox's Issues

Add support for image srcset

Especially on mobile it would be a performance advantage if the Lightbox would supports the img srcset and thus reduces the loading time for the user.

[Pro] Feature Request - Data option to disable zoom

Forgive me if there's already documentation on this but I couldn't find anything. Is there an option to disable zoom?

Cannot get the width of iframe content

Hi.

I'm trying to iframe a web page but all I can get is a very narrow view:

This is my code:

<a data-fslightbox="lightbox" data-class="d-block" href="#learnpress">Preview</a>
<iframe
    src="{{ lp.preview }}"
    id="learnpress"
    class="d-none"
    width="1920"
    height="1080"
    allow="fullscreen">
</iframe>

Cheers.

double right click freezing site - react pro version

Hey, we have an issue with fsLightbox pro version, the same issue exist on demo page.

steps to replicate :
double tap right click on gallery and you should have frozen page.

issue video :

https://www.youtube.com/watch?v=Y9uCcqfIyAI

Option to disable inject styles into document?

Hi, firstly, thanks for a lightweight option to Fancybox, I'm looking at replacing Fancybox with this better alternative as I remove dependency of jQuery for front end users in the CMS I built (AuroraCMS).

I would have liked to use the Pro version, but I believe the licensing, even if purchased would restrict that, for multiple sites.

I would, however, like to be able to restyle some of the styles to suite client website themes. I had a quick look through the source, and the documentation, but couldn't find an option to turn off injecting the styling into the document.

Is this something we can have added for future releases, with an optional output when building the source to include a stylesheet?

I can of course simply remove the markup that's injected into the document, but I don't want to have to modify your code every time there's a release.

TIA

Watermark the image

Hello!

I'm running the Pro version and it's a great piece of kit! Congratulations!

I'm working with a client who is adamant they want to watermark their images. I have talked them out of adding the watermark to the image itself, and instead I am overlaying their logo on to the image across the site. Watermarking is obviously not fool-proof and images are still very steal-able, but I am doing a few things to reduce how easy it is to take them.

When it comes to FSLightbox, is there a simple way to add an overlaid-logo similar to a watermark with code? Or is that simply not possible as I am thinking. If not, they will either need to watermark the actual image or accept we can't do it this way.

Cheers!

Mouse drag and thumbs mouse click not working (probably faulty mobile detection)

Hi,

were using Vanilla Lightbox Pro and I've noticed that on pc the gallery is working only by using nav buttons, arrows or keyboard. Neither swiping by mouse nor quick navigation in gallery by clicking on thumb. It makes the whole gallery look like it's broken. Why is it working in free version and not in paied one? (free version doesnt have thumbs but that's not the point). I guess it's the problem with mobile device detection. I've found bit of a code in source

"ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0

which gives me true on chrome | firefox and from there on I believe this ruins the whole UX on desktop devices (not necessarily authors fault for something may have changed in browsers) I have used similar detection on one of my own project and had to remove the touchoptions check entirely because all devices was suddenly treated as touchdevices. Any advice or fixing the problem would be so great for we love this package despite this little stain.

Custom selector for initializing lightbox?

Hey there,

I'm really keen to use your lightbox library but I've run into the limitation that I can't trigger it using a custom selector.
Unfortunately I have no influence on the link markup wrapped around the images, so I can't add the data attribute directly. I also wanted to avoid adding the data attribute programmatically if possible.

Is there a way to use a custom selector?

Thanks!

Re-Init after ajax load

Hello!

Thanks so much for this wonderful plugin. Amazing work!

Is there a way to re-initialize fslightbox on [data-fslightbox] elements after they've been loaded to the DOM dynamically. In my particular case I'm using a plugin called swup js https://swup.js.org

Add prop to specify alt tags like captions

I'm building a website that requires good website accessibility and one of the big things is having good alt tags for images. Right now it seems the alt tag for an image in the slideshow is the URL to the image.

Would it be possible to include a prop that allows me to specify the alt tags for images that are in the slideshow, similar to how I can do captions possibly?

Autoplay parameter for Youtube

How can I pass a parameter to auto play youtube video? When I attach it to the url in href - it gets stripped. Is there a data attribute that I can pass to force autoplay?

In Fancybox there are some default parameters (autoplay enabled by default) that are set unless there are parameters in the url

Not works with the localhost images URLS

I'm trying render my image from my database and the Cors problem is gone but still not previewed the image in the lightbox

i'm use my localhost rest api

[PRO] the fullscreen title strings are not used

setting fsLightbox.props.toolbarButtons.fullscreen.(enter|exit).title doesn't change the title of the fullscreen button (all other buttons title work correctly)

[QUESTION] Destrony method?

Hey,

Is there any method that allow to destrony/unser/remove or smth created instance?

[SOLVED] Not works with Google Cloud Storage images URLS

I'm trying to render a gallery imagem from Google Cloud Storage, and when lightbox open, return "Invalid source".

Example of image URL
https://storage.googleapis.com/sellers-pictures/f1305769-2965-43ba-ba30-cd7a8ce2a647.jpg

[Pro] Click on thumbnails is broken

Hello,
We used to be able to click on the thumbnails at the bottom of the lightbox to browse the photos but it seems broken now.
We are using the Vanilla pro version 3.3.0, but it is also broken on the demo pages of Vue and React versions.

Steps to reproduce:
The bug can be reproduced in the demo pages of fslightbox.

On the Vue or React pro demo, click on one of the picture to open the lightbox
Click on the thumbnails icon in the tool nav.
Click on one of the thumbs at the bottom.
Nothing happens

Accessibility requirements

Hiya,

Using the JS Pro version of the library, am noting some accessibility issues and wondering if there is anything on your roadmap to address these?

Some things I've noticed -

Lightbox buttons are div elements rather than buttons.
No tab navigation on lightbox when opened, tabbing continues in the rest of the page
Caption/description isn't picked up by audio description software

Cheers
Harry

warning using will-change css property

I'm using the fslightbox package but this show a warning

Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (1156320 px). Occurrences of will-change over the budget will be ignored.

This occurs in the css:

will-change: opacity;

Can´t open with only 1 image

Hi,
I am facing issue, that I can´t open fslightbox when there is only 1 image in it.
Multiple images works fine.

Html code:
https://pastebin.com/e8rBJeKz

Error code:
fslightbox.js:1 Uncaught TypeError: n.setSlideNumber is not a function at Object.i.open (fslightbox.js:1) at window.FsLightbox.open (fslightbox.js:1) at HTMLAnchorElement.e.<computed>.onclick (fslightbox.js:1) i.open @ fslightbox.js:1 open @ fslightbox.js:1 e.<computed>.onclick @ fslightbox.js:1

Thanks for any help

Stop/pause videos on slide change

When I change the video on a video slideshow, the current video continues playing, and if i play another video both sound at same time.

It's possible to stop the previous video on change?

fsLightbox not working with dynamic attribute

Hi!

I have problem with initialize fsLightbox after adding random gallery id to anchor.

Unfortunately, I do not see the function or method in documentation responsible for refreshing the gallery elements.
If I'm wrong please give me a hint how to do it.

My code:

let gallery_sliders = document.querySelectorAll('.gallery-slider-wrapper');
gallery_sliders.forEach(function(el){
      let uuid = create_UUID(); // There I call function generate uuid
      let gallery_slider_btn_prev = el.querySelector('.gallery-slider-button.prev');
      let gallery_slider_btn_next = el.querySelector('.gallery-slider-button.next');
      let gallery_slider_el = el.querySelector('.gallery-slider');
      let imgs_link = gallery_slider_el.querySelectorAll('a');

      let gallery_slider = tns({
            container: gallery_slider_el,
            items: 1,
            gutter: 20,
            nav: false,
            loop: false,
            mouseDrag: true,
            prevButton: gallery_slider_btn_prev,
            nextButton: gallery_slider_btn_next,
            responsive: {
                  640: {
                        items: 2
                  },
                  700: {
                        items: 3
                  },
                  900: {
                        items: 4
                  }
            }
      });

      imgs_link.forEach(function(el){
            el.setAttribute('data-fslightbox', `gallery-${uuid}`);
            el.dataset.fslightbox = `gallery-${uuid}`;
            fsLightbox.init(-1); 
            console.log(el);
      });
});

Possible to scroll zoom on images?

Broad CSS properties messing with CSS frameworks

Hi there,

Love what you've done with this, you've made a really great lightbox! One small nit-pick is that those of us using TailwindCSS are running into a few css conflicts (primarily .hidden). It'd be great it some of the targeted css properties could have a narrower scope and preferably load in from an external stylesheet.

Thanks for your hard work!
Alex

[FR] Is there any option to enable HTML5 Video 'autoplay'?

I use react verison of fslightbox.

Change the default font family

Hi,

I'm trying to change the default font family used because the Roboto is only used for this library on the website i'm working on and i wanted to avoid that extra request.

From what i understood the CSS styles are injected from JS. I'm developing a WP theme with Sage Roots and importing the library but i can't find any option in the ES module to change it.

Am i able to disable the injection of the CSS using JS? That way i may be able to use a variable in Container.scss to define the font-family and replace it, then i would import the SASS styles.

What do you think about it?

Thanks in advance!

Unclear Pro license terms for use on public site.

I'm unclear how I'm supposed to use the Pro version once I purchase a license.

Your plain JavaScript demo for Pro says:

As there is no way to protect js code on website Vanilla Javascript pro version demo is not available.

Huh? But if I purchase and use the Pro version on my own website, it would be available via download (it would have to be to work in the browser!) just like the demo, right?

I also read the license terms:

You cannot … offer the file downloaded directly or non-directly to any other third party (people, NGO's, companies).

But again, just using the Pro version on a public site would be definition be offering it to be downloaded by people, right?

I'm confused. Are you saying that we may not use the Pro version on a public website?

Android - fsLightbox react pro issue, Android need duble click to exit fullscreen mode

Hey,
we have another problem with react fslightbox pro.
Open image with fslighbox pro on Android device, tap fullscreen icon and next try to exit fullscreen mode. You need duble tap this icon to exit this mode.
Video with issue :

https://www.youtube.com/watch?v=GDFuU6wJgKk

Close on swipe up feature requrest

It will be amazing if the lightbox could close with gestures, for example swipe up, and using some cool transition to fade it out and scale.

Great work, amazing Lightbox, i´m going to puchase a pro license.

Every time any lightbox is open it scrolls page to up

Hi,

Thanks for the library. It's great.
but I am having one issue that whenever any lightbox is opened it scroll up page.
any solution for this

Function refreshFsLightbox is not defined

the latest version in NPM (^3.0.6) uses updateFsLightbox.

Zoom via gestures on mobile

Could you clarify your support for zoom using gestures (spreading and pinching) on mobile?

I'm trying to decide between fslightbox and nanogallery2. I want to use the Vanilla JavaScript product, and I have absolutely no problem paying for your Pro version.

nanogallery2 has smooth zooming on mobile by using the standard spread and pinch gestures with your thumb and finger. But the fslightbox Plain Vanilla demo didn't seem to support zoom. When I tried to zoom in the standard view, it actually zoomed the whole browser display, including the content behind the lightbox. In fullscreen mode, I couldn't get zoom to work at all.

The fslightbox React Pro demo did support zoom gestures on mobile (although it was a little clunky compared to nanogallery2). But I don't want to use React. I like that you provide your product in a plain JavaScript library with no need for JQuery or even CSS.

Can you clarify whether your Plain Vanilla fslightbox product supports zooming on mobile using gestures, and whether it is in the free or Pro version only? Thank you.

Allow having captions and thumbnails at the same time

Hello!
It would be nice to be able to see captions while showing the thumbnails. At the moment we can only see one or the other.

I tried displaying the thumbnails and then changing the opacity and position of the caption in css, but the style applies to all captions and not only the active one. Normally the active caption has the fslightbox-caption-active class, but when the thumbnails are shown the class is never set.

Thanks!

I just want to thank for this package! It's simple, works, doesn't need jQuery as a dependency. Exactly what I needed.

(just that. closing.)

Adding youtube url start/end time

Hi, is there a way to add a YouTube url with start/end time into the lightbox?

https://www.youtube.com/embed/video-id?start=5&end=13

https://www.youtube.com/watch?v=video-id&t=5s

Thank you for this amazing tool

Images often only partially load on iOS based browsers

OS: iOS 13.6
Browser: Safari and also Edge for iOS
Version: Basic edition via standard JavaScript import (e.g. <script src="fslightbox.js"></script>)

I haven't observed this happening on Windows based browsers, but quite often when using iOS browsers, the loading indicator displays for a second or two, and then shows an image that's only 40-60% complete. Moving to the next image does not resolve it, but scrolling over several images (then returning) often corrects it.

I'll often see this happen on many of the first pictures in a gallery, but not the images further down in the list.

Attached images showing presence / absence of the bug

Include src in distribution

After npm install --save-dev fslightbox I have node_modules/fslightbox with just index.js.

It would be nice to have also node_modules/fslightbox/src folder with scss and js files so I will be able to include these scss files in my build process. For example, I would be able to load only minimum lightbox without Video support, without YouTube support, without toolbar etc.

This scss folder could contain settings.scss file with variables for override, so I will be able to define my own background colors, arrows color etc.

This approach is able with Bootstrap 4 or with PhotoSwipe.

Pro version doesn't support Vimeo

The latest Basic version build available supports Vimeo but the Pro version does not.

Version 3.2.0+ breaks when using attributes like "style" or anything not pre-pended with `data`

https://github.com/banthagroup/fslightbox/blob/master/src/index.js#L65 Looks like this introduced a regression. I have anchor elements with a style attribute, and it breaks, as it registers a "" attribute, and when it tries to set it, it fails due to that not being a valid attribute name. This should be changed to ensure that the attribute is prefaced with data before registering it.

Change arrow icons

Is there any way how to change the arrow's SVG and toolbar icons SVG? Thanks

Question: Possible to specify/customize the Zoom increment?

I am a Pro user and want to know if it is possible to increase the Zoom increment. Here is the way I am using it.

HTML:

<a data-fslightbox="air-lightbox" data-type="image" data-caption="L. Baker 1903" href="/property-img/vintage-aerials-pvd/pvd-1903-unlabelled.jpg" role="button" aria-label="Link opens image in a larger pop-over">
  <img src="/property-img/vintage-aerials-pvd/pvd-1903-unlabelled.jpg" alt="" loading="eager">
</a>

Pretty simple. Only one working customization so far to the slideshow timing:

fsLightboxInstances['air-lightbox'].props.slideshowTime = 6000;

Thanks for any pointers.

Time loading a gallery

Hi, I am try use fslightbox for a photo gallery, but take so much time the loading of each photo. Is it coming with lazy load or other system for optimise the wight oh the photo? thanks

Youtube full screen and safari

Hello,
there a problem with safari, when you activate full screen mode from youtube iframe some partes of the site pop up over the video.
You can see it in your demo site too. The menu pop in front of the video.
I have a similar problem and I think it is related to elements with absolute/fixed position.
Any suggestions? Thank you

Hide slider buttons and disable swiping

Hi!

For a specific use case, I would like users to not be able to swipe to change the slide. Also I'd like to hide the previous/next buttons (I added links to the page that will open a specific slide and I'd like the user to navigate using those).

Is this possible?

Thanks!

Lightbox doesn't work if target has an uppercase file extension

Hi,

Thanks for the library. It's great.

This doesn't work:

<a data-fslightbox href="img/nov-20/Forstmulchen%20(Gross).JPG">
                <img src="img/nov-20/Forstmulchen%20(Handy).JPG">
            </a>

This works (given that you rename the file and make the JPG lowercase)

<a data-fslightbox href="img/nov-20/Forstmulchen%20(Gross).jpg">
                <img src="img/nov-20/Forstmulchen%20(Handy).JPG">
            </a>

In the first case, it displays the message "Invalid source" when opening the lightbox, even though there is no reason uppercase file extensions should be disallowed.

If you confirm, I'm happy to submit a PR.

Is it possible to show HTML

Is it possible to show HTML in the popup?
Something like this now gives a "invalid file" message:

<a href="#my-popup">Open popup</a>
<div class="hidden">
   <div id="my-popup">
      Hello world.
   </div>
</div>

Is it possible to programmatically open image in lightbox?

I was wondering if it's possible to open images in the lightbox using script commands like:

fsLightbox('<url to image>');

I figure the command would be different if this is possible. I'm hoping to bypass the ugly quick display to view larger images when clicking on the thumbnail images in elFinder.

sourceIndex doesnot work properly

Hi,
I have an image gallery. I am opening lightbox when the user clicks on any of the images and I am passing the Index of the images array to Lightbox. At first, it opens the Lightbox with the right image. But when I move images in the lightbox and close it then if I open it again it opens at the last image the where I closed the lightbox. So basically it is not updating the shouceIndex after closing the lightbox.

How to load pictures encoded with base64

I'd like to load picture not as URL strings, but as an encoded string, for example data:image/jpeg;base64,[......]. Is it possible in any way?
Thanks

Pro React demo sometimes needs second click on image to show

I've just tried the React Pro demo here with the carousel and observed that I some time had to click on images a second time for them to appear as the featured image.

I'm using Chrome Version 88.0.4324.150 on Mac OS 11.3 beta.

Great job on putting this together!

For custom toolbar icons, get properties from open image

E.g. to add a delete action, we need to know the URL / id of the current photo. Is this possible. Is it possible to pass the image object for the open/active image to the function being called?

https://fslightbox.com/javascript/documentation/toolbar

banthagroup / fslightbox Goto Github PK

fslightbox's Introduction

Vanilla JavaScript Fullscreen Lightbox Basic

Description

Installation

Through an archive downloaded from the website.

Or, through a package manager.

Basic usage

Documentation

Demo

Browser Compatibility

fslightbox's People

Contributors

Stargazers

Watchers

Forkers

fslightbox's Issues

Recommend Projects

Recommend Topics

Recommend Org