Bootstrap Lightbox Plugin Example Code

By Hardik Savani November 5, 2023 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:

Read Also: Laravel 10 Bootstrap Auth Scaffolding Tutorial
<!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...

Tags :
Previous

How to Send Mail using Zoho SMTP Server in Laravel?
Next

Laravel Ajax Image Upload with Validation Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares