<!-- the magnifik -->
<a class="magnifik" href="big.jpg">
<!-- the thumbnail -->
<img src="thumbnail.jpg">
</a>
<!-- include zepto.js or jquery.js -->
<script src="zepto.js"></script>
<!-- include magnifik.js -->
<script src="magnifik.js"></script>
<!-- construct the magnifik -->
<script>$('a.magnifik').magnifik()</script>
The element passed to .magnifik() should reference a high resolution
image.
When the thumbnail is clicked, the high resolution image will be shown. Clicking on image again will dimiss it.
Initializes the magnifik with the options (an object) given.
$('.magnifik').magnifik({
classPrefix: 'm-'
});
Opens magnifik.
$('.magnifik').magnifik('open');
Closes magnifik.
$('.magnifik').magnifik('close');
Removes event handlers from the magnifik context.
$('.magnifik').magnifik('unbind');
Restores event handlers for the magnifik context.
$('.magnifik').magnifik('bind');
Unbinds the events from the magnifik context, and removes it from the DOM.
$('.magnifik').magnifik('destroy');
Below are the options available in the configuration object:
| Name | Default | Description |
|---|---|---|
| classPrefix | "m-" |
This prefix is inserted before all class references for conflict avoidance. For example, default close class will be m-close. |
| stage | element | DOM node that will receive generated magnifik markup. |
| classNames | Object, see below | Contains class names for various parts of magnifik. Classes can be overriden individually. |
| ratio | 2 |
Zoomed in image is magified to be ratio times bigger than the stage. |
| seekImage | true |
If thumbnail image is not found in the anchor element used as context, Magnifik will go up in DOM tree until it finds nearby image. Set to false to restrict image lookups to stay within context |
| clickCloses | true |
Specifies if clicking or tapping in place on the magnified image should close magnified view |
| activationEvent | "click" |
Override to use alternate event for all magnifik control interactions |
| canvasStyle | Object, see below | Extra CSS properties to be applied to canvas. You can delete default properties by setting their value to undefined. |
| imageStyle | Object, see below | Extra CSS properties to be applied to low-res and high-res magnified image. You can delete default properties by setting their value to undefined. |
| stageHTML | Function | Generates HTML of magnified state of magnifik module. See examples to see how to change it |
| globalStyle | Function | Generates CSS for magnifik acting upon . Typically should be left as-is. |
| Name | Class | Description |
|---|---|---|
| zooming | m-zooming |
Applied to stage (usually body element) when magnifik is active |
| close | m-close |
Should be added to custom close buttons within magnifik markup |
| control | m-magnifikControl |
Internal, added to all top-level elements injected by magnifik |
| canvas | m-magnifikCanvas |
Applied to div wrapper that contains both low and high resolution images |
| thumb | m-magnifikThumb |
Applied to low resolution (thumbnail) image |
| full | m-magnifikFull |
Applied to high resolution image |
These are the default styles applied to magnified image(s) and their container.
{
position: 'absolute'
, width: '100%'
, height: '100%'
, overflow: 'auto'
}
{
position: 'absolute'
, top: '0'
, left: '0'
, maxWidth: 'none'
, maxHeight: 'none'
}
The magnifik emits the following events:
| Name | Description |
|---|---|
| beforeOpen | Fired before magnifik starts opening |
| afterOpen | Fired when magnifik is fully open |
| beforeClose | Fired before magnifik starts closing |
| afterClose | Fired after magnifik finishes closing |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent