magnific image popup light box

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Magnific popup</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" integrity="sha512-+EoPw+Fiwh6eSeRK7zwIKG2MA8i3rV/DGa3tdttQGgWyatG/SkncT53KHQaS5Jh9MNOT3dmFL0FjTY08And/Cw==" crossorigin="anonymous" />
</head>
<body>
    <div class="container w-100 h-100">
        <div class="py-4">
            <h1 class="text-center">Our Gallery</h1>
            <hr class="text-cente w-50 text-dark">
        </div>
        <div class="row no-gutters image-link">
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?nature,water" target="_blank"><img src="https://source.unsplash.com/1600x900/?nature,water" alt="" class="img-fluid"></a></div>
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?nature" target="_blank"><img src="https://source.unsplash.com/1600x900/?nature" alt=""class="img-fluid"></a></div>
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?beach" target="_blank"><img src="https://source.unsplash.com/1600x900/?beach" alt="" class="img-fluid"></a></div><br>
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?rain" target="_blank"><img src="https://source.unsplash.com/1600x900/?rain" alt="" class="img-fluid"></a></div>
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?laptop" target="_blank"><img src="https://source.unsplash.com/1600x900/?laptop" alt=""class="img-fluid"></a></div>
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?ship" target="_blank"><img src="https://source.unsplash.com/1600x900/?ship" alt="" class="img-fluid"></a></div>
        
        </div>
        <br><br>
        <div class="row no-gutters image-link1">
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?nature,water" target="_blank"><img src="https://source.unsplash.com/1600x900/?nature,water" alt="" class="img-fluid"></a></div>
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?nature" target="_blank"><img src="https://source.unsplash.com/1600x900/?nature" alt=""class="img-fluid"></a></div>
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?beach" target="_blank"><img src="https://source.unsplash.com/1600x900/?beach" alt="" class="img-fluid"></a></div><br>
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?rain" target="_blank"><img src="https://source.unsplash.com/1600x900/?rain" alt="" class="img-fluid"></a></div>
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?laptop" target="_blank"><img src="https://source.unsplash.com/1600x900/?laptop" alt=""class="img-fluid"></a></div>
            <div class="col-md-4 col-12"><a href="https://source.unsplash.com/1600x900/?ship" target="_blank"><img src="https://source.unsplash.com/1600x900/?ship" alt="" class="img-fluid"></a></div>
        
        </div>
    </div>

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha512-IsNh5E3eYy3tr/JiX2Yx4vsCujtkhwl7SLqgnwLNgf04Hrt9BT9SXlLlZlWx+OK4ndzAoALhsMNcCmkggjZB1w==" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
  $('.image-link , .image-link1').magnificPopup({
       delegate: 'a',
      type:'image',
      gallery:{
          enabled:true,
          preload: [0,2],
          navigateByImgClick: true,
      }
  });
});
    </script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

sitemap date format

  Date formating in sitemap.xml file for SEO:     The 'lastmod' element has to be of the format YYYY-MM-DD or YYYY-MM-DDThh:mmTZD so use: gmdate( 'Y-m-d' , strtotime($row[ 'modified' ][ 'value' ])) or gmdate( 'Y-m-d\TH:i:s+00:00' , strtotime($row[ 'modified' ][ 'value' ]))
Read more

SQL INSERT statement

Image
                                                    The INSERT statement - Part I Example :          use employees; SELECT     * FROM     employees LIMIT 10; #insert data insert into employees(     emp_no,     birth_date,     first_name,     last_name,     gender,     hire_date ) values(     999901,     '1999-10-10',     'John',     'wick',     'M',     '2020-08-31'     );     SELECT     * FROM     employees WHERE     emp_no = 999901;                       ...
Read more

preparation analytics

                                                            Preparation Test      date : 28/09/2020    CSS :      1: Explain the CSS “box model” and the layout components that it consists of.             Provide some usage examples.      The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following: Content - The content of the box, where text and images appear Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content) Border - A border surrounding the padding (if any) and content Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements) Each of t...
Read more