diff --git a/.gitignore b/.gitignore index 8a4eba0..c62fb16 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ # Created by https://www.gitignore.io -/demo ### Bower ### bower_components diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..95a2d49 --- /dev/null +++ b/bower.json @@ -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 " + ], + "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" + ] +} diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..2826487 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,198 @@ + + + + + ZooMove + + + + + + + + +
+
+ +
+ +
+
+
What's this?
+
+

+ Is a plugin developed with jQuery, that allows to dynamically zoom the images with mouseover, and view details with mouse move.
+ Compatible with: jQuery 1.7+ in Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+ +

+
+
+ +
+
Install
+

Get with npm.

+ 
$ npm install zoomove --save
+

Or Bower.

+ 
$ bower install zoomove --save
+

If you prefer you can just download a ZIP file.

+ Download ZooMove +
+ +
+
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" 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?! ;)

+
+ +
+
Examples
+ Images by http://lorempixel.com +
+
+
+
Loading...
+
+ Image 1 +
+
+
+
Loading...
+
+ Image 2 +
+
+
+
Loading...
+
+ Image 3 +
+
+ 
<!-- Image 1 | Default -->
+<figure class="zoo-item" zoo-image="img/example.jpg"></figure>
+
+<!-- Image 2 | Scale value "3" (300%) -->
+<figure class="zoo-item" zoo-image="img/example.jpg" zoo-scale="3"></figure>
+
+<!-- Image 3 | Over "true" and Move "false" -->
+<figure class="zoo-item" zoo-image="img/example.jpg" zoo-over="true" zoo-move="false"></figure>
+
+ +
+
How to use
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDefaultDescription
zoo-image-The url of the photo to be displayed (need using).
zoo-scale1.5 (150%)Sets the zoom size that should be applied to the image.
zoo-movetrueChoose whether the image should move with the mouse move
zoo-overfalseWith 'over' it is possible to define whether the image may be above
zoo-cursorfalseDefine the cursor pointer or default
+ +
+
+ 
<!-- HTML Element -->
+<figure 
+	class="zoo-item" 
+	zoo-image="[value]"
+	zoo-scale="[value]"
+	zoo-move="[value]"
+	zoo-over="[value]"
+	zoo-cursor="[value]"
+	>
+</figure>
+
+
+ 
<!-- JavaScript -->
+<script>
+   $('.zoo-item').ZooMove({
+   	scale: 'value',
+   	move: 'value',
+   	over: 'value',
+   	cursor: 'value'
+   });
+</script>
+<!-- Thus it is applied universally -->
+
+
+
+
+ + +
+ + + + + + + \ No newline at end of file diff --git a/demo/logo_zoomove.svg b/demo/logo_zoomove.svg new file mode 100644 index 0000000..69c816f --- /dev/null +++ b/demo/logo_zoomove.svg @@ -0,0 +1,19 @@ + + + + + diff --git a/demo/style.css b/demo/style.css new file mode 100644 index 0000000..81d6534 --- /dev/null +++ b/demo/style.css @@ -0,0 +1,161 @@ +/* Reset +/ ============================== */ +html, +body { + font-family: "Lato", sans-serif; + background: #EEEEEE; +} +pre, +pre.prettyprint { + border: 0 !important; + border-left: .3rem solid #2c3e50 !important; + color: #655d5d; +} +.code-content .com { + color: rgba(44, 62, 80, 0.4); +} + +a { + color: #2c3e50; +} + +.button { + background-color: #2c3e50; + border-color: #2c3e50; + font-weight: 300; +} + +.container { + max-width: 800px; +} + + +/* Header +/ ============================== */ +.header { + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 75vh; + z-index: 100; +} +.header:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 5px; + background-color: #2c3e50; +} + .header .logo { + position: relative; + display: block; + width: 350px; + max-width: 100%; + z-index: 1; + } + .header .logo svg { + width: 100%; + } + .header .logo svg path { + fill: #2c3e50; + stroke: #2c3e50; + stroke-miterlimit: 10; + stroke-width: 0.5px; + stroke-dasharray: 2064; + animation: 7s zooAnime forwards; + } + + .header .logo h1 { + position: relative; + font-weight: 700; + font-size: 3.5em; + text-align: center; + color: #2c3e50; + animation: 7s textAnime forwards; + } + .header .logo h1 small { + position: absolute; + bottom: 0; + margin: 0 0 -7px -35px; + font-weight: 300; + font-size: 0.25em; + color: rgba(44, 62, 80, 0.7); + } + +@keyframes zooAnime { + 0% { + fill-opacity: 0; + stroke-dashoffset: 2064; + } + 20% { + fill-opacity: 0; + stroke: #2c3e50; + } + 100% { + fill-opacity: 1; + stroke-dashoffset: 0; + } +} +@keyframes textAnime { + 0% { + opacity: 0; + } + 20% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + + + +/* Main +/ ============================== */ +.main .block { + margin-bottom: 80px; +} + .main .block .title { + margin-bottom: 15px; + line-height: 1; + font-weight: 400; + } + .main .block p { + margin-bottom: 10px; + line-height: 1; + } + +.main .text-center { + display: block; + text-align: center; +} + + +.item { + position: relative; + width: 100%; + height: 300px; + margin-bottom: 25px; +} +.item .zoo-item { + border: 1px solid #EEEEEE; + margin: 10px; +} + + +/* Footer +/ ============================== */ +.footer { + display: flex; + justify-content: center; + align-items: center; + height: 60px; + background: rgba(44, 62, 80, 0.1); +} + .footer a { + font-weight: 400; + } \ No newline at end of file diff --git a/dist/zoomove.min.css b/dist/zoomove.min.css index 5757ee0..2ad6b2e 100644 --- a/dist/zoomove.min.css +++ b/dist/zoomove.min.css @@ -3,7 +3,7 @@ * http://thompsonemerson.github.io/zoomove * * Copyright (c) 2016, Emerson Thompson - * Licensed under the MIT license + * Licensed http://thompsonemerson.mit-license.org */ diff --git a/dist/zoomove.min.js b/dist/zoomove.min.js index e9bf23a..7475a1c 100644 --- a/dist/zoomove.min.js +++ b/dist/zoomove.min.js @@ -3,7 +3,7 @@ * http://thompsonemerson.github.io/zoomove * * Copyright (c) 2016, Emerson Thompson - * Licensed MIT + * Licensed http://thompsonemerson.mit-license.org */ !function(a){a.fn.ZooMove=function(b){var c=a.extend({cursor:"false",scale:"1.5",move:"true",over:"false"},b);c.cursor="true"===c.cursor?"pointer":"default",this.each(function(){c.overD=a(this).attr("zoo-over")?a(this).attr("zoo-over"):c.over,"true"===c.overD&&a(this).css({overflow:"visible","z-index":"100"}),a(this).append('
').children(".zoo-img").css({"background-image":"url("+a(this).attr("zoo-image")+")",cursor:c.cursor})}).on("mouseover",function(b){b.preventDefault(),c.scaleD=a(this).attr("zoo-scale")?a(this).attr("zoo-scale"):c.scale,c.moveD=a(this).attr("zoo-move")?a(this).attr("zoo-move"):c.move,a(this).children(".zoo-img").css({transform:"scale("+c.scaleD+")"})}).on("mousemove",function(b){b.preventDefault(),"true"===c.moveD&&a(this).children(".zoo-img").css({"transform-origin":(b.pageX-a(this).offset().left)/a(this).width()*100+"% "+(b.pageY-a(this).offset().top)/a(this).height()*100+"%"})}).on("mouseout",function(b){b.preventDefault(),a(this).children(".zoo-img").css({transform:"scale(1)"})})}}(jQuery); \ No newline at end of file diff --git a/package.json b/package.json index f2cf4bb..aa744d9 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,23 @@ "homepage": "http://thompsonemerson.github.io/zoomove", "repository": "https://github.com/thompsonemerson/zoomove", "author": "Emerson Thompson ", - "license": "MIT ", + "license": "http://thompsonemerson.mit-license.org", + "main": [ + "dist/zoomove.min.js", + "dist/zoomove.min.css" + ], + "keywords": [ + "zoomove", + "zoom", + "move", + "hover", + "mouseover", + "jquery", + "javascript", + "image" + ], "dependencies": { + "bower": "^1.7.2", "jquery": "latest" }, "devDependencies": { @@ -30,4 +45,4 @@ "start": "grunt", "test": "grunt build" } -} \ No newline at end of file +}