Full-featured Image Viewer In Pure JavaScript – spotlight.js

Preview:

Description:

spotlight.js is a small yet powerful JavaScript library that enables your visitor to view images and/or image groups in a fullscreen gallery popup.

More features:

• Fully responsive and mobile-friendly.
• Image zoom in/out.
• Image Loader & Preloader.
• 4 animations: “fade”, “slide”, “scale”, and “rotate”.
• Switches between images just like a slider.
• Automatically rotates through images just like a carousel.
• Supports keyboard and touch events.

How to use it:

Install & download.

# NPM
$ npm install spotlight.js --save

Import the spotlight module.

import Spotlight from "./spotlight.js";

Or download and import the spotlight.js library into the HTML file.

<script src="spotlight.bundle.js"></script>

Add the CSS class spotlight to the image links and done.

<a class="spotlight" href="1.jpg">
  <img src="thumb-1.jpg">
</a>
<a class="spotlight" href="2.jpg">
  <img src="thumb-2.jpg">
</a>
<a class="spotlight" href="3.jpg">
  <img src="thumb-3.jpg">
</a>

To group your images, just add the image links to a container element with the CSS class of spotlight-group.

<div class="spotlight-group">
  <a class="spotlight" href="1.jpg">
    <img src="thumb-1.jpg" />
  </a>
  <a class="spotlight" href="2.jpg">
    <img src="thumb-2.jpg" />
  </a>
  <a class="spotlight" href="3.jpg">
    <img src="thumb-3.jpg" />
  </a>
</div>

You can also specify the image paths using the data-src attribute:

<div class="spotlight-group">
  <div class="spotlight" data-src="1.jpg" style="background-image:url(thumb-1.jpg)"></div>
  <div class="spotlight" data-src="2.jpg" style="background-image:url(thumb-2.jpg)"></div>
  <div class="spotlight" data-src="3.jpg" style="background-image:url(thumb-3.jpg)"></div>
</div>

Create the image gallery/viewer via JavaScript API.

var myGallery = [{
    title: "Image 1",
    description: "Description 1",
    src: "1.jpg"
},{
    title: "Image 2",
    description: "Description 2",
    src: "2.jpg"
},{
    title: "Image 3",
    description: "Description 3",
    src: "3.jpg"
}];
// Shows the gallery
Spotlight.show(myGallery);

Customize the image viewer/gallery with the following options.

Spotlight.show(myGallery,{
  // "fade", "slide", "scale", and "rotate"
  animation: "slide",
  /* shows/hides controls
    "theme",
    "fullscreen",
    "autofit",
    "zoom-in",
    "zoom-out",
    "page",
    "title",
    "description",
    "player"
  */
  control: ["autofit", "zoom"],
  // auto hides the controls
  autohide: true,
  // shows fullscreen toggle button
  fullscreen: true,
  // shows zoom buttons
  zoom: true,
  // shows zoomIn button
  zoomin: true,
  // shows zoomOut button
  zoomout: true,
  // shows reset button
  reset: true,
  // shows theme switch button
  theme: true,
  // shows autoplay button
  player: true,
  // infinite mode
  infinite: true,
  // "white" or "dark"
  theme: "white",
  // shows pages
  page: true,
  // shows image preloader
  preloader: true,
  // enables image prefetching
  prefetch: true
});

You can also pass the options via data-OPTION attributes:

<div class="spotlight-group" 
     data-title="Gallery Title" 
     data-option="value">
    <a class="spotlight" href="1.jpg" data-title="Image Title.">
      <img src="thumb-1.jpg">
    </a>
    <a class="spotlight" href="2.jpg" data-description="Image Description.">
      <img src="thumb-2.jpg">
    </a>
    <a class="spotlight" href="3.jpg">
      <img src="thumb-3.jpg" alt="This is a title.">
    </a>
</div>

API methods.

// close the image viewer
Spotlight.close();
// go to the next image
Spotlight.next();
// go to the prev image
Spotlight.prev();
// go to a specific image
Spotlight.goto(3);
// zoom to 1.5
Spotlight.zoom(1.5);
// toggle between themes
Spotlight.theme();
// set the theme
Spotlight.theme("white");
Spotlight.theme("dark");
// toggle the fullscreen mode
Spotlight.fullscreen();
// set the fullscreen mode
Spotlight.fullscreen(true);
Spotlight.fullscreen(false);
// toggle the auto fit mode
Spotlight.autofit();
// set the auto fit mode
Spotlight.autofit(true);
Spotlight.autofit(false);
// toggle the menu
Spotlight.menu();
// set the menu
Spotlight.menu(true);
Spotlight.menu(false);

Changelog:

v0.7.8 (03/04/2023)

• Bugfixes