Al hacer páginas web de tipo artículo, a menudo se encuentra con la necesidad de hacer clic para ver imágenes grandes. Lightbox2 es un complemento jQuery relativamente excelente entre muchos productos. No entraré en detalles sobre la configuración. Hoy quiero compartir principalmente: cómo acercar la imagen a través de la rueda de desplazamiento del mouse después de hacer clic en la imagen grande.
1. Modifique el código fuente de Lightbox para admitir el escalado de la rueda de desplazamiento
Las ruedas de mouse de soporte unen principalmente todo el cuadro emergente al evento de la rueda del mouse, abre lightbox.js y busque lightbox.prototype.build = function () {...}. Puede unir el evento de rueda de desplazamiento deseado aquí (cuando se inicializa la caja de luz), por ejemplo, agregue el siguiente código al final de la función:
La copia del código es la siguiente:
// zoom de la rueda
this.img = this. $ Container.find ('. Lb-Image');
this.label = this. $ lightbox.find ('. lb-dataContainer');
$ ([this. $ Overlay [0], this. $ lightbox [0]]). bind ("mousewheel", function (e) {
var flag = e.originalevent.wheeldelta <0;
var imgh = self.img.height ();
var imgw = self.img.width ();
var nw = math.round (20*imgw/imgh);
var cth = self. $ OuterContainer.Height ();
var ctw = self. $ ourterContainer.width ();
var layh = self. $ onlay.height ()-20;
var layw = self. $ Overlay.Width ()-20;
// Abajo
if (flag && imgh> 20 && imgw> 20) {
self.img.css ('altura', imgh - 20);
self.img.css ('ancho', imgw - nw);
self. $ outerContainer.css ('altura', CTH - 20);
self. $ outerContainer.css ('ancho', ctw - nw);
if (ctw-nw> 240) {
self.label.css ('ancho', ctw - nw);
}
} else if (! flag && imgh <Layh && imgw <Layw) {
self.img.css ('altura', imgh + 20);
self.img.css ('ancho', imgw + nw);
self. $ outerContainer.css ('altura', CTH + 20);
self. $ outerContainer.css ('ancho', ctw + nw);
self.label.css ('ancho', ctw + nw);
}
E.stoppropagation ();
devolver falso;
});
El código es más fácil de entender, que es agregar el monitoreo de la rueda del mouse al fondo y la imagen frontal, y luego escalar la altura y el ancho proporcionalmente (enrolle para acercarse, desplácese hacia abajo para alejarse). Establecí el cambio de altura en 20 píxeles cada vez, y luego el ancho cambia proporcionalmente. Lo que debe tenerse en cuenta es que el tamaño mínimo de la imagen debe reducirse, y la ampliación de la imagen no puede exceder el límite del rango de pantalla. Al mismo tiempo, para una mejor experiencia, debe agregar e.stoppropagation () y devolver falso para evitar que el navegador se desplace.
2. Modifique el código fuente de Lightbox para admitir imágenes Base64
Puede ser más problemático hablar aquí. Primero veamos los requisitos de formato de código HTML cuando use LightBox nativo:
La copia del código es la siguiente:
<a href = "img/image.jpg" data-lightbox = "test"> Imagen #1 </a>
Esta es la imagen emergente más fácil. Al hacer clic en la imagen #1, aparecerá una caja de luz para mostrar el contenido de img/image.jpg (un elemento <img src = "img/image.jpg"/>).
Ahora consideremos esta situación, si la imagen está codificada en Base64 en el servidor y se almacena en la base de datos. Debería ser así:
La copia del código es la siguiente:
<a href = "datos: imagen/png; base64, ivborw ..." data-lightbox = "test"> Image #1 </a>
El problema es que la longitud de HREF es limitada bajo IE. No se puede colocar una imagen grande en el campo HREF, y la imagen se casará (solo se muestra la parte superior).
Hay otra situación común. Si primero muestra la imagen pequeña y hago clic en la imagen pequeña para ver la imagen grande, debería ser así:
La copia del código es la siguiente:
<a href = "datos: imagen/png; base64, ivborw ..." data-lightbox = "test">
<img src = "datos: imagen /png; base64, ivborw ..." />
</a>
Ok, hay dos datos duplicados de base64, y todos se envían desde el lado del servidor, que consume tiempo y ancho de banda.
Así que lo modifiqué de acuerdo con mis necesidades, el código es muy simple, modifique la subfunción en lightbox.prototype.start = function ($ link) {...} addToalBum:
La copia del código es la siguiente:
función addToalBum ($ link) {
self.album.push ({
// enlace: $ link.attr ('href'),
enlace: $ link.children (). attr ("src"),
Título: $ link.attr ('data-title') || $ link.attr ('title')
});
}
La parte comentada es la original. $ Link es la etiqueta A en el código HTML anterior. Después de la modificación, la función de la función AddToalBum es: al configurar el SRC para aparecer la imagen, ya no toma personajes del HREF original como el SRC para aparecer la etiqueta IMG, pero encuentra directamente el atributo SRC de los elementos infantiles de la etiqueta A. Dado que la longitud del atributo SRC es ilimitado, no tendrá el problema del truncamiento de la imagen.
3. Aplicar la caja de luz a los artículos existentes
La Sección 2 ya ha hablado sobre el hecho de que HTML tiene un cierto formato al usar LightBox. Si las imágenes en el artículo existente son <img src = "img/image.jpg">, debe estar encapsulado en una capa:
La copia del código es la siguiente:
función initlightbox () {
var imgs = $ (". Lightbox-Container"). Find ('img');
$ .each (imgs, function (i) {
var img = $ (imgs [i]);
img.wrap ("<a href = '' data-lightbox = 'test'> </a>");
});
}
Entre ellos, "Lightbox-Container" es la clase del contenedor donde se encuentra el artículo. La función InitlightBox debe colocarse cuando la página se carga lista, encapsulará todas las etiquetas IMG en el artículo en el formato de LightBox.
Eso es todo para este artículo. Puntos 2 y 3: Puede usarlo en sus propios escenarios de uso. El enfoque de los cambios en la caja de luz es admitir la escala de la rueda de desplazamiento.
Adjunto el Lightbox modificado http://xiazai.vevb.com/201412/yuanma/lightbox(vevb.com).rar