electerious / basiclightbox Goto Github PK

I would like this button

to close the window that the button is on!

Soi it is a simple pop iframe situation but the iframed content contains a button called CLOSE and when that is clicked, that should close the basicLightBox ( hence the iframe ).

So I got this basic set up.

<script>

var instance; // defines the variable instance as global var so both popWin and closeMe functions can refer to it. 

function popWin(theIframedContentThatHasACloseButton){
   var html = `<iframe width="100%" height="100%" style="width:100%;height:100%;" src="` + theIframedContentThatHasACloseButton + `" frameborder="0" allowfullscreen></iframe>   `;

   instance = basicLightbox.create(html).show(); // uses the global var "instance"

}


function closeMe(){
   alert('The close button is clicked'); // this works
   instance.close(); // this does not work. This should close the globally created instance but it does not! 
}

</script>

closeMe function does kick in as I get the alert but instance is not recognized.

Hey there,

I really like basicLightbox but the one feature I feel it's lacking is a gallery (i.e multiple pics with forward and back buttons).

I'm also using the swiper carousel so not sure if there is any easy way for me to integrate it with that.

Hey guys,
Just wondering if you can offer any suggestions on how to close a BasicLightbox popup that is an iFrame, without clicking on the space outside the popup?

I've tried getting all sorts of variations - using parent, top, window..... none of them seem to be access the calling window.

But perhaps the easier question is I know I need to call the close() method to close the window. But I need to bind that close() call to the basicLightBox instance that's been created.

Can anyone help?
Thanks
Josh

in my javascript file i import basicLightbox with import * as basicLightbox from './basicLightbox.js';, however when i have the minified version in place there, i get an Uncaught TypeError: basicLightbox.create is not a function where i call basicLightbox.create. with the plain source it works just fine.

I have just used the onClose event for the first time and I have an issue with the function I call via the onClose event producing a loop that ends in a maximum call stack exceeded error.

To clarify what I do: I create the popup via a function and that works fine. It checks if a cookie has been set with a value of "shown" and it only actually runs if that isn't found.

var promoPopup="";
function createPopup(){
    checkIfShown=readCookie("show_popup");
	if ( !checkIfShown || checkIfShown==null || checkIfShown!="shown"){
                promoPopup=basicLightbox.create(`
			<div id="promoPopupWrap">content of my popup</div>`, {
			onClose: (promoPopup) => {hidePromoPopup()},
		});
}

Then I have this seperate function that closes it which is what I am calling from the onClose event. I use this function because I need to now update the cookie to stop the popup appearing again

function hidePromoPopup(){
	promoPopup.close();
	setCookie("show_popup","shown","","/");
}

I am trying to add support for webp image formats with jpg fallbacks. When I write my listener like this the lightbox works as intended:

window.addEventListener('load', (event) => {
    document.querySelectorAll('.modal').forEach(image => {
        image.addEventListener('click', e => {
            basicLightbox.create(`
                <img src="` + image.getAttribute('data-image') + `.jpg">
            `).show();
        });
    });
});

However, when I write my listener like this, the lightbox does not close when I click on the image, only when I click on the background, making the lightbox difficult to close:

window.addEventListener('load', (event) => {
    document.querySelectorAll('.modal').forEach(image => {
        image.addEventListener('click', e => {
            basicLightbox.create(`

                <picture>
                    <source src="` + image.getAttribute('data-image') + `.webp" type="image/webp" srcset="
                        ` + image.getAttribute('data-image') + `.webp
                    ">
                    <img src="` + image.getAttribute('data-image') + `.jpg" data-image="{{image.path}}" srcset="
                        ` + image.getAttribute('data-image') + `.jpg
                    ">
                </picture>
            `).show();
        });
    });
});

I imagine this has something to do with the <picture> tag. Any thoughts on why this would be happening? Thanks

Hello there !

First of all, congratulations for this great plugin. I really like it :)

I want to share a suggestion on certain scenario. In my case, I usually use this plugin as a Lightbox, and I miss a feature to preload images before they are rendered.

If you have any plans to do this and I can help you doing it, please let me know, I will be glad to help.

Thank you in advance !

PS: I attach you the piece of code that I use. Sorry for jQuery, in the web I still use the traditional stack 🐼.

https://pastebin.com/R2GFbRii

When Youtube/Vimeo video Iframe is placed in inline html: https://jsfiddle.net/kalmerrautam/hmynv9qe/1/ video inside BasicLightbox doesn't scale while narrowing browser window.

