A feature-rich picture viewer plugin in pure JavaScript that shows all of your photos in a responsive, draggable, navigatable, resizable, maximizable dialog window.
Extra options:
- keyboard navigation.
- Picture descriptions.
- Mounted content material.
- Moveable, rotatable, zoomable photos.
- Font Superior based mostly icons.
- A number of languages.
- Callback capabilities.
The way to use it:
1. Set up and import the PhotoViewer as a module.
# NPM $ npm set up photoviewer --save
import PhotoViewer from 'photoviewer'; @import 'photoviewer/dist/photoviewer.css';
2. Or load the PhotoViewer’s JavaScript and CSS information from the dist folder.
<hyperlink href="css/photoviewer.min.css" rel="stylesheet" /> <script src="js/photoviewer.min.js"></script>
3. Outline the picture paths and descriptions in a JS array as follows:
var images = [
{
src: '1.jpg',
title: 'Image Caption 1'
},
{
src: '2.jpg',
title: 'Image Caption 2'
},
{
src: '3.jpg',
title: 'Image Caption 3'
}
];
4. Initialize the picture viewer and achieved.
var choices = {
// choices right here
};
var viewer = new PhotoViewer(images, choices);
5. You can too create a photograph viewer from a static picture group.
<a data-gallery="instance" href="big-1.jpg"> <img src="small-1.jpg"> </a> <a data-gallery="instance" href="big-2.jpg"> <img src="small-2.jpg"> </a> <a data-gallery="instance" href="big-3.jpg"> <img src="small-3.jpg"> </a>
$('[data-gallery=example]').click on(perform (e) {
e.preventDefault();
var gadgets = [],
choices = {
index: $(this).index()
};
$('[data-gallery=manual]').every(perform () {
let src = $(this).attr('href');
gadgets.push({
src: src
});
});
new PhotoViewer(gadgets, choices);
});
6. To customise the picture viewer, override the choices beneath and move them to the photoviewer() perform on init.
var choices = {
// Allow modal to pull
draggable: true,
// Allow modal to resize
resizable: true,
// Allow picture to maneuver
movable: true,
// Allow keyboard navigation
keyboard: true,
// Exhibits the title
title: true,
// Min width of modal
modalWidth: 320,
// Min peak of modal
modalHeight: 320,
// Disable the modal dimension fastened
fastenedModalDimension: false,
// Disable the picture viewer maximized on init
initMaximized: false,
// Threshold of modal to browser window
gapThreshold: 0.02,
// Threshold of picture ratio
ratioThreshold: 0.1,
// Min ratio of picture when zoom out
minRatio: 0.05,
// Max ratio of picture when zoom in
maxRatio: 16,
// Toolbar choices in header
headerToolbar: ['maximize', 'close'],
// Toolbar choices in footer
footerToolbar: ['zoomIn', 'zoomOut', 'prev', 'fullscreen', 'next', 'actualSize', 'rotateRight'],
// Customise button icon
icons: {
decrease: "<svg viewBox="0 0 24 24" class="svg-inline-icon">n <path fill="currentColor" d="M20,14H4V10H20"></path>n </svg>",
maximize: "<svg viewBox="0 0 24 24" class="svg-inline-icon">n <path fill="currentColor" d="M4,4H20V20H4V4M6,8V18H18V8H6Z"></path>n </svg>",
shut: "<svg viewBox="0 0 24 24" class="svg-inline-icon">n <path fill="currentColor" d="M13.46,12L19,17.54V19H17.54L12,13.46n L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46n L13.46,12Z"></path>n </svg>",
zoomIn: "<svg viewBox="0 0 24 24" class="svg-inline-icon">n <path fill="currentColor" d="M15.5,14L20.5,19L19,20.5L14,15.5V14.71n L13.73,14.43C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,n 6.5 0 0,1 9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.43,n 13.73L14.71,14H15.5M9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5C7,5 5,n 7 5,9.5C5,12 7,14 9.5,14M12,10H10V12H9V10H7V9H9V7H10V9H12V10Z"></path>n </svg>",
zoomOut: "<svg viewBox="0 0 24 24" class="svg-inline-icon">n <path fill="currentColor" d="M15.5,14H14.71L14.43,13.73C15.41,n 12.59 16,11.11 16,9.5A6.5,6.5 0 0,0 9.5,3A6.5,6.5 0 0,0 3,9.5A6.5,n 6.5 0 0,0 9.5,16C11.11,16 12.59,15.41 13.73,14.43L14,14.71V15.5n L19,20.5L20.5,19L15.5,14M9.5,14C7,14 5,12 5,9.5C5,7 7,5 9.5,5C12,n 5 14,7 14,9.5C14,12 12,14 9.5,14M7,9H12V10H7V9Z"></path>n </svg>",
prev: "<svg viewBox="0 0 24 24" class="svg-inline-icon">n <path fill="currentColor" d="M6,18V6H8V18H6M9.5,12L18,6V18L9.5,12Z"></path>n </svg>",
subsequent: "<svg viewBox="0 0 24 24" class="svg-inline-icon">n <path fill="currentColor" d="M16,18H18V6H16M6,18L14.5,12L6,6V18Z"></path>n </svg>",
fullscreen: "<svg viewBox="0 0 24 24" class="svg-inline-icon">n <path fill="currentColor" d="M8.5,12.5L11,15.5L14.5,11L19,17H5n M23,18V6A2,2 0 0,0 21,4H3A2,2 0 0,0 1,6V18A2,2 0 0,0 3,20H21A2,n 2 0 0,0 23,18Z"></path>n </svg>",
actualSize: "<svg viewBox="0 0 24 24" class="svg-inline-icon">n <path fill="currentColor" d="M9.5,13.09L10.91,14.5L6.41,19H10V21n H3V14H5V17.59L9.5,13.09M10.91,9.5L9.5,10.91L5,6.41V10H3V3H10V5n H6.41L10.91,9.5M14.5,13.09L19,17.59V14H21V21H14V19H17.59L13.09,n 14.5L14.5,13.09M13.09,9.5L17.59,5H14V3H21V10H19V6.41L14.5,10.91n L13.09,9.5Z"></path>n </svg>",
rotateLeft: "<svg viewBox="0 0 24 24" class="svg-inline-icon">n <path fill="currentColor" d="M13,4.07V1L8.45,5.55L13,10V6.09n C15.84,6.57 18,9.03 18,12C18,14.97 15.84,17.43 13,17.91V19.93n C16.95,19.44 20,16.08 20,12C20,7.92 16.95,4.56 13,4.07M7.1,18.32n C8.26,19.22 9.61,19.76 11,19.93V17.9C10.13,17.75 9.29,17.41 8.54,n 16.87L7.1,18.32M6.09,13H4.07C4.24,14.39 4.79,15.73 5.69,16.89n L7.1,15.47C6.58,14.72 6.23,13.88 6.09,13M7.11,8.53L5.7,7.11C4.8,n 8.27 4.24,9.61 4.07,11H6.09C6.23,10.13 6.58,9.28 7.11,8.53Z"></path>n </svg>",
rotateRight: "<svg viewBox="0 0 24 24" class="svg-inline-icon">n <path fill="currentColor" d="M16.89,15.5L18.31,16.89C19.21,n 15.73 19.76,14.39 19.93,13H17.91C17.77,13.87 17.43,14.72 16.89,n 15.5M13,17.9V19.92C14.39,19.75 15.74,19.21 16.9,18.31L15.46,n 16.87C14.71,17.41 13.87,17.76 13,17.9M19.93,11C19.76,9.61 19.21,n 8.27 18.31,7.11L16.89,8.53C17.43,9.28 17.77,10.13 17.91,11M15.55,n 5.55L11,1V4.07C7.06,4.56 4,7.92 4,12C4,16.08 7.05,19.44 11,19.93n V17.91C8.16,17.43 6,14.97 6,12C6,9.03 8.16,6.57 11,6.09V10L15.55,n 5.55Z"></path>n </svg>"
},
// Customise language of button title
i18n: {
decrease: 'decrease',
maximize: 'maximize',
shut: 'shut',
zoomIn: 'zoom-in(+)',
zoomOut: 'zoom-out(-)',
prev: 'prev(←)',
subsequent: 'subsequent(→)',
fullscreen: 'fullscreen',
actualSize: 'actual-size(Ctrl+Alt+0)',
rotateLeft: 'rotate-left(Ctrl+,)',
rotateRight: 'rotate-right(Ctrl+.)'
},
// Allow a number of situations
multiInstances: true,
// Allow animation
initAnimation: true,
// Modal rework animation period
animationDuration: 400,
// Disable modal place fastened when change photos
fixedModalPos: false,
// Modal z-index
zIndex: 1090,
// Selector of drag handler
dragHandle: false,
// Begin photos index
index: 0,
// Load the picture progressively
progressiveLoading: true,
// The DOM factor to which viewer might be added
appendTo: 'physique',
// Customized Buttons
customButtons: {},
// Whether or not to set modal css `place: fastened`
positionFixed: true,
// Init modal place `{prime: 0, proper: 0, backside: 0, left: 0}`
initModalPos: null,
});
7. Callback capabilities out there.
var choices = {
callbacks: {
beforeOpen: $$1.noop,
opened: $$1.noop,
beforeClose: $$1.noop,
closed: $$1.noop,
beforeChange: $$1.noop,
modified: $$1.noop
}
};
Changelog:
v3.6.6 (2022-12-24)
- add shortcuts for maximize Alt+X and fullscreen F
v3.6.4 (2022-08-09)
- repair modal dimension challenge on the beginning of modal resizing
v3.6.3 (2022-08-08)
- change the zoom’s argument origin to be optionally available
v3.6.2 (2021-08-04)
- Repair modal dimension which has borders or paddings
v3.6.1 (2021-08-01)
v3.6.0 (2021-07-30)
- Add new possibility positionFixed
- Add new possibility initModalPos
- Add new possibility animationDuration
- Take away fixedContent (use positionFixed as an alternative)
- Help embed mode
- Enhance modal place for appendTo possibility
- Repair bugs
v3.5.8 (2021-04-07)
- right max-width and min-width of picture
v3.5.6 (2021-03-18)
- take away backdrop-filter of css property
v3.5.5 (2021-03-16)
- repair keyboard occasions with a number of situations
v3.5.4 (2020-12-19)
- repair zoom challenge after picture rotation attributable to domq.js
v3.5.3 (2020-09-21)
- improve domq.js to 0.6.4 and repair picture dimension challenge on IE 9+
v3.5.2 (2020-09-19)
- enhance customized button context
- enhance perform title
v3.5.0 (2020-09-18)
- rename headToolbar to headerToolbar
- rename footToolbar to footerToolbar
- add customized buttons possibility
- enhance callback perform arguments
v3.4.0 (2019-11-25)
v3.3.0 (2019-07-14)
- Repair the zIndex possibility challenge one other manner.
- Repair the zIndex challenge when click on shut button.
- Add appendTo possibility.
v3.2.0/1 (2019-07-13)
- Repair the zIndex possibility challenge.
- Add shut keydown(Q) occasion.
- Modified loader overlay place.
v3.1.1 (2019-05-27)
- Repair picture vertical center challenge.
- Add overflow to modal inside.
- Enhance picture loading code.
v3.1.0 (2019-05-13)
v3.0.1 (2019-05-13)
- Mounted animation arguments challenge.
v3.0.0 (2019-05-13)
- Eliminated jQuery dependency.
v2.2.0 (2018-12-31)
- chore(repair): picture rotated challenge when modified
v2.2.0 (2018-12-09)
- Add picture progressive rendering
v2.1.3 (2018-11-26)
v2.1.2 (2018-11-23)
- fastened seize cursor challenge & beautify code
v2.1.1 (2018-10-28)
- chore(repair): improved some type at maximized
v2.1.0 (2018-10-21)
- Added svg icons & eliminated font-awesome
2018-08-08
- modified default ui type
2018-07-29
2018-07-21
- chore(func): modified technique in setImgTitle
This superior jQuery plugin is developed by nzbin. For extra Superior Usages, please verify the demo web page or go to the official web site.
