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

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

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