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
View Demo Download Now
Some plug-in website provides the download package is defective, cannot be compatible with IE8-10. The error behaves as a magnified picture is not taken to the URL, causing the picture to not appear. So this link is the official demo of the viewer, and the open source code on GitHub.
How to use:
1. Introduction of CSS and JS
<link rel= "stylesheet" href= "Css/viewer.min.css" ><script src= "Js/viewer.min.js" ></script>
2. HTML section
<ulID= "Viewer"> <Li><imgsrc= "Img/tibet-1.jpg"data-original= "Img/tibet-1.jpg"alt= "Picture 1"></Li> <Li><imgsrc= "Img/tibet-2.jpg"data-original= "Img/tibet-2.jpg"alt= "Picture 2"></Li> <Li><imgsrc= "Img/tibet-3.jpg"data-original= "Img/tibet-3.jpg"alt= "Picture 3"></Li> <Li><imgsrc= "Img/tibet-4.jpg"data-original= "Img/tibet-4.jpg"alt= "Picture 4"></Li> <Li><imgsrc= "Img/tibet-5.jpg"data-original= "Img/tibet-5.jpg"alt= "Picture 5"></Li> <Li><imgsrc= "Img/tibet-6.jpg"data-original= "Img/tibet-6.jpg"alt= "Picture 6"></Li></ul>
Data-original is used to store enlarged image address, if not present, the plugin will take the image of the SRC address. If you want to enlarge and then change a larger image, you can write the path of the large map in the data-original attribute.
Alt is used to hold the caption of the picture.
3. JavaScript section
$ (' #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 |
viewer.js--a powerful jquery image viewing plugin