lightGallery, lightgalleryjs, Lightbox (ok)

https://www.lightgalleryjs.com/docs/settings/

Tham khảo:

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

$(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'
      });
    });
  }
});

Previousadd Html Table rows data into JSON array Object (ok)Nextsame height (ok)

Last updated 2 years ago

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

$(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' }); }); } });