Simple Example of Bootstrap Lightbox Plugin with demo

Simple Example of Bootstrap Lightbox Plugin with demo

In this post we will give you information about Simple Example of Bootstrap Lightbox Plugin with demo. Hear we will give you detail about Simple Example of Bootstrap Lightbox Plugin with demoAnd how to use it also give you demo for it if it is necessary.

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:

Also see:Twitter Bootstrap – Digital Clock picker with AM PM example using clockface plugin

<!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 >

<h2>Bootstrap LightBox Example</h2>


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

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

</a>

<div id="demoLightbox" 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" >

</a>

<div id="demoLightbox2" 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…

Hope this code and post will helped you for implement Simple Example of Bootstrap Lightbox Plugin with demo. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  27  =  29

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US