The Viewer is a powerful jQuery image-browsing 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

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.

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.