При создании веб-страниц типа статьи вы часто сталкиваетесь с необходимостью нажимать, чтобы увидеть большие изображения. Lightbox2-это относительно превосходный плагин jQuery среди многих продуктов. Я не буду вдаваться в подробности о конфигурации. Сегодня я в основном хочу поделиться: как увеличить картинку через колесное колесо прокрутки мыши после нажатия на большую картинку.
1. Измените исходный код Lightbox для поддержки масштабирования колеса прокрутки
Поддержка мышиных колес в основном связывает всю всплывающую окно с событием мышиного колеса, Open Lightbox.js и найдите Lightbox.prototype.build = function () {...}. Вы можете связать желаемое событие колеса прокрутки здесь (когда инициализируется Lightbox), например, добавить следующий код в конце функции:
Кода -копия выглядит следующим образом:
// Расборная колеса
this.img = this. $ container.find ('. lb-image');
this.label = this. $ lightbox.find ('. lb-datacontainer');
$ ([this. $ alplay [0], this. $ Lightbox [0]]). Bind ("Мышиный шляп", функция (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. $ overcontainer.height ();
var ctw = self. $ overcontainer.width ();
var layh = self. $ alplay.height ()-20;
var layw = self. $ alplay.width ()-20;
// Вниз
if (flag && imgh> 20 && imgw> 20) {
self.img.css ('height', imgh - 20);
self.img.css ('width', imgw - nw);
self. $ overcontainer.css ('height', cth - 20);
self. $ overcontainer.css ('width', ctw - nw);
if (ctw-nw> 240) {
self.label.css ('width', ctw - nw);
}
} else if (! flag && imgh <layh && imgw <layw) {
self.img.css ('height', imgh + 20);
self.img.css ('width', imgw + nw);
self. $ overcontainer.css ('height', cth + 20);
self. $ overcontainer.css ('width', ctw + nw);
self.label.css ('width', ctw + nw);
}
e.stoppropagation ();
вернуть ложь;
});
Код легче понять, который состоит в том, чтобы добавить мониторинг колеса мыши на фон и переднее изображение, а затем масштабировать высоту и ширину пропорционально (накапливается, чтобы увеличить, прокрутите вниз, чтобы увеличить). Я устанавливаю изменение высоты до 20 пикселей каждый раз, а затем ширина меняется пропорционально. Следует отметить, что минимальный размер изображения должен быть уменьшен, а увеличение изображения не может превышать предел диапазона экранов. В то же время, для лучшего опыта, вы должны добавить e.stoppropagation () и вернуть False, чтобы предотвратить прокрутку браузера.
2. Измените исходный код Lightbox для поддержки изображений Base64
Здесь может быть более хлопотно. Давайте сначала рассмотрим требования к формату кода HTML при использовании Native Lightbox:
Кода -копия выглядит следующим образом:
<a href = "img/image.jpg" Data-lightbox = "test"> Изображение #1 </a>
Это самое простое всплывающее изображение. При нажатии на изображение № 1 появится Lightbox, чтобы отобразить содержимое img/image.jpg (элемент <img src = "img/image.jpg"/>).
Теперь давайте рассмотрим эту ситуацию, если изображение кодируется в Base64 на сервере и хранится в базе данных? Это должно быть так:
Кода -копия выглядит следующим образом:
<a href = "data: image/png; base64, ivborw ..." data-lightbox = "test"> изображение #1 </a>
Проблема в том, что длина HREF ограничена в соответствии с IE. Большое изображение не может быть помещено в поле HREF, и изображение будет кастрировано (отображается только верхняя часть).
Есть еще одна общая ситуация. Если я сначала отобразите маленькую картину и нажимаю на маленькую картинку, чтобы увидеть большое изображение, это должно быть похоже на следующее:
Кода -копия выглядит следующим образом:
<a href = "data: image/png; base64, ivborw ..." data-lightbox = "test">
<img src = "Data: image /png; base64, ivborw ..." />
</a>
ОК, есть два дублирующих данных Base64, и все они отправляются со стороны сервера, что потребляет время и пропускную способность.
Таким образом, я изменил его в соответствии с моими потребностями, код очень прост, изменить подфункцию в Lightbox.prototype.start = function ($ link) {...} Addtoalbum:
Кода -копия выглядит следующим образом:
Функция Addtoalbum ($ link) {
self.album.push ({
// Ссылка: $ link.attr ('href'),
Ссылка: $ link.children (). attr ("src"),
Название: $ link.attr ('Data-Title') || $ link.attr ('title')
});
}
Прокомментированная часть - оригинал. $ Link - это тег A в предыдущем HTML -коде. После модификации функция функции AddtoAlbum заключается в том, что настройка SRC для всплывающего изображения больше не берет символы из исходного hREF в качестве SRC для всплывающего метка IMG, но непосредственно находит атрибут SRC из детских элементов тега. Поскольку длина атрибута SRC не ограничена, у него не будет проблемы усечения изображения.
3. Примените Lightbox к существующим статьям
Раздел 2 уже говорил о том, что HTML имеет определенный формат при использовании Lightbox. Если изображения в существующей статье: <img src = "img/image.jpg">, они должны быть инкапсулированы в один слой:
Кода -копия выглядит следующим образом:
function initlightbox () {
var Imgs = $ (". Lightbox-Container"). Найти ('img');
$.
var img = $ (imgs [i]);
img.wrap ("<a href = '' lightbox = 'test'> </a>");
});
}
Среди них «Lightbox-Container»-это класс контейнера, где находится статья. Функция initlightbox должна быть размещена при загрузке страницы, она будет инкапсулировать все теги IMG в статье в формат Lightbox.
Это все для этой статьи. Точки 2 и 3: Вы можете использовать его в своих сценариях использования. Основное внимание к изменениям Lightbox уделяется поддержке масштабирования колеса прокрутки.
Прикрепил модифицированный Lightbox http://xiazai.vevb.com/201412/yuanma/lightbox(vevb.com).rar