Permalink
Browse files

add support for images with padding/border

  • Loading branch information...
1 parent 1d8c158 commit b6aa5f146f19c56993213ed2abcad65511923cb4 @creaven committed Jan 25, 2010
Showing with 21 additions and 7 deletions.
  1. +1 −1 Demo/index.html
  2. +20 −6 Source/Zoomer.js
View
@@ -20,6 +20,6 @@ <h2>Homer</h2>
<img src="gomer-small.jpg" id="homer" big="gomer.jpg"/>
<br><br>
<h2>Queen</h2>
- <img src="girl-thumb.jpg" id="girl"/>
+ <img src="girl-thumb.jpg" id="girl" style="border:solid 1px gray;padding:3px;margin:10px"/>
</body>
</html>
View
@@ -50,7 +50,18 @@ var Zoomer = new Class({
},
prepareSmall: function(){
- this.wrapper = new Element('div', {'class': 'zoomer-wrapper'}).wraps(this.small).setStyles({
+ this.wrapper = new Element('div', {'class': 'zoomer-wrapper'}).wraps(this.small);
+ ['margin', 'left', 'top', 'bottom', 'right', 'float', 'clear', 'border', 'padding'].each(function(p){
+ var style = this.small.getStyle(p);
+ var dflt = 'auto';
+ if(['float', 'clear', 'border'].contains(p)) dflt = 'none';
+ if(p == 'padding') dflt = '0';
+ try{
+ this.small.setStyle(p, dflt);
+ this.wrapper.setStyle(p, style);
+ }catch(e){};
+ }, this);
+ this.wrapper.setStyles({
width: this.small.offsetWidth,
height: this.small.offsetHeight,
position: 'relative',
@@ -81,12 +92,15 @@ var Zoomer = new Class({
ready: function(){
this.big.inject(this.wrapper);
- new Element('div', {'class': 'zoomer-wrapper-big'}).setStyles({
+ this.bigWrapper = new Element('div', {'class': 'zoomer-wrapper-big'}).setStyles({
position: 'absolute',
- top: 0,
- left: 0
+ overflow: 'hidden',
+ top: this.small.offsetTop,
+ left: this.small.offsetLeft,
+ width: this.small.offsetWidth,
+ height: this.small.offsetHeight
}).wraps(this.big);
- this.wrapper.addEvents({
+ this.bigWrapper.addEvents({
mouseenter: this.startZoom.bind(this),
mouseleave: this.stopZoom.bind(this),
mousemove: this.move.bind(this)
@@ -98,7 +112,7 @@ var Zoomer = new Class({
},
startZoom: function(){
- this.position = this.wrapper.getPosition();
+ this.position = this.small.getPosition();
this.timer = this.zoom.periodical(10, this);
this.big.fade('in');
},

0 comments on commit b6aa5f1

Please sign in to comment.