A Practical viewer. js image album and viewer. js album

Source: Internet
Author: User

A Practical viewer. js image album and viewer. js album

Viewer. js is a powerful image album plug-in. For SNS dating websites, click thumbnails are usually used to bring up large images at the pop-up layer, and multiple control buttons are available at the pop-up layer, for example, you can zoom in, zoom out, rotate, and recall. You can switch the thumbnail list at the bottom.

Supports mobile device touch events
Supports responsive
Supports zoom in/out
Supports rotation (similar to image rotation on Weibo)
Supports horizontal/vertical flip
Supports image Movement
Supports keyboard
Full Screen slide mode (screen saver supported)
Support for thumbnails
Supports title display
Supports multiple custom events

Online instance
Default Effect JQuery version
Callback Function Custom Method
Usage
<Ul id = "sucaihuo"> <li>  </ li>  </li>  </li>  </li>  </li>  </li> </ul> var viewer = new Viewer (document. getElementById ('sucaihuo'), {url: 'Data-original '});
Parameter Details
Parameters Description Default Value
Inline Enable inline mode False
Button Show the close button in the upper right corner (jQuery version is invalid) True
Navbar Show thumbnail navigation True
Title Display the title of the current image (actual alt attribute and image size) True
Toolbar Display Toolbar True
Tooltip Show zoom percentage True
Movable Whether the image is movable True
Zoomable Whether the image can be scaled True
Rotatable Whether the image can be rotated True
Scalable Whether the image can be flipped True
Transition Excessive use of CSS3 True
Fullscreen Whether to enable full screen during playback True
Keyboard Supported keyboard? True
Interval Playback interval, in milliseconds 5000
ZoomRatio Zoom ratio when the mouse is scroll 0.1
MinZoomRatio Min scaling ratio 0.01
MaxZoomRatio Maximum scaling ratio 100
ZIndex Set the z-index of the Image Viewer in modal Mode 2015
ZIndexInline Set the z-index in inline mode of the Image Viewer 0
Url Set the url of a large image Src
Build Callback function. For details, refer to the demo. Null
Built Callback function. For details, refer to the demo. Null
Show Callback function. For details, refer to the demo. Null
Shown Callback function. For details, refer to the demo. Null
Hide Callback function. For details, refer to the demo. Null
Hidden Callback function. For details, refer to the demo. Null
View Callback function. For details, refer to the demo. Null
Viewed Callback function. For details, refer to the demo. Null
Download

 

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.