Magnificent

Documentation will improve over time. Feel free to contribute on Github!

Submit questions or ideas to the issues on GitHub.

Simple example using default options and inner mode.

Using outer mode and a custom zoom level.

Include the CSS and JavaScript from the lib directory in your page. Also include the dependencies (jquery-bridget, jquery-throttle-debounce). Then define some markup as below, and call the jQuery plugin!


  <!-- main element & unzoomed content -->
  <div data-magnificent="SOME_KEY">
    <div class="inner">
      <img src="img/rieti-106848-500x334.jpg" />
    </div>
  </div>
  
  <!-- viewport element & zoomed content -->
  <div data-magnificent-viewport="SOME_KEY">
    <div class="inner">
      <img src="img/rieti-106848.jpg" />
    </div>
  </div>

There are two components.

The main element, which hosts the unzoomed content and handles user interactions. This is the element on which the plugin should be instantiated.
The viewport element, which hosts the zoomed content. In 'inner' mode, this is copied to the main element.

Add a data-magnificent attribute your main element, with a unique key as a value. Add a data-magnificent-viewport attribute on your viewport element with a matching value.

Also, to indicate which elements should be considered as the unzoomed and zoomed content, add inner classes to an element inside each of these. (This allows for flexibility in the inner DOM, e.g. wrapping it for different border styles.)

.magnificent(options)

Initialize the plugin, optionally with options (documented below).

.magnificent('instance')

Return the Magnificent instance of the first element.

.magnificent('focus', position)

Focus the viewport and lens on the given coordinates.

Pass an object with top and left properties as percentage values from 0 to 1.

.magnificent('layout')

Tell the widget(s) to redraw. Used internally on events.

.magnificent('destroy')

Destroy the widget. Removes event listeners. Best attempt made to restore original state of DOM.

Many of the important options are documented here.

See the source code for all available options.

Name	type	default	description
mode	string	`'inner'`	The mode to use: `'inner'` Viewport overlays unzoomed area. `'outer'` Viewport appears separately.
zoomWidth			See viewport.zoomWidth
viewport.zoomWidth	string \| number \| function	'3x'	Determines the zoomed width. Height should be proportional. If a number, should be the desired width in pixels. If a string, should be either: a float number followed by 'x' for a factor of the unzoomed area width suitable as an argument to `$().width()` If a function, should return a suitable argument to `$().width()`.
viewport.toggle	boolean	true	Whether to toggle visibility of the viewport on interaction, e.g. when the mouse enters and leaves the unzoomed area.
smoothMove	boolean	true	Whether to use smooth the motion when focusing.

Magnificent

Examples

Usage

Markup Example

Methods

.magnificent(options)

.magnificent('instance')

.magnificent('focus', position)

.magnificent('layout')

.magnificent('destroy')

Options

License