Responsive Fullscreen Image Gallery – Bizon.js

Category: Gallery , Javascript | January 30, 2024
Author:sgchris
Views Total:295 views
Official Page:Go to website
Last Update:January 30, 2024
License:MIT

Preview:

Responsive Fullscreen Image Gallery – Bizon.js

Description:

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:

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()

You Might Be Interested In:


Leave a Reply