Responsive Slideshow Modal With Vanilla JavaScript – vShowBox

Category: Javascript , Modal & Popup , Slideshow | February 21, 2018
Author: vipranarayan14
Views Total: 702
Official Page: Go to website
Last Update: February 21, 2018
License: MIT

Preview:

Responsive Slideshow Modal With Vanilla JavaScript – vShowBox

Description:

vShowBox is a vanilla JavaScript plugin that helps you create and display your image slideshow in a responsive lightbox popup.

How to use it:

Download & install the vShowBox library.

# Yarn
$ yarn add vshowbox

# NPM
$ npm install vshowbox --save

Import the vShowBox into your module.

// ES 6
import vShowBox from 'vshowbox';

// CommonJS:
const vShowBox = require('vshowbox');

For browsers, include the following JavaScript and CSS files on the page.

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

Initialize the vShowbox.

const vshowbox = window.vShowBox.init();

Create image previews on the web page.

<section class="sb-previews">

  <div class="sb-preview" style="background-image: url('1.jpeg')" title="Img 1"></div>
  <div class="sb-preview" style="background-image: url('2.jpeg')" title="Img 2"></div>
  <div class="sb-preview" style="background-image: url('3.jpeg')" title="Img 3"></div>
  <div class="sb-preview" style="background-image: url('4.jpeg')" title="Img 4"></div>
  <div class="sb-preview" style="background-image: url('5.jpeg')" title="Img 5"></div>

</section>

Create the slideshow modal.

<section class="sb-modal">

  <span class="sb-slide-count btn"></span>
  <span class="sb-close btn">&times;</span>

  <div class="sb-stage">

    <div class="sb-caption"></div>

    <span class="sb-prev btn">&#10094;</span>
    <span class="sb-next btn">&#10095;</span>

  </div>

</section>

Leave a Reply