Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
bb6f452
commit ac46a43
Showing
8 changed files
with
428 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,4 @@ | ||
| # Created by https://www.gitignore.io | ||
| /demo | ||
|
|
||
| ### Bower ### | ||
| bower_components | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| { | ||
| "name": "zoomove", | ||
| "description": "Enlarges the image with the mouse hover and move", | ||
| "main": [ | ||
| "dist/zoomove.min.js", | ||
| "dist/zoomove.min.css" | ||
| ], | ||
| "authors": [ | ||
| "Emerson Thompson <thompson.emerson@gmail.com>" | ||
| ], | ||
| "license": "http://thompsonemerson.mit-license.org", | ||
| "keywords": [ | ||
| "zoomove", | ||
| "zoom", | ||
| "move", | ||
| "hover", | ||
| "mouseover", | ||
| "jquery", | ||
| "javascript", | ||
| "image" | ||
| ], | ||
| "homepage": "https://github.com/thompsonemerson/zoomove", | ||
| "moduleType": [], | ||
| "ignore": [ | ||
| "**/.*", | ||
| "node_modules", | ||
| "bower_components", | ||
| "test", | ||
| "tests" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,198 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>ZooMove</title> | ||
|
|
||
| <link href='https://fonts.googleapis.com/css?family=Lato:700,400,300' rel='stylesheet' type='text/css'> | ||
| <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> | ||
| <link rel="stylesheet" href="http://milligram.github.io/css/milligram.min.css"> | ||
| <link rel="stylesheet" href="../dist/zoomove.min.css"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <main class="wrapper"> | ||
| <header class="header"> | ||
| <div class="logo"> | ||
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||
| viewBox="-106 340.8 397.6 113.2" style="enable-background:new -106 340.8 397.6 113.2;" xml:space="preserve"> | ||
| <path class="st0" d="M159.3,355.4c-12.1,0-23.2,4.4-31.8,11.7l-10.5-6.5c-1-11.1-10.4-19.7-21.7-19.7s-20.7,8.7-21.7,19.7l-10.5,6.5 | ||
| c-8.6-7.3-19.7-11.7-31.8-11.7c-27.2,0-49.3,22.1-49.3,49.3s22.1,49.3,49.3,49.3c21.6,0,39.9-13.9,46.6-33.2h7.9 | ||
| c3.7,0,7.1-1.6,9.5-4.1c2.4,2.5,5.8,4.1,9.5,4.1h7.9c6.7,19.3,25.1,33.2,46.6,33.2c27.2,0,49.3-22.1,49.3-49.3 | ||
| C208.7,377.5,186.5,355.4,159.3,355.4z M91.8,348.4L91.8,348.4c0,0,1.8-0.5,3.8-0.5s3.3,0.5,3.3,0.5l0,0c6.4,1.6,11.1,7.4,11.1,14.2 | ||
| s-4.7,12.6-11.1,14.2l0,0c0,0-1.6,0.5-3.6,0.5s-3.6-0.5-3.6-0.5l0,0c-6.4-1.6-11.1-7.4-11.1-14.2S85.4,350,91.8,348.4z M31.3,447 | ||
| c-23.3,0-42.2-18.9-42.2-42.2c0-23.3,18.9-42.2,42.2-42.2s42.2,18.9,42.2,42.2C73.5,428,54.6,447,31.3,447z M85.8,413.8h-6 | ||
| c0.5-2.9,0.8-5.9,0.8-9c0-12.5-4.6-23.8-12.3-32.5l6-3.7c2.3,8.1,9,14.2,17.4,15.6v23.7C91.8,411,89.1,413.8,85.8,413.8z | ||
| M104.8,413.8c-3.3,0-5.9-2.7-5.9-5.9v-23.7c8.4-1.4,15.2-7.6,17.4-15.6l6,3.7c-7.6,8.7-12.3,20.1-12.3,32.5c0,3.1,0.3,6.1,0.8,9 | ||
| H104.8L104.8,413.8z M159.3,447c-23.3,0-42.2-18.9-42.2-42.2c0-23.3,18.9-42.2,42.2-42.2s42.2,18.9,42.2,42.2 | ||
| C201.6,428,182.6,447,159.3,447z M129.3,409.6c-0.5-2.2-0.8-4.4-0.8-6.8c0-15.4,12.5-27.9,27.9-27.9c1.9,0,3.7,0.2,5.5,0.5 | ||
| L129.3,409.6z M1.4,408.9c-0.5-2.2-0.8-4.4-0.8-6.8c0-15.4,12.5-27.9,27.9-27.9c1.9,0,3.7,0.2,5.5,0.5L1.4,408.9z M198.7,359.5h60.8 | ||
| v3.4h-60.8V359.5z M210.8,372.6h80.8v3.4h-80.8V372.6z M216.6,386.4h37v3.4h-37V386.4z"/> | ||
| </svg> | ||
| <h1>ZooMove <small>v1.0.0</small></h1> | ||
| </div> | ||
| </header> | ||
|
|
||
| <section class="container main"> | ||
| <div class="block"> | ||
| <h5 class="title">What's this?</h5> | ||
| <blockquote> | ||
| <p><em> | ||
| Is a plugin developed with jQuery, that allows to dynamically zoom the images with mouseover, and view details with mouse move. <br> | ||
| Compatible with: jQuery 1.7+ in Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+ | ||
| </em></p> | ||
| </blockquote> | ||
| </div> | ||
|
|
||
| <div class="block"> | ||
| <h5 class="title">Install</h5> | ||
| <p>Get with npm.</p> | ||
| <pre><code class="code-content"><span class="pln">$ npm install zoomove --save</span></code></pre> | ||
| <p>Or Bower.</p> | ||
| <pre><code class="code-content"><span class="pln">$ bower install zoomove --save</span></code></pre> | ||
| <p>If you prefer you can just download a ZIP file.</p> | ||
| <a href="https://github.com/thompsonemerson/zoomove/archive/master.zip" class="button" title="Download ZooMove" download>Download ZooMove</a> | ||
| </div> | ||
|
|
||
| <div class="block"> | ||
| <h5 class="title">Setup</h5> | ||
| <p>First, include the script located on the dist folder.</p> | ||
| <pre class="code prettyprint prettyprinted"><code class="code-content"><span class="com"><!-- ZooMove CSS minified --></span><span class="pln"> | ||
| </span><span class="tag"><link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"dist/zoomove.min.css"</span><span class="tag">></span> | ||
|
|
||
| <span class="com"><!-- jQuery CDN JS minified (must) --></span><span class="pln"> | ||
| </span><span class="tag"><script</span><span class="pln"></span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"https://code.jquery.com/jquery-2.1.4.min.js"</span><span class="tag">></span><span class="pln"></span><span class="tag"></script></span> | ||
|
|
||
| <span class="com"><!-- ZooMove JS minified --></span><span class="pln"> | ||
| </span><span class="tag"><script</span><span class="pln"></span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"dist/zoomove.min.js"</span><span class="tag">></span><span class="pln"></span><span class="tag"></script></span> | ||
| </code></pre> | ||
|
|
||
| <p>Now need to prepare our(s) image(s) and show to the ZooMove.</p> | ||
| <pre class="code prettyprint prettyprinted"><code class="code-content"><span class="com"><!-- Item image --></span><span class="pln"> | ||
| </span><span class="tag"><figure</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"zoo-item"</span><span class="pln"> </span><span class="atn">zoo-image</span><span class="pun">=</span><span class="atv">"img/example.jpg"</span><span class="tag">></span><span class="tag"></figure></span><span class="pln"> </span> | ||
|
|
||
| <span class="com"><!-- Starting the ZooMove --></span><span class="pln"> | ||
| </span><span class="tag"><script</span><span class="pln"></span><span class="tag">></span><span class="pln"></span> | ||
| <span class="atn">$</span><span class="tag">(<span class="atv">'.zoo-item'</span>).ZooMove();</span> | ||
| <span class="tag"></script></span></code></pre> | ||
|
|
||
| <p>Ready, prepared environment, now is hour of our plugin take action and prepare all remaining process. <br>Now says it is not easy?! ;)</p> | ||
| </div> | ||
|
|
||
| <div class="block"> | ||
| <h5 class="title">Examples</h5> | ||
| <small>Images by http://lorempixel.com</small> | ||
| <div class="row"> | ||
| <div class="column"> | ||
| <div class="item"> | ||
| <figure class="zoo-item" zoo-image="http://lorempixel.com/600/600/animals/">Loading...</figure> | ||
| </div> | ||
| <small class="text-center">Image 1</small> | ||
| </div> | ||
| <div class="column"> | ||
| <div class="item"> | ||
| <figure class="zoo-item" zoo-scale="3" zoo-image="http://lorempixel.com/600/600/animals/">Loading...</figure> | ||
| </div> | ||
| <small class="text-center">Image 2</small> | ||
| </div> | ||
| <div class="column"> | ||
| <div class="item"> | ||
| <figure class="zoo-item" zoo-over="true" zoo-move="false" zoo-image="http://lorempixel.com/600/600/animals/">Loading...</figure> | ||
| </div> | ||
| <small class="text-center">Image 3</small> | ||
| </div> | ||
| </div> | ||
| <pre class="code prettyprint prettyprinted"><code class="code-content"><span class="com"><!-- Image 1 | Default --></span><span class="pln"> | ||
| </span><span class="tag"><figure</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"zoo-item"</span><span class="pln"> </span><span class="atn">zoo-image</span><span class="pun">=</span><span class="atv">"img/example.jpg"</span><span class="tag">></span><span class="tag"></figure></span> | ||
|
|
||
| <span class="com"><!-- Image 2 | Scale value "3" (300%) --></span><span class="pln"> | ||
| </span><span class="tag"><figure</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"zoo-item"</span><span class="pln"> </span><span class="atn">zoo-image</span><span class="pun">=</span><span class="atv">"img/example.jpg"</span><span class="pln"> </span><span class="atn">zoo-scale</span><span class="pun">=</span><span class="atv">"3"</span><span class="tag">></span><span class="tag"></figure></span> | ||
|
|
||
| <span class="com"><!-- Image 3 | Over "true" and Move "false" --></span><span class="pln"> | ||
| </span><span class="tag"><figure</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"zoo-item"</span><span class="pln"> </span><span class="atn">zoo-image</span><span class="pun">=</span><span class="atv">"img/example.jpg"</span><span class="pln"> </span><span class="atn">zoo-over</span><span class="pun">=</span><span class="atv">"true"</span><span class="pln"> </span><span class="atn">zoo-move</span><span class="pun">=</span><span class="atv">"false"</span><span class="tag">></span><span class="tag"></figure></span></code></pre> | ||
| </div> | ||
|
|
||
| <div class="block"> | ||
| <h5 class="title">How to use</h5> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Property</th> | ||
| <th>Default</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td>zoo-image</td> | ||
| <td>-</td> | ||
| <td>The url of the photo to be displayed (need using).</td> | ||
| </tr> | ||
| <tr> | ||
| <td>zoo-scale</td> | ||
| <td>1.5 (150%)</td> | ||
| <td>Sets the zoom size that should be applied to the image.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>zoo-move</td> | ||
| <td>true</td> | ||
| <td>Choose whether the image should move with the mouse move</td> | ||
| </tr> | ||
| <tr> | ||
| <td>zoo-over</td> | ||
| <td>false</td> | ||
| <td>With 'over' it is possible to define whether the image may be above</td> | ||
| </tr> | ||
| <tr> | ||
| <td>zoo-cursor</td> | ||
| <td>false</td> | ||
| <td>Define the cursor pointer or default</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <div class="row"> | ||
| <div class="column"> | ||
| <pre class="code prettyprint prettyprinted"><code class="code-content"><span class="com"><!-- HTML Element --></span><span class="pln"> | ||
| </span><span class="tag"><figure</span><span class="pln"> </span> | ||
| <span class="atn">class</span><span class="pun">=</span><span class="atv">"zoo-item"</span><span class="pln"> </span> | ||
| <span class="atn">zoo-image</span><span class="pun">=</span><span class="atv">"[value]"</span> | ||
| <span class="atn">zoo-scale</span><span class="pun">=</span><span class="atv">"[value]"</span> | ||
| <span class="atn">zoo-move</span><span class="pun">=</span><span class="atv">"[value]"</span> | ||
| <span class="atn">zoo-over</span><span class="pun">=</span><span class="atv">"[value]"</span> | ||
| <span class="atn">zoo-cursor</span><span class="pun">=</span><span class="atv">"[value]"</span> | ||
| <span class="tag">></span> | ||
| <span class="tag"></figure></span></code></pre> | ||
| </div> | ||
| <div class="column"> | ||
| <pre class="code prettyprint prettyprinted"><code class="code-content"><span class="com"><!-- JavaScript --></span><span class="pln"> | ||
| </span><span class="tag"><script</span><span class="pln"></span><span class="tag">></span><span class="pln"></span> | ||
| <span class="atn">$</span><span class="tag">(<span class="atv">'.zoo-item'</span>).ZooMove({ | ||
| scale: <span class="atv">'value'</span>, | ||
| move: <span class="atv">'value'</span>, | ||
| over: <span class="atv">'value'</span>, | ||
| cursor: <span class="atv">'value'</span> | ||
| });</span> | ||
| <span class="tag"></script></span> | ||
| <span class="com"><!-- Thus it is applied universally --></span></code></pre> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <footer class="footer"> | ||
| Made with <small> ♥ </small> by <a href="https://twitter.com/thompsonweb" target="_blank" title="Emerson Thompson"> Emerson Thompson </a> under <a href="http://thompsonemerson.mit-license.org" target="_blank" title="MIT license"> MIT license </a> | ||
| </footer> | ||
| </main> | ||
|
|
||
| <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> | ||
| <script src="https://code.jquery.com/jquery-1.11.3.js"></script> | ||
| <script src="../dist/zoomove.min.js"></script> | ||
| <script> | ||
| $('.zoo-item').ZooMove({ | ||
| cursor: 'true', | ||
| scale: '1.2', | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.