magnificent

    2.2.4 • Public • Published

    Magnificent.js

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

    NPM version Bower Build Status

    NPM

    Join the chat at https://gitter.im/AndersDJohnson/magnificent.js

    Table of Contents

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

    Usage

    1. Load
    2. Integrate

    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.

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

    • Take care to maintain the existing coding style
    • Add unit tests for any new or changed functionality
    • Re-build documentation with verb-cli before submitting a pull request.

    Build Docs

    Install dev dependencies, then run verb:

    $ npm install -&& verb

    Tests

    Install dev dependencies:

    $ npm i -d && npm test

    v1.x

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

    Alternatives

    License

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


    This file was generated by verb-cli on September 02, 2017.

    Keywords

    none

    Install

    npm i magnificent

    DownloadsWeekly Downloads

    4

    Version

    2.2.4

    License

    MIT

    Unpacked Size

    5.41 MB

    Total Files

    73

    Last publish

    Collaborators

    • adjohnson916