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

[ website ]

If you want to support IE8, please goto magnify-lower.

• Modal draggable.
• Modal resizable.
• Modal maximizable.
• Image movable.
• Image zoomable.
• Image rotatable.
• Keyboard control.
• Fullscreen showing.
• Multiple instances.
• Browser support.

The usage of magnify is very simple.

<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">

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-2jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg">
  <img src="small-3.jpg">
</a>

or

<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.

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();

• draggable true

  If ture, it allow modal dragging.

• resizable true

  If ture, it allow modal resizing.

• movable true

  If ture, it allow image moving.

• keyboard 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 true

  If ture, it will show image title on header.

• fixedModalSize false

  If false, the modal init size will fit to image size.

  If true, the modal init size will be set with modalWidth and modalHeight.

• modalWidth 320

  The modal min width.

• modalHeight 320

  The modal min height.

• gapThreshold 0.02

  There will have a gap if modal too big to beyond the browser.

• ratioThreshold 0.01

  Image zoom ratio threshold.

• minRatio 0.1 (10%)

  The min ratio to show image.

• maxRatio 16 (1600%)

  The max ratio to show image.

• icons

  You can customize the icons class in following key.

  • maximize fa fa-window-maximize

  • close fa fa-close

  • zoomIn fa fa-search-plus

  • zoomOut fa fa-search-minus

  • prev fa fa-arrow-left

  • next fa fa-arrow-right

  • fullscreen fa fa-photo

  • actualSize fa fa-arrows-alt

  • rotateLeft fa fa-rotate-left

  • rotateRight fa fa-rotate-right

  • loading fa fa-spinner fa-pulse

• headToolbar ['maximize','close']

  The buttons display in header toolbar.

• footToolbar ['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight']

  The buttons display in footer toolbar.

• fixedContent true

  If true, the content will be fixed.

• i18n

  You can customize the buttons title in following key.

  • maximize maximize

  • close close

  • zoomIn zoom-in

  • zoomOut zoom-out

  • prev prev

  • next next

  • fullscreen fullscreen

  • actualSize actual-size

  • rotateLeft rotate-left

  • rotateRight rotate-right

• initMaximized false

  If false, the modal size will be set of image size or what you set.

  If true, the modal size will be set maximized when init.

• multiInstances true

  If true, it allow multiple instances.

• initEvent click

  The event to init plugin. Another value is dblclick.

• initAnimation true

  If false, it will not have animation at plugin's init.

• changeImgWithModalFixed false

  if true, the modal size will be fixed when change images.

MIT License

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.