ItSolutionStuff.com

Bootstrap Lightbox Plugin Example Code

By Hardik Savani • November 5, 2023
Bootstrap HTML jQuery

Lightbox is a very popular plugin of wordpress and it is very useful for display image gallery. Lightbox will help to make best layout for portfolio, image gallery, banner display etc. So, Bootstrap provide Lightbox by bootstrap-lightbox plugin, bootstrap-lightbox plugin through we can simply use with bootstrap application. In this post we are going to learn how to use Lightbox in Bootstrap Application like with PHP, PHP Laravel, PHP codeigniter, PHP cakephp etc.

In this example i take two image and When you click on it Open Lightbox popup with big image. It is a very basic and simple example, But you can understand how to use it and also make Image gallery through this example.

As bellow i give full example code of bootstrap-lightbox plugin, This example will help to understand code. So let's copy bellow code and run in your system Or see demo:

Example:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap LightBox Example</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js"></script>

<style type="text/css">

.lightbox{

z-index: 1041;

}

.small-img{

width: 100px;height: 100px;

}

</style>

</head>

<body>


<div class="container">

<h2>Bootstrap LightBox Example</h2>


<a data-toggle="lightbox" href="#demoLightbox">

<img src="https://dummyimage.com/600x400/000/fff" class="small-img">

</a>

<div id="demoLightbox" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">

<div class='lightbox-dialog'>

<div class='lightbox-content'>

<img src="https://dummyimage.com/600x400/000/fff">

<div class='lightbox-caption'>

Write here your caption here

</div>

</div>

</div>

</div>


<a data-toggle="lightbox" href="#demoLightbox2">

<img src="https://dummyimage.com/600x500/000/fff" class="small-img">

</a>

<div id="demoLightbox2" class="lightbox fade" tabindex="-1" role="dialog" aria-hidden="true">

<div class='lightbox-dialog'>

<div class='lightbox-content'>

<img src="https://dummyimage.com/600x500/000/fff">

<div class='lightbox-caption'>

Write here your caption here

</div>

</div>

</div>

</div>


</div>


</body>

</html>

You can get more information about bootstrap-lightbox plugin from here : Bootstrap Lightbox.

I hope it can help you...

Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Angular 14 Bootstrap Modal Popup Example

Read Now →

Bootstrap Datetimepicker Disable Specific Dates Example

Read Now →

PHP MySQL Contact US Form with Validation Example

Read Now →

PHP Ajax Inline Editing using X-editable Bootstrap JS Example

Read Now →

PHP MySQL Integrate Fullcalendar Example Tutorial

Read Now →

Bootstrap Multiselect Dropdown in Popup Example

Read Now →

Bootstrap Digital Clock Picker with AM PM using Clockface JS

Read Now →

Laravel Create Bootstrap Contact US Form Example

Read Now →

Bootstrap Show/Hide Toggle Password Input Field Example

Read Now →

Bootstrap - Input multiple tags example using Tag Manager Jquery Plugin

Read Now →

Bootstrap SweetAlert Confirm Dialog Box Model Example

Read Now →

Bootstrap Color Picker using Mjolnic Colorpicker Example

Read Now →

Bootstrap Timepicker using Datetimepicker JS Example

Read Now →

JQuery Delete Confirm Modal using Bootbox Example

Read Now →

How to use Datepicker in Bootstrap?

Read Now →