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

Category: Gallery , Javascript , Recommended | June 18, 2019
Author: nextapps-de
Views Total: 75
Official Page: Go to website
Last Update: June 18, 2019
License: Apache-2.0

Preview:

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

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

You Might Be Interested In:


Leave a Reply