Thư viện lightGallery để làm những bộ Sưu tập Gallery
http://sachinchoolur.github.io/lightslider/
https://github.com/sachinchoolur/lightGallery
Một ví dụ đã hoàn thành phiên bản mới nhất :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="dist/css/lightgallery.css">
<link rel="stylesheet" href="dist/css/lg-video.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="dist/lightgallery.min.js"></script>
<script src="dist/plugins/video/lg-video.min.js"></script>
</head>
<body>
<div id="gallery-videojs-demo">
<a data-lg-size="1280-720" data-video='{"source": [{"src":"https://www.lightgalleryjs.com/videos/video1.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}' data-poster="https://www.lightgalleryjs.com/images/demo/html5-video-poster.jpg" data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>">
<img width="300" height="100" class="img-responsive" src="https://www.lightgalleryjs.com/images/demo/html5-video-poster.jpg" />
</a>
<a data-lg-size="1280-720" data-video='{"source": [{"src":"https://www.lightgalleryjs.com/videos/video2.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}' data-poster="https://www.lightgalleryjs.com/images/demo/html5-video-poster.jpg" data-sub-html="<h4>'Peck Pocketed' by Kevin Herron | Disney Favorite</h4>">
<img width="300" height="100" class="img-responsive" src="https://www.lightgalleryjs.com/images/demo/html5-video-poster.jpg" />
</a>
</div>
<script type="text/javascript">
window.onload = function() {
lightGallery(document.getElementById('gallery-videojs-demo'), {
plugins: [lgVideo],
videojs: false,
videojsOptions: {
muted: true
}
});
}
</script>
</body>
</html>Last updated
