# lightGallery, lightgalleryjs, Lightbox (ok)

Tham khảo:

{% embed url="<https://lokeshdhakar.com/projects/lightbox2>" %}

{% file src="<https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FdFsLR0cAZLX6kv5RrODA%2FlightGallery-master.zip?alt=media&token=067f96d6-3db0-41e9-9990-ba4bb4a7b878>" %}

C:\Users\Administrator\Desktop\lightGallery\site\v1\demos\test.html

```
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>lightGallery: thumbnails</title>
  <meta name="description" content="lightGallery lets you to create animated thumbnails for your gallery with the help of thumbnail plugin." />
  <link href="../static/css/main.css" rel="stylesheet" />
  <link href="../static/css/justifiedGallery.min.css" rel="stylesheet" />
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
  <link href="../lightgallery/css/lightgallery.css" rel="stylesheet" />
  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
  <link rel="icon" href="../favicon.ico" type="image/x-icon" />
</head>

<body class="demos">
  <div class="demo-gallery mrb50">
    <div id="aniimated-thumbnials" data-numposts="2">
      <a class="" href="https://loremflickr.com/320/240/brazil,rio">
        <img class="img-responsive" src="https://loremflickr.com/g/320/240/paris" />
        <div class="demo-gallery-poster">
          <img src="https://img.icons8.com/dusk/2x/zoom.png" />
        </div>
      </a>
      <a class="" href="https://loremflickr.com/320/240/brazil,rio">
        <img class="img-responsive" src="https://loremflickr.com/g/320/240/paris" />
        <div class="demo-gallery-poster">
          <img src="https://img.icons8.com/dusk/2x/zoom.png" />
        </div>
      </a>
      <a class="" href="https://loremflickr.com/320/240/brazil,rio">
        <img class="img-responsive" src="https://loremflickr.com/g/320/240/paris" />
        <div class="demo-gallery-poster">
          <img src="https://img.icons8.com/dusk/2x/zoom.png" />
        </div>
      </a>
      <a class="" href="https://loremflickr.com/320/240/brazil,rio">
        <img class="img-responsive" src="https://loremflickr.com/g/320/240/paris" />
        <div class="demo-gallery-poster">
          <img src="https://img.icons8.com/dusk/2x/zoom.png" />
        </div>
      </a>
      <a class="" href="https://loremflickr.com/320/240/brazil,rio">
        <img class="img-responsive" src="https://loremflickr.com/g/320/240/paris" />
        <div class="demo-gallery-poster">
          <img src="https://img.icons8.com/dusk/2x/zoom.png" />
        </div>
      </a>
      <a class="" href="https://loremflickr.com/320/240/brazil,rio">
        <img class="img-responsive" src="https://loremflickr.com/g/320/240/paris" />
        <div class="demo-gallery-poster">
          <img src="https://img.icons8.com/dusk/2x/zoom.png" />
        </div>
      </a>
      <a class="" href="https://loremflickr.com/320/240/brazil,rio">
        <img class="img-responsive" src="https://loremflickr.com/g/320/240/paris" />
        <div class="demo-gallery-poster">
          <img src="https://img.icons8.com/dusk/2x/zoom.png" />
        </div>
      </a>
      <a class="" href="https://loremflickr.com/320/240/brazil,rio">
        <img class="img-responsive" src="https://loremflickr.com/g/320/240/paris" />
        <div class="demo-gallery-poster">
          <img src="https://img.icons8.com/dusk/2x/zoom.png" />
        </div>
      </a>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="../static/js/prettify.js"></script>
  <script src="../static/js/jquery.justifiedGallery.min.js"></script>
  <script src="../static/js/transition.js"></script>
  <script src="../static/js/collapse.js"></script>
  <script src="../lightgallery/js/lightgallery.js"></script>
  <script src="../lightgallery/js/lg-fullscreen.js"></script>
  <script src="../lightgallery/js/lg-thumbnail.js"></script>
  <script src="../lightgallery/js/lg-video.js"></script>
  <script src="../lightgallery/js/lg-autoplay.js"></script>
  <script src="../lightgallery/js/lg-zoom.js"></script>
  <script src="../external/jquery.mousewheel.min.js"></script>
  <script src="../static/js/test.js"></script>
</body>

</html>

```

C:\Users\Administrator\Desktop\lightGallery\site\v1\static\js\test.js

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MabNCGWhlADNqwCzsNu%2F-MabNfGn3mrpWsXHe9QP%2FScreenshot_1.jpg?alt=media\&token=fdfe669a-a881-48ef-9a90-c6bff7976b68)

```
$(document).ready(function() {
  window.prettyPrint && prettyPrint();
  // Animated thumbnails
  var $animThumb = $("#aniimated-thumbnials");
  if ($animThumb.length) {
    $animThumb
    .justifiedGallery({
      border: 6,
    })
    .on("jg.complete", function() {
      $animThumb.lightGallery({
        thumbnail: true,
        addClass : 'aaaaaaaaaaaaa'
      });
    });
  }
});

```
