Ver Mensaje Individual
  #32 (permalink)  
Antiguo 18/10/2013, 14:14
Avatar de IsaBelM
IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: [APORTE] efectos sin jquery

continua en el anterior post

Código:
function mostrarImg(laImg, empieza, w, h) {

	document.querySelector('.lightbox-casero-contenedorExterno').style.overflow = '';

	var box = document.querySelector('.imagenActual');
	box.src = laImg.src;
	box.style.width = w + 'px';
	box.style.height = h + 'px';
	box.parentNode.style.lineHeight = parseInt(h + 20, 10) + 'px';

	(function opacidadImg(empieza, transOpacidad) { 
			
		setTimeout(function(){

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

			if (transOpacidad <= 100) {

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

					var avance = ((ahora - empieza) / lib.tiempoFade);
					var opacidad = transOpacidad + ((100 - transOpacidad) * avance);
					box.style.opacity = parseFloat(opacidad/100).toFixed(2);
					box.style.filter = 'alpha(opacity =' + opacidad + ')';
    				opacidadImg(empieza, transOpacidad);

				} else {

					box.style.opacity = '';
					box.style.filter = 'alpha(opacity ="")';
					if (lib.agrupadas) {

						document.querySelector('.bt-izq').style.display = 'block';
						document.querySelector('.bt-der').style.display = 'block';
					}	

				}
			} 

		}, 1);


	})(empieza, 50);

	
	box.style.display = 'inline';

}






function escalarImg(urlIMG, indiceIMG, grupo) {

	var laImg = urlIMG;

	if (lib.respetarResolucionPantalla) {

		var w_imgReal = parseInt(laImg.width, 10);
		var h_imgReal = parseInt(laImg.height, 10);
		var w_imgActual = parseInt(w_imgReal * parseInt((lib.h_res * 100)/h_imgReal, 10)/100)-50;
		var h_imgActual = parseInt(h_imgReal * parseInt((lib.h_res * 100)/h_imgReal, 10)/100)-50;

		if (w_imgActual > w_imgReal || h_imgActual > h_imgReal) {

			w_imgActual = w_imgReal;
			h_imgActual = h_imgReal;
		}

	} else {

		var w_imgActual = parseInt(laImg.width, 10);
		var h_imgActual = parseInt(laImg.height, 10);

	}
	

	var tamW = parseInt(w_imgActual-20);
	var tamH = parseInt(h_imgActual-20);


	document.querySelector('.loading').style.display = 'block';


	if (lib.agrupadas) {

		if (lib.cssComputado(document.getElementById('capaOpacidad'), 'display') == 'none') {

			document.getElementById('capaOpacidad').style.display = 'block';
			lib.Evento(document, 'click', lib.fncCerrar = function(event) { ocultar(event, document.getElementById('capaOpacidad'), document.getElementById('lightbox-casero')) });

		} else {

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

		}


// FLECHAS DE NAVEGACIÓN
 
		var anteriorIMG = (indiceIMG == 0) ? (lib.arrImagenes[grupo].length-1) % lib.arrImagenes[grupo].length : (indiceIMG - 1) % lib.arrImagenes[grupo].length;

		lib.Evento(document.querySelector('.bt-izq'), 'click', lib.fncNavIzq = function() {escalarImg(lib.arrImagenes[grupo][anteriorIMG], anteriorIMG, grupo)});


		var siguienteIMG = (indiceIMG + 1) % lib.arrImagenes[grupo].length;

		lib.Evento(document.querySelector('.bt-der'), 'click', lib.fncNavDer = function() {escalarImg(lib.arrImagenes[grupo][siguienteIMG], siguienteIMG, grupo)});

// FLECHAS DE NAVEGACIÓN


	} else {

		document.getElementById('capaOpacidad').style.display = 'block';
		lib.Evento(document, 'click', lib.fncCerrar = function(event) { ocultar(event, document.getElementById('capaOpacidad'), document.getElementById('lightbox-casero')) });

	}



	document.querySelector('.imagenActual').style.display = 'none';

	lib.w_previousImg = (lib.w_previousImg == 0) ? lib.tamInicialBloque : lib.w_previousImg;
	lib.h_previousImg = (lib.h_previousImg == 0) ? lib.tamInicialBloque : (lib.h_previousImg > lib.h_res) ? lib.h_res : lib.h_previousImg;


	var posicionScroll = lib.alturaScroll()

	var posTop = parseInt((((lib.h_res - lib.h_previousImg) / 2) + posicionScroll), 10);

	var lbCasero = document.getElementById('lightbox-casero');
	lbCasero.style.top = posTop + 'px';
	lbCasero.style.left = 0;
	lbCasero.style.display = 'block';
	

	var lbCasero_contedorExt = document.querySelector('.lightbox-casero-contenedorExterno');
	lbCasero_contedorExt.style.width = lib.w_previousImg + 'px';
	lbCasero_contedorExt.style.height = lib.h_previousImg + 'px';
	lbCasero_contedorExt.style.overflow = 'hidden';


	document.querySelector('.loading').style.display = 'none';


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


	(function escalarImagen(w_prevImg, h_prevImg) {

		setTimeout(function() {

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

			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);
					aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);

				} else {

					var avance = 1;
					aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					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);
					aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					aumentarHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(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);
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					aumentarVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					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);
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(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);
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					escalarImagen(w_prevImg, h_prevImg);
							
				} else {

					var avance = 1;
					disminuirHorizontal(w_prevImg, w_imgActual, avance, lbCasero_contedorExt);
					disminuirVertical(h_prevImg, h_imgActual, avance, posTop, lbCasero_contedorExt, lbCasero, posicionScroll);
					mostrarImg(laImg, nuevo_ahora, tamW, tamH);
				}
continua en el siguiente post
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 23/04/2014 a las 05:48