Accessible Gallery allows you to create an image gallery automatically directly from the HTML.
- First download the package:
npm install @sitelintcode/accessible-gallery --save
- Setup HTML structure:
<ul class="accessible-gallery" data-accessible-gallery
data-accessible-gallery-config='{"galleryTitle":"Gallery of images in a modal dialog","loadingMessage":"The image is being loaded","closeButtonMessage":"Close gallery", "previousImage":"Previous","nextImage":"Next", "closeButton":"Close dialog"}'>
<li class="accessible-gallery__item" data-accessible-gallery-item>
<a href="#no_image" data-accessible-gallery-link>
<img loading="lazy" alt="Placeholder" data-accessible-gallery-thumbnail="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjOHPmzH8ACDADZKt3GNsAAAAASUVORK5CYII=" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjOHPmzH8ACDADZKt3GNsAAAAASUVORK5CYII=">
</a>
</li>
<li class="accessible-gallery__item" data-accessible-gallery-item>
<a href="images/castelmezzano-1979546_1920.jpeg" data-accessible-gallery-link>
<img loading="lazy" alt="Castelmezzano by night" src="images/castelmezzano-1979546_1920_thumbnail.jpeg" data-accessible-gallery-thumbnail="images/castelmezzano-1979546_1920_thumbnail.jpeg">
</a>
</li>
<li class="accessible-gallery__item" data-accessible-gallery-item>
<a href="images/sunset-3325080_1920.jpeg" data-accessible-gallery-link>
<img loading="lazy" alt="Sunset in mountains" src="images/sunset-3325080_1920_thumbnail.jpeg" data-accessible-gallery-thumbnail="images/sunset-3325080_1920_thumbnail.jpeg">
</a>
</li>
</ul>
- Use:
import AccessibleGallery from '@sitelint/accessible-gallery';
const accessibleGallery = new AccessibleGallery();
accessibleGallery.init();
- The gallery supports image preloding for previous / next image using.
- While loading the image the message is being displayed to give a feedback when loading image takes more than 1 second. The message appears with 1 second delay to avoid "blinking" when the image is loaded faster than 1 second.
- The gallery should be fully responsive and adapt to all viewport sizes.
- Gallery supports base64 encoded images. Example:
src="data:image/png;base64,..."
. - The left/right swipe gesture is supported. Very useful on mobile devices.
-
import { terser } from "rollup-plugin-terser";
was replaced withimport { terser } from "rollup-plugin-minification";
becauserollup-plugin-terser
is not compatible with Rollup 3.x version. See: https://github.com/TrySound/rollup-plugin-terser/issues/119 - At the moment the gallery code is being executed on
DOMContentLoaded
event automatically. Eventually, if eventDOMContentLoaded
was called after Accessible Gallery code was loaded then the gallery will run immediately.
Optionally you may want to set custom messages, e.g. for localisation purpose. An attribute data-accessible-gallery-config
contains config for all strings.
{
"galleryTitle": "Gallery of images in a modal dialog",
"loadingMessage": "The image is being loaded",
"closeButtonMessage": "Close gallery",
"previousImage": "Previous",
"nextImage": "Next",
"closeButton": "Close dialog"
}
Note: above config is being stored as a valid JSON string under attribute data-accessible-gallery-config
.
The data-accessible-gallery-thumbnail
attribute allow you to specify a custom small thumbnail generated at the very bottom of the page. Keep the value empty when you want to pick the image src
.
This <img loading="lazy" alt="Castelmezzano by night" src="images/castelmezzano-1979546_1920_thumbnail.jpeg" data-accessible-gallery-thumbnail="images/castelmezzano-1979546_1920_bottom_thumbnail.jpeg">
will pick images/castelmezzano-1979546_1920_bottom_thumbnail.jpeg
when rendering mini thumbnails at the very bottom of the page.
This <img loading="lazy" alt="Castelmezzano by night" src="images/castelmezzano-1979546_1920_thumbnail.jpeg" data-accessible-gallery-thumbnail>
will pick images/castelmezzano-1979546_1920_thumbnail.jpeg
when rendering mini thumbnails at the very bottom of the page.
Yes. See above "Options".
Contributions are welcome, and greatly appreciated! Contributing doesn't just mean submitting pull requests. There are many different ways for you to get involved, including answering questions on the issues, reporting or triaging bugs, and participating in the features evolution process.
Images coming from Pixabay
MIT