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

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