Somehow it works perfectly while video ise placed in init script: https://jsfiddle.net/kalmerrautam/138td6mk/

Hi, great plugin!

Can you add a non minified version inside dist folder too? I'm using your plugin with Rider from JetBrains, but to auto-detect need to be a non minified version.

A demo for srcset support would be great!

Let's say I have 30 images in my content and I want to show them in a lightbox.

Then I would prefer something like this:

const instance = basicLightbox.create({
  selector: 'img.lightbox'
});

Something like above would then find all the images that has the class lightbox and then create a lightbox for all of them.

That's not possible today?

The documentation states that basicLightbox is compatible with Internet Explorer 11. However, the examples on the product page don't work in Internet Explorer 11.
https://basiclightbox.electerious.com/

IE Version Tested: 11.523.17134.0

The main console error that appear when clicking on any of the 'Run' buttons to demo the project is below:

Object doesn't support property or method 'from'
main.js (1,5323)

The documentation also has examples with arrow functions, which aren't supported in IE11.

Could the documentation be updated with a revised list of supported browsers, or clearer explanations for what's supported in the examples?

You're using requestAnimationFrame two times but without changing dom propriety from javascript.
I don't see how this can improve performance as you add class to animate dom element.

I can be wrong of course, if it's the case please light me candle 👍

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Hi!

First thank you for this very nice piece of code, sharp and clean!

Wondering if you could consider adding hashnavigation for the lightbox.

This script to do this kind of job but using jQuery:

https://github.com/sachinchoolur/lightGallery/blob/master/modules/lg-hash.js

What do you think?

del

Is it possible to limit the lightbox to a div container instead the fullscreen modal?

Looking at the demos it looks like there is some focus management missing on the modals. Here's what needs to be added to fix it:

