Применить эффект плавного масштабирования к изображениям с помощью Zoomer

Вот цитата: «картинка стоит тысячи слов». В веб-дизайне это становится еще более актуальным. Особенно, когда речь идет о демонстрации продуктов, например, на сайте электронной коммерции. Люди должны четко понимать и уметь смотреть на продукт, прежде чем совершить покупку.

Создание максимально большого изображения не может решить эту проблему, так как оно также займет огромное количество доступного пространства. Поэтому лучший выбор – сделать изображение масштабируемым. С Zoomer вы можете сделать это легко.

Zoomer это бесплатная библиотека JavaScript, которая позволяет масштабировать изображение. Когда он включен, он добавит свой собственный стиль и кнопку для увеличения и уменьшения. Он также поддерживает несколько изображений, которые будут автоматически превращены в галерею изображений.

Рекомендуемое чтение: Оптимизация JPEG для Интернета – полное руководство

инициализация

Прежде чем инициализировать его, сначала включите скрипт Zoomer (который вы можете получить из Страница GitHub) в ваш проект вот так:

Zoomer окружит изображение своим стилем и добавит кнопку увеличения и уменьшения. Вы должны также включить таблицу стилей Zoomer перед закрывающим тегом head.

.. ..

Увеличение и уменьшение

Чтобы создать новый Zoomer, легко включите изображение в оболочку. Не забудьте указать для обёртки фиксированную высоту и ширину, так как все доступное пространство будет заполнено новой разметкой. Например, я создаю оболочку с именем .zoomable и определяю высоту до 500px и ширину до 100% следующим образом:

.zoomable {
высота: 500 пикселей;
ширина: 100%;
}

Затем я обертываю изображение, которое хочу сделать масштабируемым, как показано ниже:

Плагин будет изменять размер изображения, пока не будет доступно свободное место для обертки. И если вы добавите больше изображений в оболочку, плагин автоматически обнаружит его, а затем создаст свою собственную галерею с помощью кнопки нумерации страниц.

Итак, является ли изображение масштабируемым? Еще нет. Нам все еще нужно вызвать плагин и включить в него класс, который мы только что создали:

$ ( “Масштабируемый”) Zoomer ().

Это сделано! Изображение теперь можно масштабировать.

Варианты предоставления

Если вы не удовлетворены кнопкой, фоном, увеличением и т. Д., Вы можете настроить его, добавив небольшой фрагмент кода JavaScript. Просто вставьте его в скрипт плагина, вот так.

$ ( “Масштабируемый”). Zoomer ({
customClass: “custom”,
приращение: 0,05
})

Параметр customClass может заменить фоновую оболочку плагина, в то время как приращение может использоваться для увеличения степени масштабирования, а также является ли оно «плавным» или «грубым».

Вы также можете обрабатывать действительно большие изображения, которые были разрезаны на равные плитки с помощью Zoomer. Для этого вы должны передать плитки при инициализации плагина с источником. Дайте ему миниатюру, затем объявите все нарезанные источники изображений, используя следующий фрагмент:

$ ( “Масштабируемый”). Zoomer ({
источник: {
thumbnail: “img / thumbnail.jpg”,
плитка: [
[“img/01-01.jpg”, “img/01-02.jpg”, “img/01-03.jpg”],
[“img/02-01.jpg”, “img/02-02.jpg”, “img/02-03.jpg”],
[“img/03-01.jpg”, “img/03-02.jpg”, “img/03-03.jpg”]
]}
});

В коде HTML просто вызовите обертку без источника img следующим образом:

В Zoomer есть еще много других опций и методов. Проверьте их страница документа для более подробной информации об этом.

Последняя мысль

Изображения могут дать пользователям более подробное представление. Существует много способов отображения изображений, чтобы они были как можно более подробными, например применение лайтбокса или при наведении. Zoomer дает вам дополнительную возможность сделать это. Если у вас есть другие способы, поделитесь ими с нами в поле для комментариев ниже.