# Thư viện lightGallery để làm những bộ Sưu tập Gallery

{% embed url="<https://github.com/sachinchoolur/lightgallery-desktop>" %}

<https://github.com/sachinchoolur/lightGallery>

![](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYjAG13rAPdbArSfRyB%2F-Lt5kLtkfvXZ9d6QLwdy%2F-Lt5lAY01V-twk07Be_v%2FL3.png?alt=media\&token=58e4bc13-f130-4ae5-929d-1e1a1865ccfa)

{% file src="<https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYjAG13rAPdbArSfRyB%2F-Lt5kLtkfvXZ9d6QLwdy%2F-Lt5kxs-6zDRTa-DV5Vx%2FlightGallery-master.zip?alt=media&token=6e5ffa44-25f7-4eac-b0d6-14a4d54de576>" %}

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

![https://codeload.github.com/sachinchoolur/lightGallery/zip/refs/heads/master](https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FNHyR3644SWKQMHAh3fnJ%2FScreenshot_1.png?alt=media\&token=f24642f7-04e8-426f-9cbc-9bb615573ab0)

{% file src="<https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FwiDmuqrHd06mFqNKvRHc%2FlightGallery-master.zip?alt=media&token=7824eeb7-ad8b-40fe-8f03-6d856cc7c4ef>" %}
