Het zoom & pan voorbeeld spreekt voor zichzelf. Plaats de stylesheet in de head sectie van jouw pagina, en de html-code en het javascript in de body-sectie. De html-code doe je op de plek waar de pan-zoom-procedure moet verschijnen, en het javascript plaats je zo laag als mogelijk op de pagina. De chrome-browser van google heeft een beetje hulp nodig. Vervang daarom de standaard body-tag door:
<body onmousemove="window.event.returnValue=false;">
Als je even de plaatjes wilt gebruiken om snel de procedure te kunnen testen heb ik die hier voor jou. Het zijn http://kompoos.nl/javascripts/image-effects/pan-zoom.jpg en http://kompoos.nl/javascripts/image-effects/pan-zoom-klein.jpg.
<style type="text/css">
#pan-zoom{
position:relative;
overflow:hidden;
left:100px;
width:450px;
height:329px;
border:solid #050 1px;
cursor:move}
#pan-zoom img{
position:absolute;
left:0px;
top:0px;
width:450px;
height:329px}
#pan-image-klein{
position:relative;
left:450px;
top:-360px;
z-Index:2;
overflow:hidden;
width:80px;height:52px;
border:solid #aaffaa 1px}
.zoom_borders{
border:solid #aaffaa 1px}
.pan_masker{
color:#fff;
background:#99FF99;
opacity:.4;
filter:alpha(opacity=40);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"}
</style>
<div id="pan-zoom" >
<img src="pan-zoom.jpg" alt="pan/zoom plaatje" width="900" height="658" />
</div>
<div id="pan-image-klein" >
<img src="pan-zoom-klein.jpg" alt="pan plaatje klein" width="90" height="66" />
</div>
<script>
/*global window: false */
/*global document: false */
var type,z,z1,key,nieuwe_breedte,nieuwe_hoogte;
function zoom_voor_pan(o) {
var par = document.getElementById(o.id_voor_pan);
this.img = par.getElementsByTagName('IMG')[0];
this.x__gegevens = [this.de__style_regelen(this.img, 'width'), this.de__style_regelen(this.img, 'height'), this.de__style_regelen(par, 'width'), this.de__style_regelen(par, 'height')];
this.eenarray = [1];
this.voeg_dit_toe(this.img, 'mousedown', 'pan_omlaag', this.img);
this.voeg_dit_toe(par, 'mousemove', 'pan_schuiven');
this.voeg_dit_toe(document, 'mouseup', 'ms_omhoog');
if (o.de_thumbnail) {
this.init_pan_thumb(o.de_thumbnail);
}
this.zoom(typeof(o.zoomfactor) === 'number' ? o.zoomfactor: 0);
}
zoom_voor_pan.prototype = {
zoom: function(ud) {
if (ud > 1) {
this.eenarray[this.eenarray.length] = this.eenarray[this.eenarray.length - 1] * ud;
} else if (this.eenarray.length > 1) {
this.eenarray.length--;
}
z = this.eenarray[this.eenarray.length - 1];
nieuwe_breedte = this.x__gegevens[0] * z;
nieuwe_hoogte = this.x__gegevens[1] * z;
z = nieuwe_breedte / this.img.width;
this.werker(this.img, {
left: (this.de__style_regelen(this.img, 'left') - this.x__gegevens[2] / 2) * (z) + this.x__gegevens[2] / 2 + 'px',
top: (this.de__style_regelen(this.img, 'top') - this.x__gegevens[3] / 2) * (z) + this.x__gegevens[3] / 2 + 'px',
width: nieuwe_breedte + 'px',
height: nieuwe_hoogte + 'px'
});
this.mini__maxi();
if (this.pan) {
this.zoom_borders();
}
},
mini__maxi: function() {
var w = this.de__style_regelen(this.img, 'width'),
h = this.de__style_regelen(this.img, 'height');
this.werker(this.img, {
left: Math.min(Math.max(this.de__style_regelen(this.img, 'left'), this.x__gegevens[2] - w), 0) + 'px',
top: Math.min(Math.max(this.de__style_regelen(this.img, 'top'), this.x__gegevens[3] - h), 0) + 'px',
width: Math.max(this.x__gegevens[0], w) + 'px',
height: Math.max(this.x__gegevens[1], h) + 'px'
});
},
pan_omlaag: function(ev, obj) {
document.onselectstart = function() {
window.event.returnValue = false;
};
this.lastXY = [ev.clientX, ev.clientY];
this.drag = obj;
this.pos = [this.de__style_regelen(this.drag, 'left'), this.de__style_regelen(this.drag, 'top')];
if (!window.event) {
ev.preventDefault();
}
return false;
},
pan_schuiven: function(ev) {
if (this.drag) {
var muis_positie = [ev.clientX, ev.clientY];
this.pos = [this.pos[0] + muis_positie[0] - this.lastXY[0], this.pos[1] + muis_positie[1] - this.lastXY[1]];
this.werker(this.drag, {
left: this.pos[0] + 'px',
top: this.pos[1] + 'px'
});
this.lastXY = muis_positie;
if (this.drag === this.pan) {
this.pan_zoom_hoofd();
} else {
this.mini__maxi();
if (this.pan) {
this.zoom_borders();
}
}
}
if (!window.event) {
ev.preventDefault();
}
return false;
},
ms_omhoog: function(ev) {
this.drag = false;
if (!window.event) {
ev.preventDefault();
}
document.onselectstart = null;
},
voeg_dit_toe: function(o, t, f, p) {
var oop = this;
if (o.addEventListener) {
o.addEventListener(t,
function(e) {
return oop[f](e, p);
},
false);
} else if (o.attachEvent) {
o.attachEvent('on' + t,
function(e) {
return oop[f](e, p);
});
}
},
werker: function(ele, style, par) {
if (typeof(ele) === 'string') {
ele = document.createElement(ele);
}
for (key in style) {
if (style.hasOwnProperty(key)) {
ele.style[key] = style[key];
}
}
if (par) {
par.appendChild(ele);
}
return ele;
},
de__style_regelen: function(obj, p) {
if (obj.currentStyle) {
return parseInt(obj.currentStyle[p.replace(/-/g, '')], 10);
}
return parseInt(document.defaultView.getComputedStyle(obj, null).getPropertyValue(p), 10);
},
init_pan_thumb: function(o) {
var thumb = document.getElementById(o.id_voor_pan);
if (thumb && o.een_pan_border) {
var w = this.de__style_regelen(thumb, 'width'),
h = this.de__style_regelen(thumb, 'height');
this.pan = this.werker('DIV', {
position: 'absolute',
overflow: 'hidden',
zIndex: '2',
visibility: 'hidden',
left: '0px',
top: '0px',
width: w + 'px',
height: h + 'px'
},
thumb);
this.pan.className = o.een_pan_border;
this.panplaat = this.werker('IMG', {
position: 'absolute',
left: '0px',
top: '0px',
width: w + 'px',
height: h + 'px'
},
this.pan);
this.panplaat.src = this.img.src;
this.tmask = false;
if (o.masker_pan) {
this.tmask = this.werker('DIV', {
position: 'absolute',
zIndex: '1',
visibility: 'hidden',
left: '0px',
top: '0px',
width: w + 'px',
height: h + 'px'
},
thumb);
this.tmask.className = o.masker_pan;
}
if (o.draggen) {
this.voeg_dit_toe(this.panplaat, 'mousedown', 'pan_omlaag', this.pan);
this.voeg_dit_toe(thumb, 'mousemove', 'pan_schuiven');
}
this.x__gegevens[4] = w;
this.x__gegevens[5] = h;
}
},
zoom_borders: function() {
var z__links = this.x__gegevens[4] / this.de__style_regelen(this.img, 'width') * this.de__style_regelen(this.img, 'left');
var top = this.x__gegevens[5] / this.de__style_regelen(this.img, 'height') * this.de__style_regelen(this.img, 'top');
this.werker(this.pan, {
visibility: (this.eenarray.length > 1 ? 'visible': 'hidden'),
left: -z__links + 'px',
top: -top + 'px',
width: this.x__gegevens[4] * this.x__gegevens[0] / this.de__style_regelen(this.img, 'width') + 'px',
height: this.x__gegevens[5] * this.x__gegevens[1] / this.de__style_regelen(this.img, 'height') + 'px'
});
this.werker(this.panplaat, {
left: z__links + 'px',
top: top + 'px'
});
if (this.tmask) {
this.werker(this.tmask, {
visibility: (this.eenarray.length > 1 ? 'visible': 'hidden')
});
}
},
pan_zoom_hoofd: function() {
var z__links = Math.max(Math.min(this.x__gegevens[4] - this.de__style_regelen(this.pan, 'width'), this.de__style_regelen(this.pan, 'left')), 0);
var top = Math.max(Math.min(this.x__gegevens[5] - this.de__style_regelen(this.pan, 'height'), this.de__style_regelen(this.pan, 'top')), 0);
this.werker(this.pan, {
left: z__links + 'px',
top: top + 'px'
});
this.werker(this.panplaat, {
left: -z__links + 'px',
top: -top + 'px'
});
this.werker(this.img, {
left: -z__links * this.de__style_regelen(this.img, 'width') / this.x__gegevens[4] + 'px',
top: -top * this.de__style_regelen(this.img, 'height') / this.x__gegevens[5] + 'px'
});
this.mini__maxi();
}
};
var zoom_een;
function begin_pan_zoom() {
zoom_een = new zoom_voor_pan({
id_voor_pan: 'pan-zoom',
zoomfactor: 2.5,
de_thumbnail: {
id_voor_pan: 'pan-image-klein',
een_pan_border: 'zoom_borders',
masker_pan: 'pan_masker',
draggen: true
}
});
}
begin_pan_zoom();
</script>