Foros del Web - Ver Mensaje Individual

IsaBelM · #31 (**permalink**) 18/10/2013, 13:48

Lightbox ----> compatibilidad : todos los navegadores modernos incluido ie8

Código:

<!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';

}

continua en el siguiente post