jquery-based picture viewing plugin

The viewer is a powerful picture viewer. It can realize some functions of acdsee and other view software. It can be moved, scaled, rotated, flipped, and can be used to navigate around a set of images. The picture Viewer also supports mobile devices, which support keyboard control and are very powerful.

Installation

You can install the Picture Viewer plugin via the NMP or bower.

1.npm install imageviewer 2.bower install imageviewer How to useusing this slideshow plugin requires the introduction of jquery (preferably not compressed mini version), Viewer.css and viewer.js files. < link rel = "stylesheet" href = "css/viewer.css" type = "text/css" > < script type = "text/javascript" src = "js/jquery.js" ></ script > < script type = "text/javascript" src = "js/viewer.js" ></ script > HTML structure

<!--single photo--><div> class="Image"Src="Picture.jpg"Alt="Picture"></div><!--a group of pictures--><div> <ulclass="imagespicture.jpg" Alt=picture" ></li> <li>picture-2.jpg "Alt="  Picture 2" Span style= "color: #800000;" >picture-3.jpg "Alt="  Picture 3    

View Code

Initializing plug-ins

After the page DOM element has finished loading, you can initialize the picture Viewer plug-in by using the following method.

// View one image $( ‘.image‘ ).viewer(); // View some images $( ‘.images‘ ).viewer(); Keyboard control

01: Zoom in to natural size. 

View Code

Configuration parameters

You can set the parameters of this picture viewer by using the $ () Viewer (options). If you want to modify the global configuration parameters, you need to use $.fn.viewer.setdefaults (options). Inline: Type: Boolean, default value:False。 Use inline mode to view pictures. Button: Type: Boolean, default value:True。 Displays the button in the upper-right corner of the picture viewer. NavBar: Type: Boolean, default value:True。 Displays the navigation bar. Title: Type: Boolean, default value:True。 Displays the title of the picture. The caption is from the ALT attribute of the picture or the name of the picture resolved from the URL. Toolbar: Type: Boolean, default value:True。 Displays the toolbar. ToolTip: Type: Boolean, default value:True。 Displays the percentage of the picture when zoomed out. Movable: Type: Boolean, default value:True。 Whether the picture can be moved. Zoomable: Type: Boolean, default value:True。 Whether the picture can be zoomed out. Rotatable: Type: Boolean, default value:True。 Whether the picture can be rotated. Scalable: Type: Boolean, default value:True。 Whether the picture can be flipped. Transition: Type: Boolean, default value:True。 Whether to use the CSS3 transition effect for certain specified elements. Fullscreen: Type: Boolean, default value:True。 Whether full-screen mode is allowed. This feature requires the browser to support the full screen API. Keyboard: Type: Boolean, default value:True。 Whether you can use keyboard control. Interval: Type: number, default:5000。 The time interval at which the picture is toggled when it is automatically played. Zoomratio: Type: number, default:0.1。 The scale at which the picture is scaled with the mouse. Minzoomratio: Type: number, default:0.01。 The minimum proportion of the picture to shrink. Maxzoomratio: Type: number, default:100。 The minimum scale at which the picture is enlarged. ZIndex: Type: number, default:2015. Defines the CSS Z for the Picture Viewer modal windowThe value of the Index property. Zindexinline: Type: number, default:0. Defines the image viewer in inline mode CSS Z-The value of the Index property. URL: Type: String or Function, default value:‘Src‘。 Defines the URL address of the original picture. Build: Type: Function, default value:Null."Build.viewer"The shortcut for the event. Built: Type: Function, default value:Null."Built.viewer " Shortcut to the event. Show: Type: Function, default value: null.  "show.viewer"  The shortcut to the event. Shown: Type: Function, default value: null.  "shown.viewer"  The shortcut to the event. Hide: Type: Function, default value: null.  "hide.viewer"  The shortcut to the event. Hidden: Type: Function, default value: null.  "hidden.viewer" The shortcut for the event.  

View Code

Method

Because the picture Viewer plugin uses the way the picture is loaded asynchronously, you need to shown call the following method (modal window mode) or built (inline mode), in addition to the modal window mode show methods and destroy methods.

