Código:
continua en el siguiente post <!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 media="screen" type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
html {
width: 100%;
height: 100%;
}
body {
font-size: 100%;
width: 100%;
min-height: 100%;
height: auto !important;
background-color: rgb(121, 118, 118);
}
div.centrar {
width: 40em;
margin: 0 auto;
}
div.centrar > * {
text-align: center;
padding: 0.5em 0;
}
div.lbox {
height: auto;
}
div.lbox > img {
width: auto;
max-height: 9.25em;
max-width: 13.88em;
margin: 0 1em;
border: 0.21em solid rgb(158, 158, 158);
cursor: pointer;
}
/* LIGHTBOX */
div#capaOpacidad {
display: none;
width: 100%;
min-height: 100%;
height: auto !important;
background-color: #000;
opacity: 0.9;
filter: alpha(opacity=90);
z-index: 100;
position: fixed;
top: 0;
left: 0;
}
div#lightbox-casero {
position: absolute;
display: none;
text-align: center;
top: 0;
left: 0;
z-index: 102;
width: 100%;
}
div#lightbox-casero > div.lightbox-casero-contenedorExterno {
position: relative;
background-color: rgb(255, 255, 255);
width: 20.335em;
height: 20.335em;
margin: 0 auto;
border-radius: 0.4em 0.4em;
}
div#lightbox-casero > div.lightbox-casero-contenedorExterno > div.lightbox-casero-contenedor {
line-height: 0;
}
div#lightbox-casero > div.lightbox-casero-contenedorExterno > div.lightbox-casero-contenedor > img.imagenActual {
width: auto;
height: auto;
top: 0.54em;
}
div#lightbox-casero > div.lightbox-casero-contenedorExterno > div.loading {
position: absolute;
top: 45%;
left: 0;
width: 100%;
text-align: center;
display: none;
}
div#lightbox-casero > div.lightbox-casero-contenedorExterno > span.bt-izq, div#lightbox-casero > div.lightbox-casero-contenedorExterno > span.bt-der {
position: absolute;
top: 47%;
width: 2.14em;
height: 2.05em;
display: none;
}
div#lightbox-casero > div.lightbox-casero-contenedorExterno:hover > span.bt-izq {
background: url('./lightbox_img/prev.png') no-repeat center;
left: 0.5em;
cursor: pointer;
}
div#lightbox-casero > div.lightbox-casero-contenedorExterno:hover > span.bt-der {
background: url('./lightbox_img/next.png') no-repeat center;
right: 0.5em;
cursor: pointer;
}
/* LIGHTBOX */
</style>
<script type="text/javascript">
var lib = {
// ---------- VALORES QUE SE PUEDEN EDITAR --------------
tiempoExpandirImg : 600, // tiempo, en milisegundos, que tarda en expandirse el contenedor de la imagen
tiempoFade : 400, // tiempo, en milisegundos, que tarda en hacer el fadein de la imagen
tiempoFadeOcultar : 600, // tiempo, en milisegundos, que tarda en hacer el fadeout de la imagen
respetarResolucionPantalla : true, // adapta las imágenes a la resolución de pantalla (true/false)
agrupadas : true, // agrupa la imágenes para poder acceder a la imagen siguiente o anterior a la actual (true/false)
tamInicialBloque : 400, // dimensión, en px, desde la que empezará el escado del bloque que contiene a la imagen
// ---------- VALORES QUE SE PUEDEN EDITAR --------------
// =============== mini librería =================
Evento : function(elemento, nomevento, fnc) {
if (elemento.addEventListener) {
elemento.addEventListener(nomevento, fnc, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, fnc);
}
},
EventoEliminar : function(elemento, nomevento, fnc) {
if (elemento.removeEventListener) {
elemento.removeEventListener(nomevento, fnc, false);
} else if (elemento.detachEvent) {
elemento.detachEvent('on' + nomevento, fnc);
}
},
cssComputado : function(obj, styleProp, NOunidades) {
if (obj == null) { return 0; }
if (window.getComputedStyle) {
var valor = window.getComputedStyle(obj, null)[styleProp];
} else if (obj.currentStyle) {
var valor = (/(em)/.test(obj.currentStyle[styleProp])) ? parseInt(obj.currentStyle[styleProp], 10) * 16 : obj.currentStyle[styleProp];
}
return valor;
},
obtenerDiana : function(event) {
return event.target || event.srcElement;
},
editarRegla : function(posRegla) {
var regla;
if (document.all) {
regla = document.styleSheets[0].rules;
} else {
regla = document.styleSheets[0].cssRules;
}
return regla[parseInt(posRegla, 10)];
},
tamanoFuente : function() {
var ancho = lib.obtenerAnchoNavegador() * 0.09;
var tamFuente = parseFloat(16 + (16 * ((ancho-100)/100)));
return tamFuente;
},
tamanoFuenteBody : function(pos) {
var posRegla = pos;
var regla = lib.editarRegla(posRegla);
regla.style.fontSize = lib.tamanoFuente() + 'px';
},
obtenerAnchoNavegador : function() {
if (window.innerWidth) {
return window.innerWidth;
} else if (document.documentElement && document.documentElement.clientWidth != 0) {
return document.documentElement.clientWidth;
} else if (document.body) {
return document.body.clientWidth;
}
return 0;
},
alturaScroll : function() {
return self.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop);
},
// ===================== mini librería ======================
w_previousImg : 0,
h_previousImg : 0,
fncCerrar : function() {},
fncNavIzq : function() {},
fncNavDer : function() {},
h_res : ('innerHeight' in window) ? window.innerHeight : document.documentElement.clientHeight,
arrImagenes : []
};
lib.tamanoFuenteBody(2); // apunta al selector body
lib.Evento(window, 'load', cargar);
function cargar() {
for (var i = 0, n_grupos = document.querySelectorAll('.lbox'); i < n_grupos.length; i++) {
lib.arrImagenes[i] = [];
for (var j = 0, img = n_grupos[i].getElementsByTagName('img'); j < img.length; j++) {
// precarga de imágenes
lib.arrImagenes[i][j] = new Image();
lib.arrImagenes[i][j].src = img[j].alt;
// precarga de imágenes
(function(i, j){
lib.Evento(img[j], 'click', function() {escalarImg(lib.arrImagenes[i][j], j, i)});
})(i, j);
}
}
lib.Evento(window, 'resize', function() { lib.tamanoFuenteBody(2); }); // apunta al selector body
}
function aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt) {
var agrandar_horizontal = w_prevImg + ((w_imgActual - w_prevImg) * avance);
lbCasero_contedorExt.style.width = agrandar_horizontal + 'px';
}
function aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll) {
var agrandar_vertical = h_prevImg + ((h_imgActual - h_prevImg) * avance);
lbCasero_contedorExt.style.height = agrandar_vertical + 'px';
var diferencia_vertical = agrandar_vertical - h_prevImg;
var desplaza_vertical = (posTop - (diferencia_vertical/2) >= posicionScroll) ? posTop - (diferencia_vertical/2) : posicionScroll;
lbCasero.style.top = parseFloat(desplaza_vertical/lib.tamanoFuente()).toFixed(3) + 'em';
}
function disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt) {
var disminuir_horizontal = w_prevImg - ((w_prevImg - w_imgActual) * avance);
lbCasero_contedorExt.style.width = disminuir_horizontal + 'px';
}
function disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll) {
var disminuir_vertical = h_prevImg - ((h_prevImg - h_imgActual) * avance);
lbCasero_contedorExt.style.height = disminuir_vertical + 'px';
var diferencia_vertical = h_prevImg - disminuir_vertical;
var desplaza_vertical = (posTop + (diferencia_vertical/2) >= posicionScroll) ? posTop + (diferencia_vertical/2) : posicionScroll;
lbCasero.style.top = parseFloat(desplaza_vertical/lib.tamanoFuente()).toFixed(3) + 'em';
}
Este tema le ha gustado a 11 personas