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

by

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

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

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

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.


Published by Rohit