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.

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


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>


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 data-gallery="manual" href="big-2.jpg">
  <img src="small-2.jpg">
<a data-gallery="manual" href="big-3.jpg">
  <img src="small-3.jpg">

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

$('[data-gallery=manual]').click(function (e) {
  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');
      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
  • Add a
    data-group attribute if you want to set the images in groups.

See live demo and download source code.


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