Author: | arianajung |
---|---|
Views Total: | 1,754 views |
Official Page: | Go to website |
Last Update: | February 12, 2021 |
License: | MIT |
Preview:

Description:
MixGallery.js is a lightweight, responsive, filterable gallery lightbox JavaScript library that supports any type of web content like videos, audios, images, links, etc.
See Also:
More Features:
- Auto categorizes content based on media types.
- Blur & Zoom effects on hover.
- Custom title, caption, and priority.
How to use it:
1. Load the MixGallery.js library on your HTML page.
<link rel="stylesheet" href="MixGallery.css" /> <script src="js/MixGallery.js"></script>
2. Create a container to hold the gallery.
<div id="gallery"></div>
3. Add your own content 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 page.
mixgallery.render();
6. Destroy the gallery.
mixgallery.destroy();