Magnify

Magnify is a jQuery plugin to view images just like in Windows.

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.