Lorsque vous créez des pages Web de type d'articles, vous rencontrez souvent la nécessité de cliquer pour voir de grandes images. LightBox2 est un plug-in jQuery relativement excellent parmi de nombreux produits. Je n'entrerai pas dans les détails de la configuration. Aujourd'hui, je veux principalement partager: comment zoomer l'image à travers la roue de défilement de la souris après avoir cliqué sur la grande image.
1. Modifiez le code source Lightbox pour prendre en charge la mise à l'échelle des roues de défilement
La prise en charge des roues de souris lie principalement l'ensemble de la boîte contextuelle à l'événement de la roue de souris, ouvre LightBox.js et recherchez LightBox.prototype.build = function () {...}. Vous pouvez lier l'événement de roue de défilement souhaité ici (lorsque LightBox est initialisé), par exemple, ajoutez le code suivant à la fin de la fonction:
La copie de code est la suivante:
// Image Wheel Zoom
this.img = this. $ contener.find ('. lb-image');
this.label = this. $ lightbox.find ('. lb-datacontainer');
$ ([this. $ superposition [0], this. $ lightbox [0]]). bind ("mouse-wheel", fonction (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. $ OuterContainer.Width ();
var Layh = self. $ overlay.height () - 20;
var Layw = self. $ overlay.width () - 20;
// Vers le bas
if (flag && imgh> 20 && imgw> 20) {
self.img.css («hauteur», imgh - 20);
self.img.css ('largeur', imgw - nw);
self. $ OuterContainer.css («hauteur», Cth - 20);
self. $ OuterContainer.css («largeur», ctw - nw);
if (ctw-nw> 240) {
self.label.css ('largeur', ctw - nw);
}
} else if (! Flag && imgh <Layh && imgw <Layw) {
self.img.css («hauteur», imgh + 20);
self.img.css ('largeur', imgw + nw);
self. $ OuterContainer.css («hauteur», CTH + 20);
self. $ OuterContainer.css («largeur», ctw + nw);
self.label.css ('largeur', ctw + nw);
}
e.stoppropagation ();
retourne false;
});
Le code est plus facile à comprendre, qui consiste à ajouter la surveillance des roues de la souris à l'arrière-plan et à l'image avant, puis à l'échelle de la hauteur et de la largeur proportionnellement (roulez pour zoomer, faites défiler vers le bas pour zoomer). J'ai défini le changement de hauteur sur 20 pixels à chaque fois, puis la largeur change proportionnellement. Ce qui doit être noté, c'est que la taille minimale de l'image doit être réduite et que l'élargissement de l'image ne peut pas dépasser la limite de plage d'écran. Dans le même temps, pour une meilleure expérience, vous devez ajouter e.stoppropagation () et retourner false pour empêcher le navigateur de faire défiler.
2. Modifiez le code source Lightbox pour prendre en charge les images de base64
Il peut être plus difficile de parler ici. Examinons d'abord les exigences du format de code HTML lors de l'utilisation de LightBox native:
La copie de code est la suivante:
<a href = "img / image.jpg" data-lightbox = "test"> image # 1 </a>
C'est l'image pop-up la plus simple. Lorsque vous cliquez sur Image # 1, une LightBox apparaîtra pour afficher le contenu d'IMG / Image.jpg (un élément <img src = "img / image.jpg" />).
Considérons maintenant cette situation, si l'image est codée dans Base64 sur le serveur et est stockée dans la base de données? Ça devrait être comme ceci:
La copie de code est la suivante:
<a href = "data: image / png; base64, ivborw ..." data-lightbox = "test"> image # 1 </a>
Le problème est que la longueur de HREF est limitée sous IE. Une grande image ne peut pas être placée dans le champ HREF et l'image sera castrée (seule la partie supérieure est affichée).
Il y a une autre situation commune. Si j'affiche d'abord la petite image et clique sur la petite image pour voir la grande image, cela devrait être comme ceci:
La copie de code est la suivante:
<a href = "data: image / png; base64, ivborw ..." data-lightbox = "test">
<img src = "data: image / png; base64, ivborw ..." />
</a>
OK, il y a deux données Base64 en double, et elles sont toutes envoyées du côté serveur, qui consomme du temps et de la bande passante.
Je l'ai donc modifié en fonction de mes besoins, le code est très simple, modifie la sous-fonction dans LightBox.prototype.Start = fonction ($ link) {...} addtoalbum:
La copie de code est la suivante:
fonction addtoalbum ($ link) {
self.album.push ({
// lien: $ link.attr ('href'),
lien: $ link.children (). att ("src"),
Titre: $ link.attr ('data-title') || $ link.attr ('title')
});
}
La partie commentée est l'original. $ lien est la balise A dans le code HTML précédent. Après la modification, la fonction de la fonction addtoalbum est: lors de la définition du SRC pour faire apparaître l'image, ne prend plus de caractères du HREF original comme SRC pour faire apparaître la balise IMG, mais trouve directement l'attribut SRC des éléments enfants de la balise A. Étant donné que la longueur de l'attribut SRC est illimitée, elle n'aura pas le problème de la troncature de l'image.
3. Appliquer Lightbox aux articles existants
La section 2 a déjà parlé du fait que HTML a un certain format lors de l'utilisation de LightBox. Si les images de l'article existant sont <img src = "img / image.jpg">, il doit être encapsulé en une seule couche:
La copie de code est la suivante:
fonction initlightbox () {
var imgs = $ (". lightbox-contrainer"). find ('img');
$ .each (imgs, fonction (i) {
var img = $ (imgs [i]);
img.wrap ("<a href = '' data-lightbox = 'test'> </a>");
});
}
Parmi eux, "LightBox-Continuner" se trouve la classe du conteneur où se trouve l'article. La fonction initlightbox doit être placée lorsque la page se charge, elle encapsule toutes les balises IMG dans l'article dans le format LightBox.
C’est tout pour cet article. Points 2 et 3: Vous pouvez l'utiliser dans vos propres scénarios d'utilisation. Les changements de Lightbox sont de prendre en charge la mise à l'échelle des roues de défilement.
J'ai joint le Lightbox modifié http://xiazai.vevb.com/201412/yuanma/lightbox(vevb.com ).rar