18/10/2013, 14:15
|
 | Colaborador | | Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses Puntos: 1012 | |
| Respuesta: [APORTE] efectos sin jquery
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>
- 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
Última edición por IsaBelM; 03/01/2015 a las 07:21 |