viewer.js--a powerful jquery image viewing plugin

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.