Lightweight JavaScript Lightbox For Enhanced Image/Video Viewing – Magniview

Preview:

Description:

Magniview is a lightweight and easy-to-use JavaScript lightbox library that enhances the image- and video-viewing experience on your websites.

The lightbox library allows users to zoom in/out, rotate, download and view images/videos in fullscreen mode. With its gallery support, users can navigate through images/videos using next/previous navigation or by clicking on thumbnails.

How to use it:

1. Download the Magniview library from our website or use your preferred package manager:

# Yarn
$ yarn add magniview
# NPM
$ npm install magniview

2. Add Magniview’s JavaScript and CSS files to your HTML:

<link rel="stylesheet" href="./dist/magniview-min.css">
<script src="./dist/magniview-min.js"></script>

// OR
import 'magniview/dist/magniview-min.js';
import 'magniview/dist/magniview-min.css';

3. Create a single image/video lightbox:

<div data-magniview="">
  <img src="image.jpg" alt="Image Alt">
  ... or a video
</div>

4. Create a gallery lightbox. All images/videos within the gallery must share the same data-gallery value:

<div data-gallery="galleryExamp" data-magniview="">
  <img src="image1.jpg" alt="Image Alt 1">
</div>
<div data-gallery="galleryExamp" data-magniview="">
  <img src="image2.jpg" alt="image Alt 2">
</div>
<div data-gallery="galleryExamp" data-magniview="">
  <img src="image3.jpg" alt="image Alt 3">
</div>

Changelog:

v1.0.10 (01/30/2025)

• Improved mobile responsiveness and video handling

v1.0.9 (01/15/2025)

• Added YouTube support and improved mobile layout

v1.0.8 (10/18/2024)

• Added support for video playback

10/15/2024

• Bugfixes