Responsive Feature-rich Photo Viewer Plugin For jQuery

Responsive Feature-rich Photo Viewer Plugin For jQuery

A feature-rich photo viewer plugin for jQuery that displays all your images in a responsive, draggable, navigatable, resizable, maximizable dialog window.

More features:

  • keyboard navigation.
  • Shows image's title.
  • Fixed content.
  • Image zoom & image rotate.
  • Font Awesome based icons.
  • Multiple languages.
  • Callback functions.

How to use it:

1. Load the necessary Font Awesome Iconic Font.

<link rel="stylesheet" href="font-awesome.min.css">

2. Load the Photo Viewer Plugin's files after you've loaded the latest jQuery library.

<link href="css/photoviewer.css" rel="stylesheet">
<script src="" 
<script src="js/photoviewer.js"></script>

3. Create a set of images for the photo viewer with the following data attributes:

  • data-gallery: gallery name
  • data-caption: image caption
  • data-group: group name
<div class="myGallery">
  <a data-gallery="example" 
     data-caption="Caption 1" 
    <img src="1.jpg" alt="Image 1">
  <a data-gallery="example" 
     data-caption="Caption 2" 
    <img src="2.jpg" alt="Image 2">
  <a data-gallery="example" 
     data-caption="Caption 3" 
    <img src="3.jpg" alt="Image 3">

4. Initialize the photo viewer and done:


5. You're also able to specify the images in a JS array.

new PhotoViewer([{
      src: '1.jpg',
    }, {
      src: '2.jpg',
    }, {
      src: '3.jpg',
    // more options

6. To customize the photo viewer, override the options below and pass them to the photoviewer() function on init.

  // Enable draggable
  draggable: true,
  // Enable resizable
  resizable: true,
  // Enable movable
  movable: true,
  // Enable keyboard navigation
  keyboard: true,
  // Shows the title
  title: true,
  // Min width of modal
  modalWidth: 320,
  // Min height of modal
  modalHeight: 320,
  // Makes the page content fixed
  fixedContent: true,
  // Makes the modal size fixed
  fixedModalSize: false,
  // Disable the image viewer maximized on init
  initMaximized: false,
  // Threshold of modal to browser window
  gapThreshold: 0.02,
  // Threshold of image ratio
  ratioThreshold: 0.1,
  // Min ratio of image when zoom out
  minRatio: 0.1,
  // Max ratio of image when zoom in
  maxRatio: 16,
  // Toolbar options in header
  headToolbar: ['maximize', 'close'],
  // Toolbar options in footer
  footToolbar: ['zoomIn', 'zoomOut', 'prev', 'fullscreen', 'next', 'actualSize', 'rotateRight'],
  // Customize button icons
  icons: {
    minimize: 'fa fa-window-minimize',
    maximize: 'fa fa-window-maximize',
    close: 'fa fa-close',
    zoomIn: 'fa fa-search-plus',
    zoomOut: 'fa fa-search-minus',
    prev: 'fa fa-arrow-left',
    next: 'fa fa-arrow-right',
    fullscreen: 'fa fa-photo',
    actualSize: 'fa fa-arrows-alt',
    rotateLeft: 'fa fa-rotate-left',
    rotateRight: 'fa fa-rotate-right'
  // i18n
  i18n: {
    minimize: 'minimize',
    maximize: 'maximize',
    close: 'close',
    zoomIn: 'zoom-in(+)',
    zoomOut: 'zoom-out(-)',
    prev: 'prev(←)',
    next: 'next(→)',
    fullscreen: 'fullscreen',
    actualSize: 'actual-size(Ctrl+Alt+0)',
    rotateLeft: 'rotate-left(Ctrl+,)',
    rotateRight: 'rotate-right(Ctrl+.)'
  // Enable multiple instances
  multiInstances: true,
  // Enable animations
  initAnimation: true,
  // Disable modal position fixed when change images
  fixedModalPos: false,
  // Modal z-index
  zIndex: 1090,
  // Selector of drag handler
  dragHandle: false,
  // index
  index: 0

7. Callback functions available.

  callbacks: {
    beforeOpen: $.noop,
    opened: $.noop,
    beforeClose: $.noop,
    closed: $.noop,
    beforeChange: $.noop,
    changed: $.noop

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

  • Publication date: 20.07.2018
  • Source