Foros del Web - Ver Mensaje Individual

IsaBelM · #33 (**permalink**) 18/10/2013, 14:15

continua en el anterior post

Código:

} else if (w_prevImg < w_imgActual && h_prevImg == h_imgActual) {

				if ((nuevo_ahora - nuevotEmpieza) < lib.tiempoExpandirImg) {

					var avance = ((nuevo_ahora - nuevotEmpieza) / lib.tiempoExpandirImg);
					aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}



			} else if (w_prevImg == w_imgActual && h_prevImg < h_imgActual) {


				if ((nuevo_ahora - nuevotEmpieza) < lib.tiempoExpandirImg) {

					var avance = ((nuevo_ahora - nuevotEmpieza) / lib.tiempoExpandirImg);
					aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}



			} else if (w_prevImg == w_imgActual && h_prevImg > h_imgActual) {

				if ((nuevo_ahora - nuevotEmpieza) < lib.tiempoExpandirImg) {

					var avance = ((nuevo_ahora - nuevotEmpieza) / lib.tiempoExpandirImg);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}



			} else {

				mostrarImg(laImg, nuevo_ahora, tamW, tamH);
			}
						
		}, 1);


	})(lib.w_previousImg, lib.h_previousImg);

	lib.w_previousImg = w_imgActual;
	lib.h_previousImg = h_imgActual;

}






function ocultar(e, capaOpacidad, lbCasero) {

	var evt = lib.obtenerDiana(e);

	if (evt.id == 'capaOpacidad' || evt.id == 'lightbox-casero') {

		var opac = 100;
		var fondoOpacado = capaOpacidad;
		var opacCSS = parseInt(parseFloat(lib.cssComputado(fondoOpacado, 'opacity')).toFixed(2) * 100, 10) || fondoOpacado.filters.alpha.opacity;
		var empieza = new Date().getTime();

		(function ocultaImg(empieza, transOpacidad) { 

			setTimeout(function(){

				var ahora = new Date().getTime();

				if (transOpacidad >= 0) {

					if ((ahora - empieza) < lib.tiempoFadeOcultar) {

						var avance = ((ahora - empieza) / lib.tiempoFadeOcultar);
						var opacidad = transOpacidad - ((transOpacidad - 0) * avance);
						var opacidad2 = opacCSS - ((opacCSS - 5) * avance);
						lbCasero.style.opacity = parseFloat(opacidad / 100).toFixed(2);
						fondoOpacado.style.opacity = parseFloat(opacidad2 / 100).toFixed(2);
						lbCasero.style.filter = 'alpha(opacity =' + opacidad + ')';
						fondoOpacado.style.filter = 'alpha(opacity =' + opacidad2 + ')';
						ocultaImg(empieza, transOpacidad);

					} else {

						lbCasero.style.display = 'none';
						lbCasero.style.opacity = '';
						lbCasero.style.filter = 'alpha(opacity = "")';
						fondoOpacado.style.display = 'none';
						fondoOpacado.style.opacity = opacCSS / 100;
						fondoOpacado.style.filter = 'alpha(opacity =' + opacCSS + ')';
						document.querySelector('.loading').style.display = '';
						lib.w_previousImg = 0,
						lib.h_previousImg = 0;

						if (lib.agrupadas) {


							lib.EventoEliminar(document.querySelector('.bt-izq'), 'click', lib.fncNavIzq);
							lib.EventoEliminar(document.querySelector('.bt-der'), 'click', lib.fncNavDer);
							document.querySelector('.bt-izq').style.display = 'none';
							document.querySelector('.bt-der').style.display = 'none';

						}

					}
				}

			}, 1);


		})(empieza, opac);

		lib.EventoEliminar(document, 'click', lib.fncCerrar);

	}

}
</script>
</head>
<body>

<div class="centrar">

	<div class="lbox">

		<img src="./lightbox_img/kod1t.jpg" alt="./lightbox_img/kod1.jpg" />
		<img src="./lightbox_img/kod2t.jpg" alt="./lightbox_img/kod2.jpg" />
		<img src="./lightbox_img/kod3t.jpg" alt="./lightbox_img/kod3.jpg" />
		<img src="./lightbox_img/kod4t.jpg" alt="./lightbox_img/kod4.jpg" />

	</div>


	<div class="lbox">

		<img src="./lightbox_img/kod2t.jpg" alt="./lightbox_img/kod2.jpg" />
		<img src="./lightbox_img/kod4t.jpg" alt="./lightbox_img/kod4.jpg" />
		<img src="./lightbox_img/kod1t.jpg" alt="./lightbox_img/kod1.jpg" />
		<img src="./lightbox_img/kod3t.jpg" alt="./lightbox_img/kod3.jpg" />

	</div>

</div>



<!-- lightbox -->

<div id="capaOpacidad"></div>

<div id="lightbox-casero">

	<div class="lightbox-casero-contenedorExterno">

		<div class="lightbox-casero-contenedor">

			<img src="./lightbox_img/imgdefecto.gif" class="imagenActual" alt="viendo" />

		</div>

		<div class="loading"><img src="./lightbox_img/cargandoImgs.gif" alt="cargando" /></div>
		<span class="bt-izq"></span>
		<span class="bt-der"></span>

	</div>

</div>

<!-- lightbox -->

</body>
</html>

algunas observaciones

* imágenes del lightbox

src --> url de la imagen en miniatura
alt --> url de la imagen a tamaño real

* el código tienes 4 imágenes inherentes

cargandoImgs.gif (imagen que simula la carga de imágenes)
imgdefecto.gif (una imagen gif transparente de 1px por 1px)
prev.png y next.png (imágenes para la navegación entre imágenes agrupadas)

* hay varias variables editables

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