Responsive Fullscreen Image Gallery – Bizon.js

Bizon.js is a lightweight JavaScript gallery plugin that displays images in a responsive fullscreen popup.

It fetches images from a JavaScript array and generates a thumbnail strip containing all thumbnails that users can click to view the full image.

More Like This:

• 10 Best Gallery Lightbox Libraries In Pure JavaScript/CSS

How to use it:

1. Download and load the following files in the document.

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

2. Prepare your gallery data as follows:

const galleryData = {
  title: "CSSScript Gallery",
  images: [
    {
      src: "1.jpeg",
      thumb: "thumb-1.jpeg",
      width: 600,
      height: 400,
      caption: "Caption 1",
    },
    {
      src: "2.jpeg",
      thumb: "thumb-2.jpeg",
      width: 600,
      height: 400,
      caption: "Caption 2",
    },
    {
      src: "3.jpeg",
      thumb: "thumb-3.jpeg",
      width: 600,
      height: 400,
      caption: "Caption 3",
    }
    // ...
  ]
};

3. Initialize the gallery.

const myGallery = new Bizon(galleryData);

3. Show the gallery when needed.

myGallery.show()

Changelog:

07/04/2025

• update

02/05/2025

• added next, previous and close on mouse click

The post Responsive Fullscreen Image Gallery – Bizon.js appeared first on CSS Script.