Responsive Photo Gallery with Pure JavaScript

Category: Gallery , Javascript | June 29, 2015
Author: OmarIthawi
Views Total: 5,026 views
Official Page: Go to website
Last Update: June 29, 2015
License: MIT

Preview:

Responsive Photo Gallery with Pure JavaScript

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'));
}());

You Might Be Interested In:


One thought on “Responsive Photo Gallery with Pure JavaScript

  1. Stacey Mansfield

    how can I add multiple ID for multiple galleries on one page please 🙂

    Reply

Leave a Reply