Simple Example of Bootstrap Lightbox Plugin with demo

By Hardik Savani | December 27, 2016 | | 22033 Viewer | Category : 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...






Do you want to expert php developer or developer team for your projects ?
Contact US
We are Recommending you: