JavaScript Library For Visualising Images In Photo Slides – gllryjs

Category: Gallery , Javascript , Slideshow | April 20, 2015
Author: dimitara
Views Total: 1,339
Official Page: Go to website
Last Update: April 20, 2015
License: MIT

Preview:

JavaScript Library For Visualising Images In Photo Slides – gllryjs

Description:

gllryjs is a simple html/javascript library for visualising images in photo slides mode with some nice extensions:

  • breadcrumbs to track current image and easy access to specified slide.
  • keyboard shortcuts for prev/next slide.
  • fullscreen mode aka overlay support.
  • auto play with configurable interval.
  • multiple actions that can be positioned over a specific slide.
  • swipe support for mobile devices.
  • infinite slide.
  • preset animations while switching the images.
  • auto titles of the images based on their alt attribute.

Basic usage:

Load the Gllry’s JavaScript and Stylesheet in the html page.

<script src="path/to/gllry.js"></script>
<link rel="stylesheet" href="path/to/gllry.css">

Create a list of images as follow.

<div id="gllry" class="gllry size">
  <ul>
    <li>
      <img alt="Image 1" src="1.jpg" />
    </li>
    <li>
      <img alt="Image 2" src="2.jpg" />
    </li>
    <li>
      <img alt="Image 3" src="3.jpg" />
    </li>
    <li>
      <img alt="Image 4" src="4.jpg" />
    </li>
    <li>
      <img alt="Image 5" src="5.jpg" />
    </li>
  </ul>
</div>

Create a new instance.

window.addEventListener('load', function(){
  window.gllry = new Gllry('gllry', {
    breadcrumbs:true,
    autoPlay:3000,
    headings:true,
    action: {
      text: 'Signup',
      callback: function(){gllry.hide()},
      timeout:0
    },
    animate:true
  });
});

You Might Be Interested In:


Leave a Reply