Responsive Photo Gallery with Pure JavaScript

Preview:

Description:

A pure JavaScript gallery that helps you showcase your images with thumbnails and arrows navigation. Fully responsive and mobile touch friendly.

How to use it:

Load the gallery.min.css stylesheet in the document’s head section.

<link rel="stylesheet" href="dist/css/gallery.min.css">

Add your images & thumbnails into the webpage as follows:

<div id="mygallery" class="gallery">
  <div class="images">
    <div class="active" style="background-image: url(img/01.jpg)"></div>
    <div style="background-image: url(img/02.jpg)"></div>
    <div style="background-image: url(img/03.jpg)"></div>
    <div style="background-image: url(img/04.jpg)"></div>
    <span class="left"></span>
    <span class="right"></span>
  </div>
  <div class="thumbs">
    <div class="active" style="background-image: url(img/01.jpg)"></div>
    <div style="background-image: url(img/02.jpg)"></div>
    <div style="background-image: url(img/03.jpg)"></div>
    <div style="background-image: url(img/04.jpg)"></div>
  </div>
</div>

Load the hammer.js for touch gestures support.

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script>

Load the gallery.min.js script at the bottom of the web page.

 <script src="js/gallery.js"></script>

Initialize the gallery.

;(function () {
  'use strict';
  Gallery.init(document.getElementById('mygallery'));
}());