The Viewer is a powerful jQuery image-browsing plugin.

The Viewer is a powerful jQuery image-browsing plugin.

Main functions:

• Support options
• Support methods
• Support Events
• Support Touch
• Support Mobile
• Support Scaling
• Support rotation
• Support keyboard
• Cross-browser support

Link: Viewer's official demo, and open source code on GitHub.

How to use: 1. Introducing CSS and JS

<link rel= "stylesheet" href= "Css/viewer.min.css" ><script src= "Js/viewer.min.js" ></script>

2. HTML section

<ul id= "Viewer" >    <li> </li>    <li></li>    <li></li>    <li ></li>    <li></li>    <li></li></ul>

The plugin will take the SRC address of the image by default. If you want to enlarge and then change a larger image, you can write the path of the large map in the Data-original property, and then set the URL: "Data-original".

Alt is used to hold the caption of the picture.

3. JavaScript section (JQuery dependent)

$ (' #viewer '). Viewer ();

Configuration

name	type	Default Value	Description
Inline	Boolean value	False	Enable inline mode
button	Boolean value	True	Show top right Close button (invalid jQuery version)
NavBar	Boolean/integral type	True	Show thumbnail navigation
Title	Boolean/integral type	True	Displays the title of the current picture (realistic ALT attribute and image size)
Toolbar	Boolean/integral type	True	Show toolbars
ToolTip	Boolean value	True	Show zoom percentage
Movable	Boolean value	True	Whether the picture can be moved
Zoomable	Boolean value	True	Whether the picture can be scaled
Rotatable	Boolean value	True	Whether the picture can be rotated
Scalable	Boolean value	True	Whether the picture can be flipped
Transition	Boolean value	True	Excessive use of CSS3
Fullscreen	Boolean value	True	Whether to Fullscreen when playing
Keyboard	Boolean value	True	Whether the keyboard is supported
Interval	Integral type	5000	Playback interval, in milliseconds
Zoomratio	Floating point Type	0.1	Zoom ratio when scrolling with the mouse
Minzoomratio	Floating point Type	0.01	Minimum zoom ratio
Maxzoomratio	Digital	100	Maximum zoom ratio
ZIndex	Digital	2015	Z-index when setting the picture viewer modal mode
Zindexinline	Digital	0	Z-index when setting the image Viewer inline mode
Url	string/function	Src	Set the URL of a large picture
Build	Function	Null	callback function, see the demo in detail
Built	Function	Null	callback function, see the demo in detail
Show	Function	Null	callback function, see the demo in detail
Shown	Function	Null	callback function, see the demo in detail
Hide	Function	Null	callback function, see the demo in detail
Hidden	Function	Null	callback function, see the demo in detail
View	Function	Null	callback function, see the demo in detail
Viewed	Function	Null	callback function, see the demo in detail

Parameter usage: (with default values: see: Official demo)

$ (' #viewer '). Viewer ({url: "data-original"});

The Viewer is a powerful jQuery image-browsing plugin.