mobify / magnifik Goto Github PK

An image zooming module for mobile

JavaScript 86.02% HTML 13.98%

magnifik's Introduction

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

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
magnifik:opening	Fired before magnifik starts opening
magnifik:open	Fired when magnifik is fully open
magnifik:closing	Fired before magnifik starts closing
magnifik:close	Fired after magnifik finishes closing

magnifik's People

Contributors

Stargazers

Watchers

Forkers

nastiatikk mauricionobrega scalvert harat andreaslangsays troysk duanegarber kublaj davidtruchet jaw-drop dianapaliy

magnifik's Issues

Magnifik panning doesn’t work on Android 2.3 Browser

On older Android devices (specifically 2.3.3 Browser), panning won’t work on the opened magnifik canvas. Steps to reproduce:

Using Android 2.3.3 Browser, navigate to http://mobify.github.io/magnifik/
Tap the lovely Mr. Murray
Try to pan

Expected: it pans; actual: no dice.

Add bower.json

Add bower.json so magnifik can be downloaded via bower.

destroy() doesn't work

I got the following error when I tried to use $('.magnifik').magnifik('destroy'):

"Uncaught TypeError: undefined is not a function"

Incorrect position when re-zooming

When you initially click on the image to zoom, it correctly positions where you click at the center of the viewport. However, when you close magnifik and click again to re-zoom, the positioning is now at the absolute top/left. It doesn't so bad with the default ratio of 2, but when you increase the ratio to something like 6, you will likely just see white space when you zoom in because the actual image is in the center (forcing you to pan to it).

Magnifik doesn't work well when pinch & zoom is enabled

When pinch & zoom is left enabled on mobile, Magnifik behaves… strangely. It's odd to zoom and scroll around the page as well as the Magnifik frame.

Perhaps we should disable pinch & zoom when Maginfik is activated?

(Feel free to come by/ask me for any clarification… this is a bit of a nebulous issue)

this.$element[op] is not a function

when chose zepto.js, It does not work .

//////////
Now it is ok 。

Magnifik zoom-out (with Mobify.js)

Seems Magnifik dosn't work internal when you try to zoom-out.

The code:
{>_moduleScript:magnifik/}
(function($) {
$('a.magnifik').magnifik();
})(Mobify.$)

The mistake console message when zoom-out:
Uncaught TypeError: Object # has no method 'detach' magnifik.min.js:2
t.UI.Magnifik.e.close magnifik.min.js:2
boundClose magnifik.min.js:2
proxyfn

Here is what I got from talks with the team:

Zepto is built into Mobify.js and it doesn't have detach method. It can be fixed with jQuery but since there is a Zepto you can't simply add it. So I guess some addition to documentation should be added about how to connect jQuery for internal use (probably not here on GitHub but in JIRA for locals) or make the fix in JS to let it works.

Reset scale on close

Hi. Thanks for making a fantastic and simple image enlargement. It meets my needs perfectly, with one minor exception: scaling the enlargement also scales the page that the enlargement is linked from. So if I close the enlargement without zooming back to the initial display scale, I get a weird, zoomed-in page.

I understand that the pinch-zoom scaling is native and operating outside the CSS/HTML rendering of the browser. But it seems to me that the initial scale could be reset on the close event. Is this something that is possible and that you'd be willing to provide code for or add to the script itself?

Pinch and pull not working

Is there any specific configuration to enable pinch and pull for mobile when the image is zoomed?

I can't seem to hook into the magnifik:close event

I am trying to run some code after the Magnifik image closes. The documentation mentions there's an Event for this (magnifik:close), but I can't seem to figure out how to utilize it. This is the code I'm trying now:

$('a.magnifik').magnifik({
    close: function() {
        alert('hi');
    }
});

Please let me know what I'm doing wrong.

Thanks!