jQuery plugin to view images just like in Windows – photoviewer.js

PhotoViewer is a JS plugin to view images just like in windows. It is a feature-rich photo viewer plugin for jQuery that displays all your images in a responsive, draggable, navigatable, resizable, maximizable dialog window.
photoviewer
Features:

  • Modal draggable.
  • Modal resizable.
  • Modal maximizable.
  • Image movable.
  • Image zoomable.
  • Image rotatable.
  • Keyboard control.
  • Fullscreen showing.
  • Multiple instances.



Libraries

Include the lastest jQuery library after that add plugins JS+CSS Library

<!-- Core CSS file -->
<link href="/path/to/photoviewer.css" rel="stylesheet">
 
<!-- JQuery file -->
<script src="/path/to/jquery.js"></script>
<!-- Core JS file -->
<script src="/path/to/photoviewer.js"></script>

Initializing

The usage of photoviewer is very simple, the PhotoViewer constructor has 2 argument.

  1. Array with objects of image info.
  2. Options
// build images array
var items = [
    {
        src: 'path/to/image1.jpg', // path to image
        title: 'Image Caption 1' // If you skip it, there will display the original image name(image1)
    },
    {
        src: 'path/to/image2.jpg',
        title: 'Image Caption 2'
    }
];
 
// define options (if needed)
var options = {
    // optionName: 'option value'
    // for example:
    index: 0 // this option means you will start at first image
};
 
// Initialize the plugin
var viewer = new PhotoViewer(items, options);



Initializing form a list of links

<a data-gallery="manual" href="big-1.jpg">
  <img src="small-1.jpg">
</a>
<a data-gallery="manual" href="big-2.jpg">
  <img src="small-2.jpg">
</a>
<a data-gallery="manual" href="big-3.jpg">
  <img src="small-3.jpg">
</a>

You should get the image src and the index of element clicked manually to create the images array.

$('[data-gallery=manual]').click(function (e) {
 
  e.preventDefault();
 
  var items = [],
    // get index of element clicked
    options = {
      index: $(this).index()
    };
 
  // looping to create images array
  $('[data-gallery=manual]').each(function () {
    let src = $(this).attr('href');
    items.push({
      src: src
    });
  });
 
  new PhotoViewer(items, options);
 
});



By passing data attribute

<img data-gallery="jquery" data-src="big-1.jpg" src="small-1.jpg">
<img data-gallery="jquery" data-src="big-2.jpg" src="small-2.jpg">
<img data-gallery="jquery" data-src="big-3.jpg" src="small-3.jpg">

All structures above have optional attributes as below:

  • Add a
    data-src attribute to link big image if you do not want to use a
    <a> tag. If you use it in a
    <a> tag, it will override the image link in
    href attribute.
  • Add a
    data-title attribute if you want to show a title. If you are not using this attribute, it will show the image name in the
    url when you set the
    title option
    true.
  • Add a
    data-group attribute if you want to set the images in groups.

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by nzbin. Visit their official github repository for more information and follow for future updates.