> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/javascript/thu-vien-lightgallery-de-lam-nhung-bo-suu-tap-gallery.md).

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

![](/files/-Lt5lAY01V-twk07Be_v)

{% file src="/files/-Lt5kxs-6zDRTa-DV5Vx" %}

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](/files/fTuqz81xY8P0137Wmz70)

{% file src="/files/PaD24e7AFC7B2ADRmhho" %}
