Featherlight Gallery Example
This is a test example using Featherlight on a desktop XAMPP Windows installation and tested with three different Grav themes. The example has not been tested online with an active Grav website.
Example one uses a single image and when clicked on will bring up the slideshow with left/arrows to move through the images. All the remaining images are hidden by using CSS display: none.
The second example displays all of the images in the slideshow and clicking on any image will bring up the left/right arrows. The thumbnails can be any desired size. All of the images are uploaded to the “Page Media” content section. The images along with yourfilename.md file are contained in a folder titled 03.slideshow located in user/pages/03.slideshow in this example.
Install and activate featherlight in “Plugins” By default, “Gallery” is not enabled and will require changing to “Enabled”. If not enabled Featherlight will produce an image with a white border, but without any left/right arrows. Useful, when only needing a larger image when clicking on a thumbnail with no slideshow.
The action of the Gallery can be turned on/off in individual pages by adding the below to content/expert - true for gallery on - false for gallery off.
featherlight:
active: true
featherlight:
active: false
All the code is placed in the content section when editing or creating a page. The JS script is placed at the bottom of the page. The JS fadein, open and close speeds can be altered as needed. Additional options are available in the Featherlight online instructions
CSS can be added, if desired, in place of the inline CSS code by using a class called gallery.
Edit and modify the examples as needed and suggest improvements.
Image float left - No slideshow. Autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<img style="float: left; border: 1px solid #000; margin: 5px 15px 0px 0px;" src="slideshow/flight.jpg" width="250" height="150" alt="flight"> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<a class="gallery" href="#" data-featherlight="slideshow/cow.jpg"><img style="float: left; border: 1px solid #000; margin: 5px 15px 0px 0px;" src="slideshow/cow.jpg" width="130" height="120" alt="cow"></a>
<span style="display: none;">
<a class="gallery" href="#" data-featherlight="slideshow/shake.jpg"><img src="slideshow/shake.jpg" width="130" height="120" alt="shake"></a>
<a class="gallery" href="#" data-featherlight="slideshow/flight.jpg"><img src="slideshow/flight.jpg" width="130" height="120" alt="flight"></a>
<a class="gallery" href="#" data-featherlight="slideshow/lemon.jpg"><img src="slideshow/lemon.jpg" width="130" height="120" alt="lemon"></a>
<a class="gallery" href="#" data-featherlight="slideshow/pouring.jpg"><img src="slideshow/pouring.jpg" width="130" height="120" alt="pouring"></a>
<a class="gallery" href="#" data-featherlight="slideshow/containers.png"><img src="slideshow/containers.png" width="130" height="120" alt="containers"></a>
</span>Image float left - Slideshow with 6 images on click in featherlight. Autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Gallery with all images displayed - Slideshow on any image click. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
<a class="gallery" href="#" data-featherlight="slideshow/pouring.jpg"><img src="slideshow/pouring.jpg" width="100" height="80" alt="pouring"></a>
<a class="gallery" href="#" data-featherlight="slideshow/cow.jpg"><img src="slideshow/cow.jpg" width="100" height="80" alt="cow"></a>
<a class="gallery" href="#" data-featherlight="slideshow/shake.jpg"><img src="slideshow/shake.jpg" width="100" height="80" alt="shake"></a>
<a class="gallery" href="#" data-featherlight="slideshow/flight.jpg"><img src="slideshow/flight.jpg" width="100" height="80" alt="flight"></a>
<a class="gallery" href="#" data-featherlight="slideshow/lemon.jpg"><img src="slideshow/lemon.jpg" width="100" height="80" alt="lemon"></a>
<a class="gallery" href="#" data-featherlight="slideshow/containers.png"><img src="slideshow/containers.png" width="100" height="80" alt="containers"></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<script>
$('a.gallery').featherlightGallery({
previousIcon: '«',
nextIcon: '»',
galleryFadeIn: 400,
openSpeed: 100,
closeSpeed: 500
});
</script>
