Magnify is a jQuery plugin to view images just like in windows.
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 inhref
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 thetitle
optiontrue
. - 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 imagectrl + alt + 0
image autual sizectrl + ,
rotate image leftctrl + .
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
andmodalHeight
. -
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.
-
minimize
fa fa-window-minimize
-
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
-
loader
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.
-
minimize
minimize
-
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.
-
fixedModalPos
false
if true, the modal position 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.