Zoom responsively. A jQuery plugin for responsive zoom of images & more!
(Table of contents generated by verb)
Check out the demo! Or the data-* attributes demo.
data-* attributes for #37.Install with bower
$ bower install magnificent --save
Install with npm
$ npm i magnificent --save
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:
<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:
<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" />
See usage examples in demo. Also the JSDoc, especially options.
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
};
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
In lieu of a formal styleguide, please:
Install dev dependencies, then run verb:
Install dev dependencies:
See https://github.com/AndersDJohnson/magnificent.js/tree/v1.x.
Copyright © 2013-2017 Anders D. Johnson. Released under the MIT license.
This file was generated by verb-cli on September 02, 2017.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4