• When a modal is open, focus should be sent to the modal (either on the element itself via .focus() and tabindex="-1" or sent to the first interactive element.

• When a modal is open, focus should be trapped inside the modal (so you can't access elements behind it when tabbing with the keyboard).

• When a modal is open, pressing the escape key should close the modal.

• It would be nice if the modals had an explicit close button with an accessible name (e.g. <button aria-label="close">X</button>.

• When a modal is closed, focus should be send back to the element which opened it.

An example of an accessible modal:
http://edenspiekermann.github.io/a11y-dialog/example/

The WAI-ARIA authoring practices guide on modals:
https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html

When I place radio buttons with labels inside BasicLightbox, then activating radio buttons with label click won't work.

Same radios with labels work perfectly when BasicLightbox is removed.

See fiddle: https://jsfiddle.net/kalmerrautam/8kvw76er/2/

Im trying to display a lightbox with some javascript but this doesn't work

Working example
basicLightbox.create('<div style="background-color:#fff;padding:10px;max-width:500px;border-radius:5px"><p>HTML</p><script type="text/javascript">alert("hello");</script></div>').show();

None working example
basicLightbox.create('<div style="background-color:#fff;padding:10px;max-width:500px;border-radius:5px"><p>HTML</p></div>').show();

Is it an issue?

When i try to put a tag, since i want to support webP, the image acts weird.

I have the lightbox calling an external site via the iframe functionality and this remote server is always rather slow returning a page. Whilst that is waiting I need to show some feedback to the user. Are there any examples of doing this with a loading graphic ?

The iframe lightbox doesn't scroll in iOS

Im trying to pass multiple classes to className like this:

className: 'class1 class2'

But getting the following error:

DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('class1 class2') contains HTML space characters, which are not valid in tokens.

Is there something Im missing? An option would be using the Spread Operator like shown here: https://stackoverflow.com/a/36486683/6085256

Hi again @electerious,

I'm apparently the only one around haha 😄 !

I was wondering if it's possible to change the main entry inside packages.json.
Actually it's pointing to the minified version of basicLightbox which is not good when building.

It should be better to change it for the the source version: src/script/main.js.

Thank you so much

i have a scenario where i would rather pass a programatically node to create than an html string. would you accept a patch providing this functionality?

Getting the following error in IE11 when using create with a template element.

Unable to get property 'cloneNode' of undefined or null reference

It looks like this is due to element.content on line 41 not existing on template elements in IE11.

Thanks for such a great API.

This feature is pretty easy to add, which I've been doing in onShow like this:

onShow: (instance) => {
	// Close when hitting escape.
	document.onkeydown = function(evt) {
		evt = evt || window.event;
		var isEscape = false;
		if ( "key" in evt ) {
			isEscape = ( evt.key === "Escape" || evt.key === "Esc" );
		} else {
			isEscape = ( evt.keyCode === 27 );
		}
		if ( isEscape ) {
			instance.close();
		}
	};
},

...but this seems to be the standard for modals, I wonder if it make sense in the official script?

Hi!
I have writted the index.d.ts file for basiclightbox. Please add it to the project so all typescript users can use basiclightbox with typescript 😄

(you can google how to add typings to your npm package, if you have troubles I can create the PR for you, it's just that atm I have no free time)

// Type definitions for basiclightbox 4.0.3
// Project: BasicLightBox
// Definitions by: Javier "Ciberman" Mora <https://github.com/jhm-ciberman>

declare module "basiclightbox" {


	export interface Options {
		/*
		 * Prevents the lightbox from closing when clicking its background.
		 */
		closable?: boolean;
		/*
		 * One or more space separated classes to be added to the basicLightbox element.
		 * Must be a string or a function which returns a string.
		 */
		className?: null | string | (() => string);
		/*
		 * Callback functions.
		 * Returning false will stop the caller function and prevent the lightbox from showing or closing.
		 */
		beforeShow?: ((instance: Instance) => (boolean | void));
		/*
		 * Callback functions.
		 * Returning false will stop the caller function and prevent the lightbox from showing or closing.
		 */
		afterShow?: ((instance: Instance) => (boolean | void));
		/*
		 * Callback functions.
		 * Returning false will stop the caller function and prevent the lightbox from showing or closing.
		 */
		beforeClose?: ((instance: Instance) => (boolean | void));
		/*
		 * Callback functions.
		 * Returning false will stop the caller function and prevent the lightbox from showing or closing.
		 */
		afterClose?: ((instance: Instance) => (boolean | void));
		/*
		 * String containing HTML or function which returns a string of HTML.
		 * Will be added before or after the content placeholder of the lightbox.
		 */
		beforePlaceholder?: string | (() => string);
		afterPlaceholder?: string | (() => string);
	}

	export interface Instance {
		/**
		 * Shows a lightbox instance.
		 * @param callback A function that gets executed as soon as the lightbox starts to fade in.
		 */
		show(callback?: () => void): void;
		/**
		 * Closes a lightbox instance.
		 * @param callback A function that gets executed as soon as the lightbox has been faded out.
		 */
		close(callback?: () => void): void;
		/**
		 * Returns true when the lightbox instance is visible. Also returns true when the lightbox is currently in the process of showing/hiding and not fully visible/hidden, yet.
		 */
		visible(): boolean;
		/**
		 * Returns the Node object associated with the instance.
		 */
		element(): Node;
	}

	/**
	 * Creates a new basicLightbox instance.
	 *
	 * Be sure to assign your instance to a variable. Using your instance, you can…
	 *
	 * …show and hide the lightbox.
	 * …check if the the lightbox is visible.
	 * …modify the content of the lightbox.
	 *
	 * @param html Content of the lightbox.
	 * @param opts An object of options.
	 */
	export function create(html: string, opts?: Options): Instance;

	/**
	 * Returns true when a lightbox is visible. Also returns true when a lightbox is currently in the process of showing/hiding and not fully visible/hidden, yet.
	 */
	export function visible(): boolean;
}

Having a really simple problem. I'm trying to generate via a function and find that the close command doesn't work.

So I define global variable, then within the function try to update it whenever called.

var popup="";
function testPopup(content){
	popup=basicLightbox.create(content+` - <span class="btnClose">CLOSE</span>`).show();
}

Then to catch the close button click...

$(document).ready(function() {
     $(document).on('click','.btnClose', function(event){
        popup.close();
    });
});

When I click the close button I get popup.close is not a function msgs.

On iOS Safari, if the two navigation bars are shown, 100vh is actually taller than the screen area available. So if you make a scrollable popup, it won't be possible to scroll down far enough to see all of the content.

In my site, just setting .basicLightbox's height to 100% instead seems to fix it.

How well are SVGs supported? Are SVGs scaled to fit correctly?
Some extra styles are necessary for most SVGs for fixing known browser annoyances.

Hi,

First thanks for this sharp and clean plugin 😄 !

I'm just wondering why you use .99 opacity for the main wrapper. All texts behind are slightly visible because of that. Is it possible to run opacity to 1?