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'
});
});
}
});
Last updated
