Ao fazer páginas da web do tipo Artigo, você geralmente encontra a necessidade de clicar para ver imagens grandes. O LightBox2 é um plug-in jQuery relativamente excelente entre muitos produtos. Não vou entrar em detalhes sobre a configuração. Hoje eu quero compartilhar principalmente: como ampliar a imagem através da roda de rolagem do mouse depois de clicar na imagem grande.
1. Modifique o código fonte da caixa de luz para suportar a escala de roda de rolagem
Suportar as rodas do mouse ligam principalmente toda a caixa pop-up ao evento do Mouse Wheel, Open LightBox.js, e encontre o LightBox.prototype.build = function () {...}. Você pode vincular o evento de roda de rolagem desejado aqui (quando o LightBox for inicializado), por exemplo, adicione o código a seguir no final da função:
A cópia do código é a seguinte:
// zoom da roda de imagem
this.img = this. $ container.find ('. lb-image');
this.label = this. $ LightBox.find ('. LB-Datacontainer');
$ ([this. $ sobreposição [0], this. $ Lightbox [0]]).
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. $ sobrever.Height ()-20;
var Layw = self. $ sobrevery.width ()-20;
// Abaixo
if (sinalizador && imgh> 20 && imgw> 20) {
self.img.css ('altura', imgh - 20);
self.img.css ('width', imgw - nw);
self. $ OuterContainer.css ('altura', CTH - 20);
self. $ OuterContainer.Css ('Width', CTW - NW);
if (ctw-nw> 240) {
self.label.css ('width', ctw - nw);
}
} else if (! flag && imgh <layh && imgw <layw) {
self.img.css ('altura', imgh + 20);
self.img.css ('width', imgw + nw);
self. $ OuterContainer.css ('altura', cth + 20);
self. $ OuterContainer.Css ('Width', CTW + NW);
self.label.css ('width', ctw + nw);
}
E.StopPropagation ();
retornar falso;
});
O código é mais fácil de entender, que é adicionar o monitoramento da roda do mouse ao plano de fundo e à imagem frontal e, em seguida, dimensione a altura e a largura proporcionalmente (enrole para aumentar o zoom, role para baixo para aumentar o zoom). Definei a altura de altura para 20 pixels a cada vez e, em seguida, a largura muda proporcionalmente. O que deve ser observado é que o tamanho mínimo da imagem deve ser reduzido e a ampliação da imagem não pode exceder o limite de intervalo da tela. Ao mesmo tempo, para uma experiência melhor, você deve adicionar e.stopPropagation () e retornar false para impedir que o navegador role.
2. Modifique o código -fonte do LightBox para suportar imagens base64
Pode ser mais problemático falar aqui. Vamos primeiro analisar os requisitos de formato de código HTML ao usar o LightBox nativo:
A cópia do código é a seguinte:
<a href = "img/image.jpg" data-lightbox = "test"> imagem #1 </a>
Esta é a imagem pop-up mais fácil. Ao clicar na imagem 1, uma caixa de luz aparecerá para exibir o conteúdo de img/image.jpg (um elemento <img src = "img/image.jpg"/>).
Agora, vamos considerar essa situação, se a imagem for codificada na base64 no servidor e for armazenada no banco de dados? Deve ser assim:
A cópia do código é a seguinte:
<a href = "Data: imagem/png; base64, ivborw ..." Data-LightBox = "Test"> Imagem #1 </a>
O problema é que o comprimento do HREF é limitado no IE. Uma imagem grande não pode ser colocada no campo HREF e a imagem será castrada (apenas a parte superior é exibida).
Há outra situação comum. Se eu primeiro exibir a imagem pequena e clicar na imagem pequena para ver a imagem grande, deve ser assim:
A cópia do código é a seguinte:
<a href = "Data: imagem/png; base64, ivborw ..." Data-LightBox = "Test">
<img src = "Data: imagem /png; base64, ivborw ..." />
</a>
OK, existem dois dados duplicados base64 e todos são enviados do lado do servidor, o que consome tempo e largura de banda.
Então, eu o modifiquei de acordo com minhas necessidades, o código é muito simples, modifique a subcunção em Lightbox.prototype.start = function ($ link) {...} addtoalbum:
A cópia do código é a seguinte:
função addtoalbum ($ link) {
self.album.push ({
// link: $ link.attr ('href'),
link: $ link.children (). att ("src"),
Título: $ link.attr ('Data-título') || $ link.attr ('título')
});
}
A parte comentada é a original. $ link é a tag A no código HTML anterior. Após a modificação, a função da função Addtoalbum é: Ao definir o SRC para exibir a imagem, não leva mais caracteres do HREF original como o SRC para exibir a tag IMG, mas encontra diretamente o atributo SRC dos elementos filhos da tag A. Como o comprimento do atributo SRC é ilimitado, ele não terá o problema do truncamento da imagem.
3. Aplique o LightBox nos artigos existentes
A Seção 2 já falou sobre o fato de que o HTML tem um determinado formato ao usar o LightBox. Se as imagens no artigo existente forem <img src = "img/image.jpg">, ele deve ser encapsulado em uma camada:
A cópia do código é a seguinte:
função initLightBox () {
var imgs = $ (".
$ .ECH (imgs, função (i) {
var iMg = $ (imgs [i]);
img.wrap ("<a href = '' Data-LightBox = 'test'> </a>");
});
}
Entre eles, "Lightbox-container" é a classe do contêiner onde o artigo está localizado. A função InitLightBox deve ser colocada quando a página carregar pronta, ela encapsulará todas as tags IMG no artigo no formato da caixa de luz.
Isso é tudo para este artigo. Pontos 2 e 3: Você pode usá -lo em seus próprios cenários de uso. O foco das mudanças de caixa de luz é suportar a escala de roda de rolagem.
Anexou a caixa de luz modificada http://xiazai.vevb.com/201412/yuanma/lightobox(vevb.com).rar