Responsive Feature-rich Photo Viewer Plugin For jQuery

Responsive Feature-rich Photo Viewer Plugin For jQuery
File Size: 167 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<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" 
     data-group="a" 
     href="1.jpg">
    <img src="1.jpg" alt="Image 1">
  </a>
  <a data-gallery="example" 
     data-caption="Caption 2" 
     data-group="a" 
     href="2.jpg">
    <img src="2.jpg" alt="Image 2">
  </a>
  <a data-gallery="example" 
     data-caption="Caption 3" 
     data-group="a" 
     href="3.jpg">
    <img src="3.jpg" alt="Image 3">
  </a>
  ...
</div>

4. Initialize the photo viewer and done:

$('[data-gallery=example]').photoviewer();

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.

$('[data-gallery=example]').photoviewer({

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

$('[data-gallery=example]').photoviewer({

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

});

Changelog:

2018-08-08

  • modified default ui style

2018-07-29

  • v2.0.0

2018-07-21

  • chore(func): modified method in setImgTitle

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