‚̧Neoclassical Programming Multitude
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    zoomove

    1.3.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    ZooMove | jQuery Zoom Image

    Website licence mit Build Status GitHub version Bower version npm version CDNJS version

    It's a plugin developed with jQuery, that allows to dynamically zoom images with mouseover, and view details with mouse move.

    Table of Contents

    Install

    Get with npm

    $ npm install zoomove --save

    bower

    $ bower install zoomove --save

    yarn

    $ yarn install zoomove

    Or CDN (by cdnjs)

    <!-- CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.2.1/zoomove.min.css">
     
    <!-- JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.2.1/zoomove.min.js"></script>

    If you prefer you can just download a ZIP file.

    Setup

    First, include the script located on the dist folder.

    <!-- ZooMove CSS minified -->
    <link rel="stylesheet" href="dist/zoomove.min.css">
     
    <!-- jQuery CDN JS minified (must) -->
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
     
    <!-- ZooMove JS minified -->
    <script src="dist/zoomove.min.js"></script>

    Now need to prepare our(s) image(s) and show to the ZooMove.

    <!-- Item image -->
    <figure class="zoo-item" data-zoo-image="img/example.jpg"></figure>
     
    <!-- Starting the ZooMove -->
    <script>
       $('.zoo-item').ZooMove();
    </script> 

    Ready, prepared environment, now is hour of our plugin take action and prepare all remaining process.
    Now says it is not easy?! ;)

    How to Use

    Property Default Description
    data-zoo-image - The url of the photo to be displayed.
    data-zoo-scale 1.5 (150%) Sets the zoom size that should be applied to the image.
    data-zoo-move true Choose whether the image should move with the mouse move.
    data-zoo-over false With 'over' it is possible to define whether the image may be above.
    data-zoo-cursor false Define the cursor pointer or default.
    data-zoo-autosize true sets the size of the automatic image.
    <!-- HTML Element -->
    <figure
      class="zoo-item"
      data-zoo-image="[value]"
      data-zoo-scale="[value]"
      data-zoo-move="[value]"
      data-zoo-over="[value]"
      data-zoo-cursor="[value]"
      data-zoo-autosize="[value]"
      >
    </figure>
    <!-- JavaScript -->
    <script>
       $('.zoo-item').ZooMove({
           image: '[value]',
           scale: '[value]',
           move: '[value]',
           over: '[value]',
           cursor: '[value]',
           autosize: '[value]'
       });
    </script> 
    <!-- Thus it is applied universally -->

    Examples

    Images by lorempixel.

    GIFs <3

    Image 1

    Default

    <figure class="zoo-item" data-zoo-image="img/example.jpg"></figure>

    Image 2

    Scale value 3 (300%)

    <figure class="zoo-item" data-zoo-image="img/example.jpg" data-zoo-scale="3"></figure>

    Image 3

    Over true and Move false

    <figure class="zoo-item" data-zoo-image="img/example.jpg" data-zoo-over="true" data-zoo-move="false"></figure>

    Browser Support

    Chrome logo Firefox logo IE logo Opera logo Safari logo Edge logo
    42+ ‚úĒ 41+ ‚úĒ 9+ ‚úĒ 29+ ‚úĒ 9+ ‚úĒ 12+ ‚úĒ

    Contributing

    Help improve these docs. Open an issue or submit a pull request.

    1. Navigate to the main page of the repository
    2. Fork it!
    3. Create your feature branch: git checkout -b my-new-feature
    4. Commit your changes: git commit -m 'Add some feature'
    5. Push to the branch: git push origin my-new-feature
    6. Submit a pull request =D

    History

    See Releases for detailed changelog.

    License

    MIT License © Emerson Thompson

    Install

    npm i zoomove

    DownloadsWeekly Downloads

    25

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    33.1 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar