More Features:

• It automatically classifies content based on media types.
• Blur & Zoom Scrolling Effects.
• Custom title, caption, and priority.

Must Read: Responsive Photo/Image Gallery in Pure JavaScript | Cube Gallery

How to make use of it:

1. Load the MixGallery.js library on your HTML web page.

<link rel="stylesheet" href="MixGallery.css" />
<script src="js/MixGallery.js"></script>

2. Create a container to carry the gallery.

<div id="gallery"></div>

3. Add your personal content material to the gallery.

const myContent = [
      {
        src: "1.jpg",
        type: "img",
        title: "Image Title",
        caption: "Description",
        priority: 1,
      },
      {
        src: "1.mp3",
        type: "audio",
        title: "Audio Title",
        caption: "Description",
        priority: 2,
      },
      {
        src: "https://google.com/",
        type: "link",
        title: "Google.Com",
        caption: "Description",
        priority: 3,
      },
      {
        src: "1.mp4",
        type: "video",
        title: "Video Title",
        caption: "Description",
        priority: 4,
      },
      // more content here
];

4. Initialize the gallery.

const mixgallery = MixGallery(document.querySelector("#gallery"), elements);

5. Render the gallery on the web page.

mixgallery.render();

6. Destroy the gallery.

mixgallery.destroy();

See Also –

Modern Photo/Video Gallery and Lightbox Plugin | nanogallery2
Lightbox Gallery Made With Vanilla JS Using Babel/Gulp
Lightweight And Responsive Image Gallery With Thumbnails For Vue.js

See Demo And Download