Magnify

618插件网专注移动端插件

Examples

All the pictures come from Flickr website, copyright to the original author.

Usage

The usage of magnify is very simple.

1.Include files

<link href="/path/to/magnify.css" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

The icons in magnify use font-awesome default, you can customize them in options. If you use default options, you should link font-awesome css.

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2.Html structure

The default structure as below:

<a data-magnify="gallery" href="big-1.jpg">
  <img src="small-1.jpg">
</a>
<a data-magnify="gallery" href="big-2.jpg">
  <img src="small-2.jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg">
  <img src="small-3.jpg">
</a>

<img data-magnify="gallery" data-src="big-1.jpg" src="small-1.jpg">
<img data-magnify="gallery" data-src="big-2.jpg" src="small-2.jpg">
<img data-magnify="gallery" data-src="big-3.jpg" src="small-3.jpg">

All structures above have optional attributes as below:

Add a data-src attribute to link big image if you do not want to use a <a> tag. If you use it in a <a> tag, it will override the image link in href attribute.
Add a data-caption attribute if you want to show a caption. If you are not using this attribute, it will show the image name in the url when you set the title option true.
Add a data-group attribute if you want to set the images in groups.

3.Call plugin

If you add a data-magnify attribute, you can write none of js.

Of course, you can use selector to call the plugin as following code:

$('[data-magnify=gallery]').magnify(options);

Options

Name	Type	Default	Description
draggable	boolean	`true`	If ture, it allow modal dragging
resizable	boolean	`true`	If ture, it allow modal resizing.
movable	boolean	`true`	If ture, it allow image moving.
keyboard	boolean	`true`	If ture, it allow keyboard control. It is similar to Windows viewer. `←` prev image `→` next image `+` zoom in image `-` zoom out image `ctrl + alt + 0` image autual size `ctrl + ,` rotate image left `ctrl + .` rotate image right
title	boolean	`true`	If ture, it will show image title on header.
fixedModalSize	boolean	`false`	Init modal size will expand with image size.
modalWidth	number	`320`	Set init modal width. The option is only available when you set `fixedModalSize` true
modalHeight	number	`320`	Set init modal height. The option is only available when you set `fixedModalSize` true
gapThreshold	number	`0.02`	There will have a gap if modal too big to beyond the browser.
ratioThreshold	number	`0.01`	Image zoom ratio threshold
minRatio	number	`0.1` (10%)	The min ratio to show image.
maxRatio	number	`16` (1600%)	The max ratio to show image.
icons: {
maximize	string	`fa fa-window-maximize`	The maximize button class
close	string	`fa fa-close`	The close button class
zoomIn	string	`fa fa-search-plus`	The zoomIn button class
zoomOut	string	`fa fa-search-minus`	The zoomOut button class
prev	string	`fa fa-arrow-left`	The prev button class
next	string	`fa fa-arrow-right`	The next button class
fullscreen	string	`fa fa-photo`	The fullscreen button class
actualSize	string	`fa fa-arrows-alt`	The actualSize button class
rotateLeft	string	`fa fa-rotate-left`	The rotateLeft button class
rotateRight	string	`fa fa-rotate-right`	The rotateRight button class
}
headToolbar	array	`[ 'maximize', 'close' ]`	The buttons display in header toolbar.
footToolbar	array	`[ 'zoomIn', 'zoomOut', 'prev', 'fullscreen', 'next', 'actualSize', 'rotateRight' ]`	The buttons display in footer toolbar.
fixedContent	boolean	`true`	If true, the content will be fixed.