Bootstrap-Lightbox - Simple & lightweight lightbox for Bootstrap 5

Last update: Oct 11, 2022

Related tags

Modals and Popups Bootstrap-Lightbox

Overview

Bootstrap-Lightbox

Simple & lightweight lightbox for Bootstrap 5

Basic Usage

Adding data-modal="bs-lightbox" in your A href tag.

<a data-modal="bs-lightbox" href="(Image URL to display in lightbox)" target="_blank"><img src="(Thumbnail Image URL)"></a>

Live Demo

You can see live demo on here: https://avalon-studio.work/files/bs5lightbox-js.html

this is same code as sample.html in this project.

Install

Insert <script> tag near by end of BODY tag.

<script async type="text/javascript" src="https://cdn.jsdelivr.net/gh/avalon-studio/Bootstrap-Lightbox/bs5lightbox.js" crossorigin="anonymous"></script>

Requirement

Bootstrap 5.0 or higher

Recommend

adding follow css code in your stylesheet. It's modify Bootstrap default style to fit lightbox.

.modal-content {background-color: unset;}
#LightboxCanvas{max-width:100%; max-height:100%;}

A Lightweight Responsive jQuery Tooltip Plugin

tipso A Lightweight Responsive jQuery Tooltip Plugin There is also a Wordpress version of this plugin. Get it here Getting started Include jQuery scr

Dec 21, 2022

Simple to use modal / alert / dialog / popup. Created with vanilla JS. No javascript knowledge required! Works on every browser and device! IE9

EinsModal The last modal / alert / dialog you will ever need! Full Documentation: https://www.einscms.com/modal EinsModal is the best solution to inte

Oct 20, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. 🎉 Support us with Developer Merchandise

Jan 2, 2023

Bootstrap-select - Shim repository for Bootstrap-select that works with bootstrap 4.

bootstrap-select Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to standard sel

Aug 27, 2022

The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular

ngx-bootstrap The best way to quickly integrate Bootstrap 5 Bootstrap 4 or Bootstrap 3 Components with Angular Links Documentation Release Notes Slack

Jan 8, 2023

Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Feb 10, 2022

:zap: Simple and easy to use lightbox script written in pure JavaScript

baguetteBox.js Simple and easy to use lightbox script written in pure JavaScript. Demo page Table of contents Features Installation Importing Usage Cu

Jan 3, 2023

A simple, one page, Bootstrap HTML website template created by Start Bootstrap

Start Bootstrap - One Page Wonder One Page Wonder is a basic one page template for Bootstrap created by Start Bootstrap. Preview View Live Preview Sta

Dec 18, 2022

Light and responsive lightbox script with focus on performance.

Magnific Popup Repository Fast, light and responsive lightbox plugin, for jQuery and Zepto.js. Documentation and getting started guide. Examples and p

Jan 2, 2023

A light-weight, customizable lightbox plugin for jQuery

About Colorbox: A customizable lightbox plugin for jQuery. See the project page for documentation and a demonstration, and the FAQ for solutions and e

Dec 29, 2022

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

fancyBox jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable. See the project page for doc

Jan 2, 2023

A touchable jQuery lightbox

Swipebox A touchable jQuery lightbox. View project page What is Swipebox ? Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Feat

Dec 6, 2022

A customizable, modular, responsive, lightbox gallery plugin.

lightGallery A customizable, modular, responsive, lightbox gallery plugin for jQuery. Demo JQuery lightGallery demo. Codepen demo Main features Fully

Jan 4, 2023

THE original Lightbox script (v2).

Lightbox2 The original lightbox script. Lightbox is small javascript library used to overlay images on top of the current page. It's a snap to setup a

Jan 3, 2023

Touch-friendly image lightbox for mobile and desktop

Jan 5, 2023

🖼️ A 60+ fps lightbox component, build upon Reanimated & GestureHandler.

React Native Lightbox Todo pinch to zoom web support photo gallery tap to close Installation First you have to follow installation instructions of Rea

Dec 19, 2022

Comments

Left/Right arrow control

Hi friends. Thank you for this plugin, it works perfectly. I am just wondering if an implementation of left/right, or some navigation control, can open next/prev picture?

opened by gazzi 0