Modal mode$ (). Viewer ({  shown:function () {    $ (). Viewer ('method'// Inline mode $ (). Viewer ({built:function () {$ (). Viewer ('method'       ) 

View Code

show(): Displays the picture Viewer. Valid only in modal window mode.

hide(): Hides the picture viewer. Valid only in modal window mode.

view([index])：

Index (optional):

• Type:Number
• Default value:0
• In the view of the index of the picture

View a picture by the index of the picture.

$().viewer(‘view‘, 1); // 查看第二张图片   

$ (). Viewer (‘show‘); //直接弹出图片查看器

prev(): View the previous picture.

next(): View the next picture.

move(offsetX[, offsetY]): Move the picture.

offsetX：

• Type:Number
• Default value:0
• The distance in the horizontal direction, in pixels.

offsetY(optional)：

• Type:Number
• The distance in the vertical direction, in pixels.
• If not provided, the default value is offsetX .

$ (). Viewer (‘Move‘,1); $ (). Viewer (‘Move‘, -1,0);// move picture $ () to the left. Viewer (move1, 0); // There is a move picture $ (). Viewer (move0,-1); // move the picture $ () up. Viewer (move0, 1); // move the picture down        

View Code

zoom(ratio[, hasTooltip]): Zooms the picture.

ratio：

• Type:Number
• Zoom in (magnification): Requires a positive number (ratio > 0).
• Zoom Out (shrink): Requires a negative number (ratio < 0)

hasTooltip(optional):

• Type:Boolean
• Default value:false
• Displays the ToolTip.

$().viewer( ‘zoom‘ , 0.1); $().viewer( ‘zoom‘ , -0.1);    zoomTo(ratio[, hasTooltip]): Scales the picture to the specified scale.

ratio：

• Type:Number
• Requires a positive number (ratio > 0)

hasTooltip(optional):

• Type:Boolean
• Default value:false
• Displays the ToolTip.

$().viewer( ‘zoomTo‘ , 0); // Zoom to zero size (0%) $().viewer( ‘zoomTo‘ , 1); // Zoom to natural size (100%)    rotate(degree): Rotate the picture.

degree：

• Type:Number
• Rotate right requires a positive number (ratio > 0)
• Rotate left requires a negative number (ratio < 0)

This method requires the browser to support CSS3 2D Transforms (ie9+).

$().viewer( ‘rotate‘ , 90); $().viewer( ‘rotate‘ , -90);   rotateTo(degree): Rotates the picture to the specified angle.

degree：

• Type:Number

This method requires the browser to support CSS3 2D Transforms (ie9+).

$().viewer( ‘rotateTo‘ , 0); // 将图片重置到0度 $().viewer( ‘rotateTo‘ , 360); // 将图片旋转一周   scale(scaleX[, scaleY]): Flips the picture.

scaleX：

• Type:Number
• Default value:1
• The zoom ratio in the horizontal direction of the picture.
• Do not do anything when the value is 1.

scaleY: (optional

• Type:Number
• The scale of the picture's ordinate direction.
• If not specified, the default value is scaleX .

This method requires the browser to support CSS3 2D Transforms (ie9+).

$().viewer( ‘scale‘ , -1); // 在垂直和水平方向上翻转图片 $().viewer( ‘scale‘ , -1, 1); // 水平翻转 $().viewer( ‘scale‘ , 1, -1); // 垂直翻转 scaleX(scaleX): Flips the picture horizontally.

scaleX：

• Type:Number
• Default value:1
• The zoom ratio in the horizontal direction of the picture.
• Do not do anything when the value is 1.

This method requires the browser to support CSS3 2D Transforms (ie9+).

$().viewer( ‘scaleX‘ , -1); // 水平翻转

scaleY(scaleY): Flips vertically.

scaleY：

• Type:Number
• Default value:1
• The scale of the picture's ordinate direction.
• Do not do anything when the value is 1.

This method requires the browser to support CSS3 2D Transforms (ie9+).

$().viewer( ‘scaleY‘ , -1); // 水平翻转

• Play (): Play the picture.
• stop(): Stops playback.
• full(): Enter modal window mode. Valid only in inline mode.
• exit(): Exits modal window mode. Valid only in inline mode.
• tooltip(): Displays the proportions of the current picture as a percentage. tooltipthe required parameters are set to true .
• toggle(): Toggles the picture size between the original size and the current size.
• reset(): Resets the picture to the element state.
• destroy(): Destroys the image viewer instance.

Event

• Bui ld.viewer : triggered when the picture viewer instance starts to create.
• built.viewer: triggered when a picture viewer instance is created.
• show.viewer: triggered when the picture viewer element starts to display. Only valid in modal window mode.
• shown.viewer: triggered when the picture viewer element is displayed. Only valid in modal window mode.
• hide.viewer: triggered when the picture viewer element starts to hide. Only valid in modal window mode.
• hidden.viewer: triggered when the picture viewer element is hidden. Only valid in modal window mode.

No conflict

If you use other plugins with the same namespace as this picture viewer, you can restore it by using the $.fn.viewer.noConflict method.

<script src="other-plugin.js" ></script><script src="viewer.js" ></ Script><script>//        

View Code

Browser compatible

Chrome (latest 2)

• Firefox (latest 2)
• Internet Explorer 8+
• Opera (latest 2)
• Safari (latest 2)

Turn:

download; https://github.com/fengyuanchen/viewer JQ Plugin library: http://www.jq22.com

Webmaster material; http://sc.chinaz.com

17 Material:

Demo download

jquery-based picture viewing plugin