<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
body {
width: 100%;
height: 100%;
font-size: 100%;
}
.contenedor {
width: 52%;
height: 100%;
margin: 0 auto;
padding: 10px 0 80px 10px;
overflow: hidden;
}
.zoomPad {
position: relative;
float: left;
z-index: 100;
cursor: crosshair;
}
.zoomPad > img {
opacity: 1;
border: 1px solid rgb(102, 102, 102);
}
.zoomPup {
width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
opacity: 1;
overflow: hidden;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(204, 204, 204);
z-index: 101;
visibility: hidden;
}
.zoomPup > img {
position: absolute;
top: 0;
left: 0;
display: block;
}
.zoomWindow {
position: absolute;
top: 0;
left: 400px;
visibility: hidden;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(102, 102, 102);
z-index: 102;
}
.zoomWrapper {
width: 300px;
height: 300px;
}
.zoomWrapperTitle {
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.48);
color: rgb(255, 255, 255);
text-align: center;
z-index: 103;
}
.zoomWrapperImage {
width: 100%;
height: 100%;
overflow: hidden;
}
.zoomWrapperImage > img {
position: absolute;
left: 0;
top: 0;
}
.zoomPreload {
position: absolute;
top: 50%;
left: 50%;
visibility: visible;
opacity: 0.8;
color: rgb(51, 51, 51);
font-size: 12px;
font-family: Tahoma;
text-decoration: none;
border: 1px solid rgb(204, 204, 204);
background-color: rgb(255, 255, 255);
padding: 8px;
text-align: center;
background-image: url(http://www.mind-projects.it/projects/jqzoom/images/zoomloader.gif);
background-repeat: no-repeat;
background-position: 43px 30px;
z-index: 110;
width: 90px;
height: 43px;
margin-top: -27px;
margin-left: -50px;
}
@media screen and (max-width: 1024px) {
body {
font-size: 80%;
}
}
@media screen and (max-width: 860px) {
body {
font-size: 62.5%;
}
}
@media screen and (max-width: 650px) {
body {
font-size: 50%;
}
}
</style>
<script type="text/javascript">
var lib = {
Evento : function(elemento, nomevento, fnc) {
elemento.addEventListener(nomevento, fnc, false);
},
cssComputado : function(obj, styleProp, psElem) {
if (obj == null) { return 0; }
var pseudoElem = psElem || null;
var valor = window.getComputedStyle(obj, pseudoElem)[styleProp];
return valor;
},
posCursorObj : function(evt, obj) {
var ev = evt;
posX = ev.layerX;
posY = ev.layerY;
return {x : posX, y : posY};
}
}
var zoomer = {
zoompad : [], zoompup : [], zoomWindow : [], zoompupImage : [], zoomWrapperContenedor : [], zoomWrapperImage : [], escalaW : [], escalaH : [], zoompupW : [], zoompupH : [], zoompadW : [], zoompadH : [], zoomWrapperImageW : [], zoomWrapperImageH : [], zoompupWCentro : [], zoompupHCentro : [], zoomPreload : [], temporizador : null,
zoomerInit : function(i) {
zoomer.temporizador = setTimeout(function() {
if ((document.querySelectorAll('.zoomPup').length) == i) {clearTimeout(zoomer.temporizador); return false;}
zoomer.zoompad[i] = document.querySelectorAll('.zoomPad')[i];
zoomer.zoompup[i] = document.querySelectorAll('.zoomPup')[i];
zoomer.zoomWindow[i] = document.querySelectorAll('.zoomWindow')[i];
zoomer.zoompupImage[i] = zoomer.zoompup[i].getElementsByTagName('img')[0];
zoomer.zoomWrapperContenedor[i] = document.querySelectorAll('.zoomWrapperImage')[i];
zoomer.zoomWrapperImage[i] = zoomer.zoomWrapperContenedor[i].getElementsByTagName('img')[0];
zoomer.zoomPreload[i] = document.querySelectorAll('.zoomPreload')[i];
var n = i, zoomImg = [];
zoomImg[i] = new Image();
zoomImg[i].src = zoomer.zoomWrapperImage[i].src;
zoomImg[i].onload = function() {
zoomer.zoomPreload[i].style.visibility = 'hidden';
zoomer.escalaW[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'width'), 10) / parseInt(lib.cssComputado(zoomer.zoompupImage[i], 'width'), 10);
zoomer.escalaH[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'height'), 10) / parseInt(lib.cssComputado(zoomer.zoompupImage[i], 'height'), 10);
zoomer.zoompupW[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'width'), 10) / parseInt(lib.cssComputado(zoomer.zoomWrapperContenedor[i], 'width'), 10);
zoomer.zoompupH[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'height'), 10) / parseInt(lib.cssComputado(zoomer.zoomWrapperContenedor[i], 'height'), 10);
zoomer.zoompadW[i] = parseInt(lib.cssComputado(zoomer.zoompad[i], 'width'), 10);
zoomer.zoompadH[i] = parseInt(lib.cssComputado(zoomer.zoompad[i], 'height'), 10);
zoomer.zoompup[i].style.width = (zoomer.zoompadW[i] / zoomer.zoompupW[i]) + 'px';
zoomer.zoompup[i].style.height = (zoomer.zoompadH[i] / zoomer.zoompupH[i]) + 'px';
zoomer.zoompupW[i] = parseInt(lib.cssComputado(zoomer.zoompup[i], 'width'), 10);
zoomer.zoompupH[i] = parseInt(lib.cssComputado(zoomer.zoompup[i], 'height'), 10);
zoomer.zoomWrapperImageW[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'width'), 10);
zoomer.zoomWrapperImageH[i] = parseInt(lib.cssComputado(zoomer.zoomWrapperImage[i], 'height'), 10);
zoomer.zoompupWCentro[i] = (zoomer.zoompupW[i] / 2);
zoomer.zoompupHCentro[i] = (zoomer.zoompupH[i] / 2);
lib.Evento(zoomer.zoompad[i], 'mouseover', function(event) {zoomer.fooOver(event, zoomer.zoompup[n], n)});
lib.Evento(zoomer.zoompad[i], 'mousemove', function(event) {zoomer.fooMove(event, zoomer.zoompup[n], n)});
lib.Evento(zoomer.zoompad[i], 'mouseout', function(event) {zoomer.fooOut(event, zoomer.zoompup[n], n)});
zoomer.zoomerInit(++i);
}
}, 10);
},
fooOver : function(evt, zoompup, indice) {
var pos1 = lib.posCursorObj(evt);
var posTopIni = (pos1.y >= (zoomer.zoompadH[indice] - zoomer.zoompupH[indice])) ? (zoomer.zoompadH[indice] - zoomer.zoompupH[indice] - 2) : (pos1.y <= zoomer.zoompupH[indice]) ? 0 : (pos1.y - zoomer.zoompupHCentro[indice]);
var posLeftIni = (pos1.x >= (zoomer.zoompadW[indice] - zoomer.zoompupW[indice])) ? (zoomer.zoompadW[indice] - zoomer.zoompupW[indice] - 2) : (pos1.x <= zoomer.zoompupW[indice]) ? 0 : (pos1.x - zoomer.zoompupWCentro[indice]);
zoompup.style.top = posTopIni + 'px';
zoompup.style.left = posLeftIni + 'px';
zoomer.zoompupImage[indice].style.top = -posTopIni + 'px';
zoomer.zoompupImage[indice].style.left = -posLeftIni + 'px';
zoomer.zoomWindow[indice].style.visibility = 'visible';
zoomer.zoompad[indice].getElementsByTagName('img')[0].style.opacity = .4;
zoompup.style.visibility = 'visible';
zoomer.zoomWrapperImage[indice].complete && (document.querySelectorAll('.zoomPreload')[indice].visibility = 'visible');
},
fooMove : function (evt, zoompup, indice) {
var pos2 = lib.posCursorObj(evt);
if (pos2.y >= zoomer.zoompupHCentro[indice] && pos2.y <= (zoomer.zoompadH[indice] - zoomer.zoompupHCentro[indice] - 2)) {
var posTop = pos2.y - zoomer.zoompupHCentro[indice];
zoompup.style.top = posTop + 'px';
zoomer.zoompupImage[indice].style.top = -posTop + 'px';
var posTopVisor = zoomer.escalaH[indice] * posTop;
zoomer.zoomWrapperImage[indice].style.top = -posTopVisor + 'px';
}
if (pos2.x >= zoomer.zoompupWCentro[indice] && pos2.x <= (zoomer.zoompadW[indice] - zoomer.zoompupWCentro[indice] - 2)) {
var posLeft = pos2.x - zoomer.zoompupWCentro[indice];
zoompup.style.left = posLeft + 'px';
zoomer.zoompupImage[indice].style.left = -posLeft + 'px';
var posLeftVisor = zoomer.escalaW[indice] * posLeft;
zoomer.zoomWrapperImage[indice].style.left = -posLeftVisor + 'px';
}
},
fooOut : function(evt, zoompup, indice) {
var pos3 = lib.posCursorObj(evt);
if (pos3.y < 0 || pos3.x < 0 || pos3.y > (zoomer.zoompadH[indice] - zoomer.zoompupHCentro[indice] - 2) || pos3.x > (zoomer.zoompadW[indice] - zoomer.zoompupWCentro[indice] - 2)) {
zoompup.style.visibility = '';
zoomer.zoompad[indice].getElementsByTagName('img')[0].style.opacity = 1;
zoomer.zoomWindow[indice].style.visibility = '';
}
}
}
lib.Evento(document, 'DOMContentLoaded', function() {zoomer.zoomerInit(0);});
</script>