script looks nice so far! Is there a way to have a gallery of images triggered from 1 text link, like "view gallery" that opens the images

I have a button, at the bottom of the page. I click it and a form pops up. Everything works great but when I close the popup, it snaps back down to the bottom of the site. Is there a way to stop this and just close the popup and stay where it is in the site?

Hi there! Love your little dimbox.

I would suggest a good improvement would be to trap focus inside the "modal" so TAB only travels through buttons inside it. As an example: https://micromodal.vercel.app/

Was reading this (https://dev.to/islam/how-to-trap-focus-inside-a-modal-2791) but I'm not js savy enough to modify your dimbox to do this.

Hi,

I really like this project and have started to implement it in a project, however when new images are added or removed from the DOM after the initial page load, there is no documented way to re-initialise the lightbox.

This renders it unsuitable for any project that uses javascript frameworks such as Vue.js or pages with dynamic content.

It would be great to be able to call a dimbox function and have it re-scan the page for dimbox elements.

Hello, first of all a great job with creating dimbox. Was having a play in codepen and for images was using images from my codepen assets resource, which meant images were "external" urls. When trying the "download" function, images were opening in a new tab rather than downloading. Trying the dimbox demo site, downloading an image works. I then proceded to adding a simple demo of dimbox on my server, and yes, an image on my sever [in demo folder] when displayed in dimbox does download, however an "external" url image same problem of opening in a new tab. Looking at the .dimbox-btn-download element that is created, then yes made sense as to why an "external" url image won't download. So I decided it would be good to allow for both images (server hosted or an external hosted image(s) [subject to any cors]). Downloaded your full JS code and proceded to figure out a how to. Have come up with the following that seems to work. You may want to consider incorporating this, and any improvement of my attempt. From line 399 in dimbox.js

function updateDownloadButton() {
	if (!config.showDownloadButton) {
		return;
	}
	// Check if download button exists in DOM already
	if (dimboxContainer.querySelector('.dimbox-btn-download')) {
		// Update href right away
		downloadBtn.href = currentEl.href;
		// Current type is not image or video...
		if (currentType !== 'image' && currentType !== 'video') {
			// ...so remove download button from the DOM
			dimboxContainer.removeChild(downloadBtn);
			downloadBtn = null;
		}
	} else if (currentType === 'image' || currentType === 'video') {
		// Download button does not exits yet, create it
		//console.log(currentEl.href);
		var imgSrc = currentEl.href;
		var hostname = window.location.hostname;
		//console.log(hostname);
		if (imgSrc.includes(hostname)) {
			console.log("my server image");
			downloadBtn = document.createElement('a');
			downloadBtn.className = 'dimbox-btn-download';
			downloadBtn.innerHTML = config.svgDownloadButton;
			downloadBtn.href = currentEl.href;
			downloadBtn.target = '_blank';
			downloadBtn.setAttribute('download', '');
			dimboxContainer.appendChild(downloadBtn);
			downloadBtn.addEventListener('click', function() {
				executeCallback('onDownload');
			});
		} else if (!imgSrc.includes(hostname)) {
			console.log("external image");
			downloadBtn = document.createElement('a');
			downloadBtn.className = 'dimbox-btn-download';
			downloadBtn.innerHTML = config.svgDownloadButton;
			downloadBtn.href = currentEl.href;
			downloadBtn.target = '_blank';
			downloadBtn.setAttribute('download', '');
			dimboxContainer.appendChild(downloadBtn);
			function downloadImage(event) {
				event.preventDefault();
				var url = currentEl.href;
				var fileName = url.match(/([^\/]+)$/)[1];
				//console.log(fileName);
				fetch(url)
					.then(function(response) {
						return response.blob();
					})
					.then(function(blob) {
						var url = window.URL.createObjectURL(blob);
						var a = document.createElement('a');
						a.style.display = 'none';
						a.href = url;
						a.download = fileName;
						document.body.appendChild(a);
						a.click();
						window.URL.revokeObjectURL(url);
						document.body.removeChild(a);
					})
					.then(function() {
						executeCallback('onDownload');
					}).catch(function() {
						alert('An error sorry')
					});
			}
			downloadBtn.addEventListener('click', downloadImage);
		}
		//NOTE see onBeforeUpdateContent: function()
	} //end else if
}

Then in dimbox.setConfig I needed to add the following to allow for mixed server hosted images and external hosted images:

dimbox.setConfig({
    onBeforeUpdateContent: function() {
	if(document.querySelector('.dimbox-btn-download')){
            document.querySelector('.dimbox-btn-download').remove();
	}
    }
});

On a side note, on demo site, type:ajax does not work (https://api.punkapi.com/v2/beers/random). Could you updated/fix as am interest to see how this renders.

I look forward to your response, thank you, Col

Love e the plugin, in my case I load it async using fetch inject, so would be great if I could

.then(() => {
   dimbox.init()
})

ober here, https://github.com/hphaavikko/dimbox/blob/main/src/js/dimbox.js#L718

return {
    init: init,
    close: close,
    ...
  };

Pressing the escape key to close dim box does not work, is it possible to add this?

Documentation ajax examples are not working since the Brewdog Punk API doesn't seem to exist anymore: https://api.punkapi.com/v2/beers/

Need to find some other open API with funny content and update the examples. Suggestions are welcome!

Also there could be a visible error message if ajax content load fails for some reason.

Hi there,

Really enjoying using your elegant plugin. I realise that YouTube videos are basically iframes as ooposed to true video types, but I wonder if you've had any success with getting autoplay to work with the href url or other method. I have tried &autoplay=1, etc.

I can't see anything in your code that deals with this. Wondering if you had any experience with the youtube_api methods for this effect.

Any thoughts appreciated