Skip to content

Commit 904659e

Browse files
fatfat
committed
first commit
0 parents  commit 904659e

File tree

7 files changed

+344
-0
lines changed

7 files changed

+344
-0
lines changed

‎MIT-LICENSE.txt‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Copyright (c) 2013 @fat
2+
3+
Permission is hereby granted, free of charge, to any person obtaining
4+
a copy of this software and associated documentation files (the
5+
"Software"), to deal in the Software without restriction, including
6+
without limitation the rights to use, copy, modify, merge, publish,
7+
distribute, sublicense, and/or sell copies of the Software, and to
8+
permit persons to whom the Software is furnished to do so, subject to
9+
the following conditions:
10+
11+
The above copyright notice and this permission notice shall be
12+
included in all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
15+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
17+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
18+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
19+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
20+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# ZOOM
2+
3+
A bit about our Image Zoom plugin: https://medium.com/about/fff05ab40630
4+
5+
Demo: https://fat.github.io/zoom.js
6+
7+
### HOW TO USE IT
8+
9+
+ Include `zoom.js` and `zoom.css` in your application. (note: zoom.js depends on [bootstrap's transition.js](https://raw.github.com/twbs/bootstrap/master/js/transition.js))
10+
+ Add a `data-action="zoom"` attribute to the image tags you want to zoom.

‎css/zoom.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
img[data-action="zoom"] {
2+
cursor: pointer;
3+
cursor: -webkit-zoom-in;
4+
cursor: -moz-zoom-in;
5+
}
6+
.zoom-img,
7+
.zoom-img-wrap {
8+
position: relative;
9+
z-index: 666;
10+
-webkit-transition: all 300ms;
11+
-moz-transition: all 300ms;
12+
-ms-transition: all 300ms;
13+
-o-transition: all 300ms;
14+
transition: all 300ms;
15+
}
16+
img.zoom-img {
17+
cursor: pointer;
18+
cursor: -webkit-zoom-out;
19+
cursor: -moz-zoom-out;
20+
}
21+
.zoom-overlay {
22+
z-index: 420;
23+
background: #fff;
24+
position: fixed;
25+
top: 0;
26+
left: 0;
27+
right: 0;
28+
bottom: 0;
29+
pointer-events: none;
30+
filter: "alpha(opacity=0)";
31+
-khtml-opacity: 0;
32+
-moz-opacity: 0;
33+
opacity: 0;
34+
-webkit-transition: opacity 300ms;
35+
-moz-transition: -moz-opacity 300ms;
36+
-ms-transition: opacity 300ms;
37+
-o-transition: opacity 300ms;
38+
transition: opacity 300ms;
39+
}
40+
.zoom-overlay-open .zoom-overlay {
41+
filter: "alpha(opacity=100)";
42+
-khtml-opacity: 1;
43+
-moz-opacity: 1;
44+
opacity: 1;
45+
}

‎img/palm.jpg‎

414 KB
Loading

‎img/trees.jpg‎

280 KB
Loading

‎index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<style>
5+
/* SIMPLE DEMO STYLES */
6+
body {
7+
font-family: helvetica;
8+
}
9+
.container {
10+
margin: 100px auto;
11+
max-width: 700px;
12+
}
13+
.container img {
14+
width: 100%;
15+
}
16+
.container .pull-left {
17+
width: 55%;
18+
float: left;
19+
margin: 20px 20px 20px -80px;
20+
}
21+
</style>
22+
<link rel="stylesheet" type="text/css" href="css/zoom.css">
23+
</head>
24+
<body>
25+
<div class="container">
26+
<h1>Image Zoom</h1>
27+
<p>
28+
Trust fund seitan chia, wolf lomo letterpress Bushwick before they sold out. Carles kogi fixie, squid twee Tonx readymade cred typewriter scenester locavore kale chips vegan organic. Meggings pug wolf Shoreditch typewriter skateboard. McSweeney's iPhone chillwave, food truck direct trade disrupt flannel irony tousled Cosby sweater single-origin coffee. Organic disrupt bicycle rights, tattooed messenger bag flannel craft beer fashion axe bitters. Readymade sartorial craft beer, quinoa sustainable butcher Marfa Echo Park Terry Richardson gluten-free flannel retro cred mlkshk banjo. Salvia 90's art party Blue Bottle, PBR&B cardigan 8-bit.
29+
</p>
30+
<p>
31+
Meggings irony fashion axe, tattooed master cleanse Blue Bottle stumptown bitters authentic flannel freegan paleo letterpress ugh sriracha. Wolf PBR&B art party aesthetic meh cliche. Sartorial before they sold out deep v, aesthetic PBR&B craft beer post-ironic synth keytar pork belly skateboard pour-over. Tonx cray pug Etsy, gastropub ennui wolf ethnic Odd Future viral master cleanse skateboard banjo. Pitchfork scenester cornhole, whatever try-hard ethnic banjo +1 gastropub American Apparel vinyl skateboard Shoreditch seitan. Blue Bottle keffiyeh Austin Helvetica art party. Portland ethnic fixie, beard retro direct trade ugh scenester Tumblr readymade authentic plaid pickled hashtag biodiesel.
32+
</p>
33+
<img src="img/palm.jpg" data-action="zoom">
34+
<p>
35+
Thundercats freegan Truffaut, four loko twee Austin scenester lo-fi seitan High Life paleo quinoa cray. Schlitz butcher ethical Tumblr, pop-up DIY keytar ethnic iPhone PBR sriracha. Tonx direct trade bicycle rights gluten-free flexitarian asymmetrical. Whatever drinking vinegar PBR XOXO Bushwick gentrify. Cliche semiotics banjo retro squid Wes Anderson. Fashion axe dreamcatcher you probably haven't heard of them bicycle rights. Tote bag organic four loko ethical selfies gastropub, PBR fingerstache tattooed bicycle rights.
36+
</p>
37+
<p>
38+
Ugh Portland Austin, distillery tattooed typewriter polaroid pug Banksy Neutra keffiyeh. Shoreditch mixtape wolf PBR&B, tote bag dreamcatcher literally bespoke Odd Future selfies 90's master cleanse vegan. Flannel tofu deep v next level pickled, authentic Etsy Shoreditch literally swag photo booth iPhone pug semiotics banjo. Bicycle rights butcher Blue Bottle, actually DIY semiotics Banksy banjo mixtape Austin pork belly post-ironic. American Apparel gastropub hashtag, McSweeney's master cleanse occupy High Life bitters wayfarers next level bicycle rights. Wolf chia Terry Richardson, pop-up plaid kitsch ugh. Butcher +1 Carles, swag selfies Blue Bottle viral.
39+
</p>
40+
<p>
41+
Keffiyeh food truck organic letterpress leggings iPhone four loko hella pour-over occupy, Wes Anderson cray post-ironic. Neutra retro fixie gastropub +1, High Life semiotics. Vinyl distillery Etsy freegan flexitarian cliche jean shorts, Schlitz wayfarers skateboard tousled irony locavore XOXO meh. Ethnic Wes Anderson McSweeney's messenger bag, mixtape XOXO slow-carb cornhole aesthetic Marfa banjo Thundercats bitters. Raw denim banjo typewriter cray Tumblr, High Life single-origin coffee. 90's Tumblr cred, Terry Richardson occupy raw denim tofu fashion axe photo booth banh mi. Trust fund locavore Helvetica, fashion axe selvage authentic Shoreditch swag selfies stumptown +1.
42+
</p>
43+
<img src="img/trees.jpg" data-action="zoom" class="pull-left">
44+
<p>
45+
Scenester chambray slow-carb, trust fund biodiesel ugh bicycle rights cornhole. Gentrify messenger bag Truffaut tousled roof party pork belly leggings, photo booth jean shorts. Austin readymade PBR plaid chambray. Squid Echo Park pour-over, wayfarers forage whatever locavore typewriter artisan deep v four loko. Locavore occupy Neutra Pitchfork McSweeney's, wayfarers fingerstache. Actually asymmetrical drinking vinegar yr brunch biodiesel. Before they sold out sustainable readymade craft beer Portland gastropub squid Austin, roof party Thundercats chambray narwhal Bushwick pug.
46+
</p>
47+
<p>
48+
Literally typewriter chillwave, bicycle rights Carles flannel wayfarers. Biodiesel farm-to-table actually, locavore keffiyeh hella shabby chic pour-over try-hard Bushwick. Sriracha American Apparel Brooklyn, synth cray stumptown blog Bushwick +1 VHS hashtag. Wolf umami Carles Marfa, 90's food truck Cosby sweater. Fanny pack try-hard keytar pop-up readymade, master cleanse four loko trust fund polaroid salvia. Photo booth kitsch forage chambray, Carles scenester slow-carb lomo cardigan dreamcatcher. Swag asymmetrical leggings, biodiesel Tonx shabby chic ethnic master cleanse freegan.
49+
</p>
50+
<p>
51+
Raw denim Banksy shabby chic, 8-bit salvia narwhal fashion axe. Ethical Williamsburg four loko, chia kale chips distillery Shoreditch messenger bag swag iPhone Pitchfork. Viral PBR&B single-origin coffee quinoa readymade, ethical chillwave drinking vinegar gluten-free Wes Anderson kitsch Tumblr synth actually bitters. Butcher McSweeney's forage mlkshk kogi fingerstache. Selvage scenester butcher Shoreditch, Carles beard plaid disrupt DIY. Pug readymade selvage retro, Austin salvia vinyl master cleanse flexitarian deep v bicycle rights plaid Terry Richardson mlkshk pour-over. Trust fund try-hard banh mi Brooklyn, 90's Etsy kogi YOLO salvia.
52+
</p>
53+
54+
</div>
55+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
56+
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
57+
<script src="js/zoom.js"></script>
58+
</body>
59+
</html>

‎js/zoom.js‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
+function ($) { "use strict";
2+
3+
/**
4+
* The zoom service
5+
*/
6+
function ZoomService () {
7+
this._activeZoom =
8+
this._initialScrollPosition =
9+
this._initialTouchPosition =
10+
this._touchMoveListener = null
11+
12+
this._$document = $(document)
13+
this._$window = $(window)
14+
this._$body = $(document.body)
15+
}
16+
17+
ZoomService.prototype.listen = function () {
18+
this._$body.on('click', '[data-action="zoom"]', $.proxy(this._zoom, this))
19+
}
20+
21+
ZoomService.prototype._zoom = function (e) {
22+
var target = e.target
23+
24+
if (!target || target.tagName != 'IMG' || (target.width >= (window.innerWidth - Zoom.OFFSET))) return
25+
26+
this._activeZoomClose(true)
27+
28+
this._activeZoom = new Zoom(target)
29+
this._activeZoom.zoomImage()
30+
31+
// todo(fat): probably worth throttling this
32+
this._$window.on('scroll.zoom', $.proxy(this._scrollHandler, this))
33+
34+
this._$document.on('click.zoom', $.proxy(this._clickHandler, this))
35+
this._$document.on('keyup.zoom', $.proxy(this._keyHandler, this))
36+
this._$document.on('touchstart.zoom', $.proxy(this._touchStart, this))
37+
38+
e.stopPropagation()
39+
}
40+
41+
ZoomService.prototype._activeZoomClose = function (forceDispose) {
42+
if (!this._activeZoom) return
43+
44+
if (forceDispose) {
45+
this._activeZoom.dispose()
46+
} else {
47+
this._activeZoom.close()
48+
}
49+
50+
this._$window.off('.zoom')
51+
this._$document.off('.zoom')
52+
53+
this._activeZoom = null
54+
}
55+
56+
ZoomService.prototype._scrollHandler = function (e) {
57+
if (this._initialScrollPosition === null) this._initialScrollPosition = window.scrollY
58+
var deltaY = this._initialScrollPosition - window.scrollY
59+
if (Math.abs(deltaY) >= 40) this._activeZoomClose()
60+
}
61+
62+
ZoomService.prototype._keyHandler = function (e) {
63+
if (e.keyCode == 27) this._activeZoomClose()
64+
}
65+
66+
ZoomService.prototype._clickHandler = function (e) {
67+
e.stopPropagation()
68+
e.preventDefault()
69+
this._activeZoomClose()
70+
}
71+
72+
ZoomService.prototype._touchStart = function (e) {
73+
this._initialTouchPosition = e.touches[0].pageY
74+
$(e.target).on('touchmove.zoom', $.proxy(this._touchMove, this))
75+
}
76+
77+
ZoomService.prototype._touchMove = function (e) {
78+
if (Math.abs(e.touches[0].pageY - this._initialTouchPosition) > 10) {
79+
this._activeZoomClose()
80+
$(e.target).off('touchmove.zoom')
81+
}
82+
}
83+
84+
85+
/**
86+
* The zoom object
87+
*/
88+
function Zoom (img) {
89+
this._fullHeight =
90+
this._fullWidth =
91+
this._overlay =
92+
this._targetImageWrap = null
93+
94+
this._targetImage = img
95+
96+
this._$body = $(document.body)
97+
}
98+
99+
Zoom.OFFSET = 80
100+
Zoom._MAX_WIDTH = 2560
101+
Zoom._MAX_HEIGHT = 4096
102+
103+
Zoom.prototype.zoomImage = function () {
104+
var img = document.createElement('img')
105+
img.onload = $.proxy(function () {
106+
this._fullHeight = Number(img.height)
107+
this._fullWidth = Number(img.width)
108+
this._zoomOriginal()
109+
}, this)
110+
img.src = this._targetImage.src
111+
}
112+
113+
Zoom.prototype._zoomOriginal = function () {
114+
this._targetImageWrap = document.createElement('div')
115+
this._targetImageWrap.className = 'zoom-img-wrap'
116+
117+
this._targetImage.parentNode.insertBefore(this._targetImageWrap, this._targetImage)
118+
this._targetImageWrap.appendChild(this._targetImage)
119+
120+
$(this._targetImage)
121+
.addClass('zoom-img')
122+
.attr('data-action', 'zoom-out')
123+
124+
this._overlay = document.createElement('div')
125+
this._overlay.className = 'zoom-overlay'
126+
127+
document.body.appendChild(this._overlay)
128+
129+
this._calculateZoom()
130+
this._triggerAnimation()
131+
}
132+
133+
Zoom.prototype._calculateZoom = function () {
134+
this._targetImage.offsetWidth // repaint before animating
135+
136+
var originalFullImageWidth = this._fullWidth
137+
var originalFullImageHeight = this._fullHeight
138+
139+
var scrollTop = window.scrollY
140+
141+
var maxScaleFactor = originalFullImageWidth / this._targetImage.width
142+
143+
var viewportHeight = (window.innerHeight - Zoom.OFFSET)
144+
var viewportWidth = (window.innerWidth - Zoom.OFFSET)
145+
146+
var imageAspectRatio = originalFullImageWidth / originalFullImageHeight
147+
var viewportAspectRatio = viewportWidth / viewportHeight
148+
149+
if (originalFullImageWidth < viewportWidth && originalFullImageHeight < viewportHeight) {
150+
this._imgScaleFactor = maxScaleFactor
151+
152+
} else if (imageAspectRatio < viewportAspectRatio) {
153+
this._imgScaleFactor = (viewportHeight / originalFullImageHeight) * maxScaleFactor
154+
155+
} else {
156+
this._imgScaleFactor = (viewportWidth / originalFullImageWidth) * maxScaleFactor
157+
}
158+
}
159+
160+
Zoom.prototype._triggerAnimation = function () {
161+
this._targetImage.offsetWidth // repaint before animating
162+
163+
var imageOffset = $(this._targetImage).offset()
164+
var scrollTop = window.scrollY
165+
166+
var viewportY = scrollTop + (window.innerHeight / 2)
167+
var viewportX = (window.innerWidth / 2)
168+
169+
var imageCenterY = imageOffset.top + (this._targetImage.height / 2)
170+
var imageCenterX = imageOffset.left + (this._targetImage.width / 2)
171+
172+
this._translateY = viewportY - imageCenterY
173+
this._translateX = viewportX - imageCenterX
174+
175+
$(this._targetImage).css('transform', 'scale(' + this._imgScaleFactor + ')')
176+
$(this._targetImageWrap).css('transform', 'translate(' + this._translateX + 'px, ' + this._translateY + 'px) translateZ(0)')
177+
178+
this._$body.addClass('zoom-overlay-open')
179+
}
180+
181+
Zoom.prototype.close = function () {
182+
this._$body
183+
.removeClass('zoom-overlay-open')
184+
.addClass('zoom-overlay-transitioning')
185+
186+
// we use setStyle here so that the correct vender prefix for transform is used
187+
$(this._targetImage).css('transform', '')
188+
$(this._targetImageWrap).css('transform', '')
189+
190+
$(this._targetImage)
191+
.one($.support.transition.end, $.proxy(this.dispose, this))
192+
.emulateTransitionEnd(300)
193+
}
194+
195+
Zoom.prototype.dispose = function () {
196+
if (this._targetImageWrap && this._targetImageWrap.parentNode) {
197+
$(this._targetImage)
198+
.removeClass('zoom-img')
199+
.attr('data-action', 'zoom')
200+
201+
this._targetImageWrap.parentNode.replaceChild(this._targetImage, this._targetImageWrap)
202+
this._overlay.parentNode.removeChild(this._overlay)
203+
204+
this._$body.removeClass('zoom-overlay-transitioning')
205+
}
206+
}
207+
208+
new ZoomService().listen()
209+
210+
}(jQuery)

0 commit comments

Comments
 (0)