Overlay Image Preview

Usage

Script

<link
    rel="stylesheet"
    href="https://unpkg.com/@geo6/overlay-image-preview@0.2.2/dist/overlay.css"
    integrity="sha512-2oqbJitNlHq2zrkd0BILo0IJIOObgcWTgWo1hB0GiegrIOPhYXnWFU8JfTQmb9GiecGQYT0zqu8guaxSOKN6xw=="
    crossorigin=""
>

<script
    src="https://unpkg.com/@geo6/overlay-image-preview@0.2.2/dist/overlay.js"
    integrity="sha512-WiBgHAD/DPZRrHu5AEVco8lcU96uADvt6l0b2Rc+BRcSK0C+45LFk/+k/94CK4MB6mp2UyjkmdgFmdHvHRngdg=="
    crossorigin=""
></script>

Package dependency

npm install @geo6/overlay-image-preview

Demo

Default overlay

const overlay = new Overlay(myElement);
overlay.open();

Overlay with custom caption

const overlay = new Overlay(myElement, (element) => {
    return element.dataset.caption;
});
overlay.open();