Октябрь 25, 2019 Запись была обновлена
Плавное увеличение изображений
В этом уроке мы рассмотрим очень полезную библиотеку Javascript, которая позволяет плавно увеличивать изображения. Например, когда человек смотрит какую-либо вещь в интернет-магазине, то, как правило, он максимально увеличивает изображение, чтобы разглядеть товар, который он хочет приобрести. И только после этого он совершает покупку. Сделать изображение с очень большим разрешением — не самый лучший выход. Потому что в этом случае изображения будут занимать много места. Более простым решением будет создать изображение масштабируемым. Это и можно сделать с помощью этой библиотеки.
Когда будете смотреть пример, то изображения могут долго загружаться. В этом случае я советую вам скачать пример себе на компьютер, и уже смотреть с компьютера:
Смотреть примерСкачать
Плавное увеличение изображений
Библиотека, которую мы будем использовать, находится здесь — Zoomer(скачать).
Как сделать плавное увеличение изображений у себя на сайте?
HTML
Подключаем между тегами <head> и </head> две библиотеки и стили для нашего плагина(jQuery, jquery.fs.zoomer.js и jquery.fs.zoomer.css):
1 2 3 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.fs.zoomer.css" /> <script src="js/jquery.fs.zoomer.js"></script> |
Внимание: jQuery библиотека должна быть подключена первой!!!
Данная библиотека позволяет увеличивать отдельные изображения, а также создавать галерею изображений. Сначала рассмотрим случай с одним изображением:
1 2 3 | <div class="zoomable"> <img src="images/priroda.jpg" alt="Красивые горы"/> </div> |
Мы создали блок с классом zoomable и разместили одно изображение с помощью тега <img>. Для того чтобы создать галерею из нескольких изображений, тогда необходимо разместить несколько изображений подряд. Как на примере ниже:
1 2 3 4 5 | <div class="zoomable"> <img src="images/priroda.jpg" alt="Красивые горы"/> <img src="images/priroda-2.jpg" alt="Закат"/> <img src="images/priroda-0.jpg" alt="УУххх"/> </div> |
CSS
Обратите внимание на изображение jquery.fs.zoomer-loading.gif, которое находится в папке images. Оно необходимо для того, чтобы показывать индикатор загрузки перед тем как изображение полностью загрузится.
Поэтому в файле jquery.fs.zoomer.css в 22 строке необходимо указать ПРАВИЛЬНЫЙ путь к этому изображению.
Здесь практически ничего задавать не надо. Лишь задаем размер блока, в котором будут находится наши изображения:
Вы должны задать здесь размеры блока, которые примерно пропорциональны размерам ваших изображений:
1 2 3 4 5 | .zoomable { height: 500px; width: 800px; margin:10px auto; } |
jQuery
Сейчас наша галерея еще не работает. Для того чтобы она начала функционировать с возможностью изменять масштаб изображения, необходимо прописать между тегами <head> и </head>:
1 2 3 4 5 | <script> $(document).ready(function() { $(".zoomable").zoomer(); }); </script> |
Что мы сделали? В первой строке мы указали, что необходимо выполнить функцию zoomer()(которая находится во второй строке), когда страница загрузиться.
Также я хочу рассмотреть некоторые дополнительные свойства, с помощью которых можно настроить нашу галерею.
Для того чтобы задать произвольный стиль для блока в котором находятся изображения(на примере он серый), необходимо прописать свойство customClass внутри функции zoomer() с указанием нового класса:
1 2 3 4 5 6 7 | <script> $(document).ready(function() { $(".zoomable").zoomer({ customClass: "custom" // указываем название класса в кавычках }); }); </script> |
Я задал вот такой стиль для класса custom:
1 2 3 4 | .custom { border:2px dashed #F3696D; /* пунктирная розовая граница */ background-color:#F3CECF; /* бледно-розовый цвет фона */ } |
Блок будет выглядеть следующим образом (пунктирная граница и розовый фон):
Еще одним полезным свойством является указание инкремента, с помощью которого происходит масштабирование изображения. Его можно увеличивать и уменьшать, и соответственно масштабирование будет происходить быстро или медленно. Задается он следующим образом:
1 2 3 4 5 6 7 | <script> $(document).ready(function() { $(".zoomable").zoomer({ increment: 0.0005 }); }); </script> |
Если вы зададите параметр как у меня (то есть 0.0005), тогда вы заметите что масштабирование происходит очень медленно и приходится нажимать на кнопку с минусом или плюсом. Поиграйтесь с этим параметром и выберите наиболее удобный для вас.
Вывод
Очень полезный плагин, который очень необходим при создании галереи изображений на сайте с очень полезной функцией — масштабирование изображений. А увеличенные изображения, например в интернет-магазине, дают более полное представление о товаре. Если у вы знаете еще какие-нибудь способы качественного увеличения изображений — пишите в комментариях ниже.
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
как сделать большее увеличение картинки?