automad / lightbox
A custom string function for creating a lightbox slideshow out of inline images.
Fund package maintenance!
marcantondahmen
Ko Fi
paypal.me/marcantondahmen
Installs: 1 774
Dependents: 1
Suggesters: 0
Security: 0
Stars: 2
Watchers: 3
Forks: 1
Open Issues: 0
Language:JavaScript
Type:automad-package
Requires
- automad/package-installer: ^1.1 || dev-master
This package is auto-updated.
Last update: 2024-12-24 20:19:47 UTC
README
The Lightbox extensions is a custom string function for Automad that easily let's you create lightbox slideshows out of inline images. It can be used with any text variable including markdown image links.
Assets
The lightbox extension requires jQuery to be loaded along with the included assets within your template's <head> section.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="/packages/automad/lightbox/dist/lightbox.min.js"></script>
<link rel="stylesheet" href="/packages/automad/lightbox/dist/lightbox.min.css">
Template
Somewhere in the body of your template the extension can be used with any variable as follows:
@{ text | Automad/Lightbox | markdown }
Using Inline Images in Content
The Lightbox string function will pick up any markdown image within your content and turn it into a link to open the lightbox modal window. While the enlarged image in the lightbox modal will always have its original dimensions, it is possible to resize the image embedded within the text as follows:
The image tag above will create an image link with a small thumbnail of 400x300 pixel to open the enlarged version of that image with its original dimensions in the modal window.
Captions
Captions stored along with images will be displayed automatically at the bottom of the lightbox modal window.