JavaScript Library For Visualising Images In Photo Slides – gllryjs

Preview:

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