Маленькие изображения – великая вещь, способная сократить время загрузки страницы и занять малое количество пространства на этой самой странице. С другой стороны, на них трудно смотреть на больших экранах. Но благодаря JavaScript можно создать некоторые довольно интересные вещи. Даже больше. Почти всю страницу можно создать с помощью только плагинов JS и спасти тем самым себя от необходимости долго и изнурительно кодировать.
Плагины JS позволяют поработать с изображениями не хуже, чем CSS. Обрезка, увеличение, изменение и прочее. При этом именно обрезка является наиболее сложной функцией, так как предварительно требуется провести кадрирование, выбрать центральную часть, а не просто: «взять и подрезать края как попало». Что же касается функции изменения масштаба изображений или эффекта увеличения (Zoom), то JS, вероятно, лучшее решение для такой задачи.
Запускаете вы интернет-магазин или просто имеете большую галерею миниатюр на сайте, но один из этих плагинов ниже должен совершенно точно помочь в обработке всех изображений. И в преддверии праздничных недель мы просто и незатейливо сделаем небольшой экскурс в огромное количество плагинов для изменения размеров и обрезки изображений (вторая часть).
Blowup
Замечательная лупа, именующаяся blowup.js, отлично передает эффект «увеличение при наведении». На примере достаточно просто передвигать курсор мышки по изображению, а лупа будет автоматически увеличивать области под курсором.
Одно «но» есть у скрипта – он плагин jQuery, поэтому вам нужна библиотека jQuery, чтобы запустить его. Но при этом вы можете вызвать функцию только одной строкой JS, что делает его очень легким в работе. Взгляните на страницу плагина на портале GitHub, где найдется и инструкция по подключению, и примеры кода, конфигурации, и многое иное. После добавления JS файла достаточно просто вызвать функцию blowup() с необязательными параметрами ширины/высоты, тени, указателем размера и масштаба увеличения. То есть можно настроить лупу самостоятельно, а можно использовать настройки по умолчанию.
Leroy Zoom
При сравнительно небольшом размере (4КВ), плагин Leroy Zoom позволяет производить увеличение изображения в двух вариантах. На демонстрационной странице отлично видно, что сначала можно просто перемещать курсор по картинке, а увеличенная часть будет появляться рядом. Или можно кликнуть по изображению и тогда выбирать непосредственно некоторую часть в определенном радиусе.
На страничке GitHub можно найти подробные инструкции по использованию и конфигурированию. И хотя некоторых может ввести в небольшой шок дата обновления, нужно сказать, что демонстрация отлично работает и до сих пор в основных браузерах (Chrome, Opera, Edge).
Magnifier
В отличие от своих предшественников Magnifier.js является бесплатным ванильным плагином JavaScript, который также позволяет добавить эффект масштабирования за пределами основной миниатюры изображения.
Однако у плагина есть одна действительно уникальная особенность – эффект масштабирования, которым можно управлять с помощью колесика прокрутки мыши (или тачпада ноутбука). При наведении на миниатюру вы можете прокручивать вверх и вниз колесико, чтобы увеличить или уменьшить выбранную область. И на скриншотах ниже размер увеличения – не предел.
Этот плагин может использоваться в галерее изображений или с одиночными картинками. Сам создатель даже подал отличную идею по реализации карточного варианта (изображение-описание), что весьма красиво смотрится. С плагином вообще удобно работать и ошибиться трудновато.
Zoomple
Из всех плагинов по реализации эффекта Zoom, которые вообще существуют, Zoomple является одним из самых уникальных (из большинства). В составе пакета можно обнаружить множество стилей работы по умолчанию, включая круговые и квадратные элементы, а также варианты с задержкой загрузки изображения. На демонстрационной странице как раз и можно все их испытать и опробовать в работе. И, разумеется, убедиться, что плагин отлично поддерживается браузерами.
Несмотря на обилие вариантов, лучшая его работа – эффект увеличения при наведении. Он обладает большим количеством пользовательских настроек. Огромный список этих параметров находится на github и задаются они непосредственно в самом коде, при вызове функции.
Если коротко, то настройки позволяют определять URL-адреса для различных изображений и даже контролировать время загрузки изображения (например, страница прогрузилась и изображение в кэше тоже есть, но по желанию разработчика (нас с вами) пользователь увидит картинку чуть позже, предположим, секунд через 10). Вы также можете выбрать положение окна масштабирования, фон по умолчанию, использовать стили CSS для окна масштабирования и показать или скрыть курсор. Интересные возможности и весьма полезные в большинстве вариантов.
Zoomple действительно очень большой плагин масштабирования изображений и подходит для почти любого веб-сайта. И при всей своей «крутости» он бесплатен.
EasyZoom
Еще один очень насыщенный плагин – EasyZoom. Как следует из названия, это простой в использовании масштабирования плагин и создан он на jQuery. Особенность его даже не в том количестве вариантов зумминга, а в его возможности отлично работать на сенсорных устройствах, таких как планшеты и смартфоны, где большинство библиотек JS не осмеливаются вообще запуститься. Или же попросту нажатие пальцем по изображению не приводит к возможности увидеть увеличение. А тут, вот, пожалуйста.
Итак, при наведении курсора на изображение можно выбрать, как будет выглядеть эффект масштабирования, например, во всплывающем (или статичном) окне рядом с изображением или в самой миниатюре. Плагин даже работает с галереями изображений, где пользователь может сначала выбрать интересующую его миниатюру, а потом увеличить и рассмотреть детали.
Кроме того, с плагином удобно и просто работать, настраивать; есть страничка на GitHub, но именно руководство по кодированию, настройке и прочее находится на демо-странице.
Zoom
Несколько специфичный плагин, разительно отличающийся от своих собратьев. Zoom.js не создает функцию масштабирования в стиле монокля (monocle) и не добавляет на страницу изображения, увеличенного раза, эдак, в три.
Вместо этого плагин работает по клику на изображении для увеличения его в области предварительного просмотра данного изображения. Такой эффект можно встретить часто в интернет-магазинах при увеличении фотографий товаров. Так же Zoom.js – отличный вариант для просмотра изображений в портфолио, новостных сайтов и блогов по всему интернету.
Плагину совершено не требуется указывать какие-либо настройки, ему не важен оригинальный размер изображений или размер миниатюр. Его легко настраивать и использовать. Подробности, как обычно, на GitHub.
Mlens
При первом взгляде на Mlens может возникать ситуация, когда и не знаешь, что думать об увиденном. Но… этот бесплатный плагин предлагает много функциональных возможностей, хотя сам по себе имеет очень малый размер, а настроек у него предостаточно. Что занятно, но уже сразу на демонстрационной странице можно выбрать необходимые настройки и воочию увидеть, что и за что отвечает и каким будет конечный результат.
Разумеется, некоторым нравится реалистичный эффект масштабирования, а некоторым – более усиленный. Значение масштабирования по умолчанию (1) не слишком высокое или низкое. Оно среднее в действительности. Создается эффект, будто вы на самом деле увеличиваете изображение, где можно увидеть достаточно деталей и получить некоторую информацию. Но при этом, такое масштабирование не настолько сильно, чтобы различать пиксели. Попробуйте разные варианты значения, но, наверное, единица самый удобный.
Плагин отзывчив и так же, как его собрат EasyZoom, поддерживает работу на мобильных сенсорных устройствах. На страничке много информации по использованию, настройке, но на деле это все просто делается.
Smooth Products
Большинство функций масштабирования изображений лучше всего подходят для сайтов электронной коммерции. И именно для интернет-магазинов, в первую очередь, и был создан Smooth Products.
Это бесплатный плагин jQuery для миниатюрных фотографий товаров, благодаря которому разработчик может настроить обычную функцию «наведения для увеличения» без необходимости заниматься кодированием с нуля. Демо-страница служит отличным примером не только функции масштабирования, а также миниатюр для коллекции изображений, слайд-шоу, которые также являются общими атрибутами большинства сайтов электронной коммерции. Как говорится, есть специализированные плагины, есть обычные. Этот как раз специализированный.
Все, что вам нужно знать мгновенно, это то, что подключать jQuery необязательно. Он опционален. Для действительно «классных» эффектов достаточно разобраться в работе самого js и в настройках CSS. Как обычно, вся информация о настройке находится на GitHub и она довольно ясна, поэтому практически любой разработчик сможет настроить плагин под свои цели.
Труднее всего может оказаться его настройка в случае, если вы работаете с «третьими» платформами. То есть, если вы создаете сайт на уже готовых онлайн-ресурсах (Shopify, Wix, Ukit и аналогичные). Обычно они предлагают свой набор плагинов и заменить их бывает не так просто. Но возможно. Во всем остальном – плагин несложный.
Zoomio
Плагин Zoomio можно охарактеризовать как самый простой для мобильного использования среди малоизвестных собратьев. Нет, реально, плагинов создается и пишется настолько много, а ведь, по факту, они выполняют одну и ту же функцию – увеличивают изображение. Но что отличает этот от множества – красивые эффекты перехода увеличения. На демонстрационной страничке лучше не спешить и попробовать все варианты, насладиться красотой возможных переходов.
Работает Zoomio полностью на jQuery и позволяет использовать много, очень много функций для настройки качества конечного результата. Вы можете установить общий масштаб и выбрать какой тип функции масштабирования использовать (внутри миниатюры, внешний блок, увеличительный круг и т. д.).
Несмотря на то, что демо находится на dynamicdrive, существует и страничка на GitHub, где также есть информация о внедрении скрипта на страницу. Тем не менее, на демо-странице информации больше и она подробнее.
Завершение
Мы рассмотрели незначительную часть JS-плагинов по работе с эффектом Zoom для изображений. Кто-то скажет, что некоторые из них давно не обновлялись, другие подумают, что есть и иные примеры. И все вы правы. Но есть вот какая мысль. Все эти плагины отлично работают в современных браузерах и описать все плагины невозможно. Нам понравились эти, кому-то – воооон тот. И это отлично! Вам есть с чем сравнивать, а в копилке будут храниться вариации для экспериментов.
Думается, что во всем этом списке найдется, по крайней мере, один плагин, который вы захотите попробовать использовать. Не имеет значения, какой вид масштабирования изображения вам нужен, все они учитываются здесь и вы определенно сможете найти отличный плагин для себя. И заметьте – бесплатный.
Просто посмотрите на список еще раз и подумайте вот о чем, какой из JS-плагинов более всего выделяется, изучите рекомендации разработчика, детальные возможности и настройки. Тогда ваш сайт сможет похвастаться не просто наличием Zoom’инга, но еще и красиво настроенным.
Что же касается той части материала и плагинов, о которой мы упоминали в начале, по обрезке изображений, то оставим её на новый год, с неё и начнем.