magnificent

Zoom responsively. A jQuery plugin for responsive zoom of images & more!

Table of Contents

Demo
Features
- 2.0
- 2.1
- 2.2
Install
- Bower
- npm
- Manual
Usage
- Load
- Integrate
Analytics
Contributing
- Build Docs
- Tests
v1.x
Alternatives
License

(Table of contents generated by verb)

Demo

Check out the demo! Or the data-* attributes demo.

Features

2.0

Scroll-to-zoom
Drag interaction
Inline option
Control buttons
Different proportions for thumb vs. zoom
CSS 3D transforms
Full screen (coming soon)
Event support, e.g. for stats/HUDs

2.1

Touch interaction (pan, pinch)
Analytics
Stabilized scroll-to-zoom, better for touchpads

2.2

Support data-* attributes for #37.

Install

Bower

Install with bower

$ bower install magnificent --save

npm

Install with npm

$ npm i magnificent --save

Manual

Download manually.

Load

If you're using AMD or Browersify, you'll probably just want to specify any main files you need, e.g. src/js/mag-jquery.js, as dependencies in your script(s).

You'll also want to include the CSS files below in your page.

Otherwise, you'll have to include individually in your page any main files you need, preceded by their dependencies.

First, any dependencies of any main files you need:
- jquery@~2.1.3
  - bower_components/jquery/dist/jquery.js
- jquery-bridget@~1.1.0
  - bower_components/jquery-bridget/jquery.bridget.js
- jquery-mousewheel@~3.1.12
  - bower_components/jquery-mousewheel/jquery.mousewheel.js
    - Optional: For scroll/touchpad-pinch zoom.
- jquery.threedubmedia@*
  - bower_components/jquery.threedubmedia/event.drag/jquery.event.drag.js
    - Optional: For drag interaction.
- screenfull@~2.0.0
  - bower_components/screenfull/dist/screenfull.js
    - Optional: For fullscreen.
- google-analytics-js@~0.0.1
  - bower_components/google-analytics-js/gajs.js
    - Optional: For analytics. Please :).
- hammerjs@~2.0.4
  - bower_components/hammerjs/hammer.js
    - Optional: For touch interaction (pan, pinch).
- prevent-ghost-click@~0.0.0
  - bower_components/prevent-ghost-click/PreventGhostClick.js
    - Optional: For touch interaction (pan, pinch).

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="bower_components/jquery.threedubmedia/event.drag/jquery.event.drag.js"></script>
<script src="bower_components/screenfull/dist/screenfull.js"></script>
<script src="bower_components/google-analytics-js/gajs.js"></script>
<script src="bower_components/hammerjs/hammer.js"></script>
<script src="bower_components/prevent-ghost-click/PreventGhostClick.js"></script>

Then, any main files you need:
- src/js/mag-analytics.js
  - Optional: For analytics. Please :).
- src/js/mag.js
- src/js/mag-jquery.js
- src/js/mag-control.js
  - Optional: For controls.
- src/css/mag.css
- src/theme/default.css
  - Optional: Or another theme.

<script src="bower_components/magnificent/src/js/mag-analytics.js"></script>
<script src="bower_components/magnificent/src/js/mag.js"></script>
<script src="bower_components/magnificent/src/js/mag-jquery.js"></script>
<script src="bower_components/magnificent/src/js/mag-control.js"></script>
<link rel="stylesheet" href="bower_components/magnificent/src/css/mag.css" />
<link rel="stylesheet" href="bower_components/magnificent/src/theme/default.css" />

Integrate

See usage examples in demo. Also the JSDoc, especially options.

Analytics

This component includes tracking via Google Analytics. The purpose is to better understand how and where it's used, as a guide for development.

To opt-out of this tracking, before loading the script on your page, use the global options in JavaScript, with noTrack set to true, as follows:

window.MAGNIFICENT_OPTIONS = {
  noTrack: true
};

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

In lieu of a formal styleguide, please:

Build Docs

Install dev dependencies, then run verb:

$ npm install -d && verb

Tests

Install dev dependencies:

$ npm i -d && npm test

v1.x

See https://github.com/adjohnson916/magnificent.js/tree/v1.x.

Alternatives

License

Copyright © 2013-2016 Anders D. Johnson. Released under the MIT license.

This file was generated by verb-cli on July 09, 2016.

License

telesma/magnificent.js

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Error
Looks like something went wrong!

Packages