⚠️ Attention! This repository will be maintained just in small iteration. The plugin is easy to use, but its customization can be troublesome. To improve plugin's flexibility, I made another repository PhotoViewer which is the enhanced version of Magnify.
Magnify
Magnify is a jQuery plugin to view images just like in windows.
Features
- Modal draggable
- Modal resizable
- Modal maximizable
- Image movable
- Image zoomable
- Image rotatable
- Keyboard control
- Fullscreen showing
- Multiple instances
- Browser support IE7+
- RTL support
Installation
You can install the plugin via npm
$ npm install jquery.magnify --save
or via bower
$ bower install jquery.magnify --save
Usage
1.Include files
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 svg default, you can customize them in options.
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-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-srcattribute 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 inhrefattribute. - Add a
data-captionattribute 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 thetitleoptiontrue. - Add a
data-groupattribute 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
-
draggable
trueIf ture, it allow modal dragging.
-
resizable
trueIf ture, it allow modal resizing.
-
movable
trueIf ture, it allow image moving.
-
keyboard
trueIf ture, it allow keyboard control. It is similar to Windows photo 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
- Q close the Magnify modal
-
title
trueIf ture, it will show image title on header.
-
fixedModalSize
falseIf false, the modal init size will fit to image size.
If true, the modal init size will be set with
modalWidthandmodalHeight. -
modalWidth
320The modal min width.
-
modalHeight
320The modal min height.
-
gapThreshold
0.02There will have a gap if modal too big to beyond the browser.
-
ratioThreshold
0.01Image zoom ratio threshold.
-
minRatio
0.05(5%)The min ratio to show image.
-
maxRatio
16(1600%)The max ratio to show image.
-
icons
You can customize the icons in following key.
-
minimize
svg -
maximize
svg -
close
svg -
zoomIn
svg -
zoomOut
svg -
prev
svg -
next
svg -
fullscreen
svg -
actualSize
svg -
rotateLeft
svg -
rotateRight
svg
-
-
headerToolbar
['maximize','close']The buttons display in header toolbar.
-
footerToolbar
['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight']The buttons display in footer toolbar.
-
fixedContent
trueIf 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
falseIf 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
trueIf true, it allow multiple instances.
-
initEvent
clickThe event to init plugin. Another value is
dblclick. -
initAnimation
trueIf false, it will not have animation at plugin's init.
-
fixedModalPos
falseif true, the modal position will be fixed when change images.
-
zIndex
1090The modal style of z-index, it is useful with multiple instances.
-
dragHandle
The handle of draggable.
-
progressiveLoading
trueIf true, the image will be rendered progressively.
-
customButtons
{}$("[data-magnify=gallery]").magnify({ footerToolbar: [..."myCustomButton"], customButtons: { myCustomButton: { text: "custom!", title: "custom!", click: function (context, e) { alert("clicked the custom button!"); }, }, }, });
Each
customButtonentry accepts the following properties:-
text- the text to be display on the button itself. -
title- the title to be display when hover the button. -
click- a callback function that is called when the button is clicked.
-
Events
You can define callbacks in callbacks option. In each callback you can get the Magnify instance with this or context.
$("[data-magnify=gallery]").magnify({
callbacks: {
beforeOpen: function (context) {
// Will fire before modal is opened
},
opened: function (context) {
// Will fire after modal is opened
},
beforeClose: function (context) {
// Will fire before modal is closed
},
closed: function (context) {
// Will fire after modal is closed
},
beforeChange: function (context, index) {
// Will fire before image is changed
// The argument index is the current image index of image group
},
changed: function (context, index) {
// Will fire after image is changed
// The argument index is the next image index of image group
},
},
});
Contributors
Code Contributors
This project exists thanks to all the people who contribute. [Contribute].
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
License
MIT License
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
3.5k Dec 30, 2022
6 Nov 4, 2022
19 Jul 12, 2022
53 Dec 30, 2022
8 Aug 3, 2022
17 Dec 13, 2022
65 Nov 2, 2022
2.6k Jan 9, 2023
5 Jul 13, 2022
3.9k Dec 26, 2022
29 Jan 8, 2023
8 Aug 5, 2022
2.6k Dec 31, 2022
216 Sep 10, 2022
44 Jul 6, 2022
18 Feb 10, 2022
9 Sep 17, 2022
11 Dec 20, 2022
41 Dec 23, 2022