Customizable Gallery Slider Plugin With jQuery - Previewer

Previewer is a simple, customizable jQuery plugin that displays a fullscreen lightbox to showcase your galley photos just like an image carousel.

Features:

• CSS3 based animations.
• Fullscreen mode.
• Autoplay.
• Uses previous and next navigation buttons to move through gallery images.
• Keyboard navigation.
• Comes with a number based paginator which tells you where you are in the gallery.

How to use it:

1. Load the jQuery Previewer plugin's files your html document which has jQuery library loaded.

<link rel="stylesheet" href="previewer.css">
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="previewer.js"></script>

2. Wrap the image you want to present into a container with the CSS class of 'gallery-wrapper'.

<div class="gallery-wrapper">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">
  ...
</div>

3. Call the function on the top container to initialize the plugin with default options.

$('.gallery-wrapper').previewer({});

4. Customize the Previewer plugin with the following options.

$('.gallery-wrapper').previewer({

  // Fullscreen mode
  fullScreen: false,

  // Pagination
  pagination: true,
  paginationType: 'number', // Options: numbers, bullets
  paginationPosition: 'topRight', // Options: topRight, topLeft, bottomRight, bottomLeft

  // Navigation
  navigation: true,
  navPrevText: 'PREV',
  navNextText: 'NEXT',
  closeButtonText: 'X',

  // Enable keyboard navigation
  keyboardNavigation: true,

  // Autoplay
  autoPlay: false,
  slideTimeout: 1000,

  // Transition effects.
  // easeIn, easeOut, easeInOut, outCubic, inBack or inOutBack
  previewEffect: 'linear'

});

 

---

This awesome jQuery plugin is developed by ofelix03. For more Advanced Usages, please check the demo page or visit the official website.