Skip to content

FaisalST32/fs-lightbox

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

lightbox-fs

A simple lightbox for your image gallery. This lightbox doesn't have any dependencies and can be used with any webpage.

Here's a preview

fs-lightbox in action

CDN Links:

https://cdn.jsdelivr.net/gh/FaisalST32/fs-lightbox@latest/src/js/fs-lightbox.min.js
https://cdn.jsdelivr.net/gh/FaisalST32/fs-lightbox@latest/src/css/fs-lightbox.min.css

NPM

npm i lightbox-fs

https://www.npmjs.com/package/lightbox-fs

Usage:

  • To use the lightbox you can simply add a reference to the .js file at the end of the body of your html and the .css file in the head of your html page.

  • In the img tag of the image that you want to be a part of the lightbox, add a class fs-lightbox.
    For example, "<img src="image.png" class="fs-lightbox" />"

  • That's it. When you click on the image, a lightbox preview of the image will appear.

Methods:

The plugin exposes some methods that you can use:

  • fsLightbox.next() - This will display the next picture in the lightbox

  • fsLightbox.prev() - This will display the previous picture in the lightbox

  • fsLightbox.hideLightbox() - This will hide the Lightbox