Customizable Gallery Slider Plugin With jQuery - Previewer

File Size: 20.1 KB
Views Total: 3480
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></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">

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


4. Customize the Previewer plugin with the following options.


  // 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.