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.
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.
- Array with objects of image info.
- 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.