A mobile-first module for showing and panning large images in a touch friendly way.

Usage

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

Methods

.magnifik(options)

Initializes the magnifik with the options (an object) given.

$('.magnifik').magnifik({
    classPrefix: "m-"
});

.magnifik(‘open’)

Opens magnifik.

$('.magnifik').magnifik('open');

.magnifik(‘close’)

Closes magnifik.

$('.magnifik').magnifik('close');

.magnifik(‘unbind’)

Removes event handlers from the magnifik context.

$('.magnifik').magnifik('unbind');

.magnifik(‘bind’)

Restores event handlers for the magnifik context.

$('.magnifik').magnifik('bind');

.magnifik(‘destroy’)

Unbinds the events from the magnifik context, and removes it from the DOM.

$('.magnifik').magnifik('destroy');

Configuration

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 <body> 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 <body>. Typically should be left as-is.

Classes

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

Default styles

These are the default styles applied to magnified image(s) and their container.

canvasStyle

{
    position: 'absolute',
    width: '100%',
    height: '100%',
    overflow: 'auto'
}

imageStyle

{
    position: 'absolute',
    top: '0',
    left: '0',
    maxWidth: 'none',
    maxHeight: 'none'
}

Events

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

Contributing

Please see the project’s GitHub page for details on contributing.

License

Licensed under the MIT License.