Довольно частая практика на современных сайтах - плавное увеличение блока с изображением. Как же это сделать с помощью CSS?

Плавное увеличение изображения при наведении курсора CSS Делим решение задачи на два этапа: разметка html и стили css. Для начала разметим блоки с изображениями внутри:



Всем блокам присвоили класс box. Одним из важных его свойств будет overflow:hidden, то есть скрыть всё, выходящее за рамки блока. Будем же увеличивать изображение? Да. Но видима будет только часть, ограниченная блоком.
Это мы разобрали. Переходим к описанию стилей.

Box {
overflow:hidden;
width: 250px;
height:250px;
}
Всё как и оговаривали - квадратные блоки, схожие по размеру со стандартным, не увеличенным изображением, то тоже 250 на 250.
Свойство overflow:hidden как и говорилось ранее, не позволить выходить за рамки блока при увеличении.
Свойства касающиеся изображений:

Box img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Box img:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
Тут без CSS3 никуда. Все современные браузеры анимацию отобразят. Нужны параметры transition и transform. Время на анимацию выставляем 1 секунду (1s). Увеличение будет происходить в 1.2 раза. Вы можете изменить на Ваш вкус.
Теперь к примеру работы!

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

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

1. Увеличение изображения через ссылку адрес-изображения-или-меньшей-копии "/>

Пояснение к примеру:

  • - для того, чтобы ссылка не передавала вес изображению;
  • target="_blank" - изображение откроется в новой вкладке.

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

Пример работы:

Несмотря на простоту применения, этот способ является далеко не лучшим, поскольку для увеличения изображения приходится открывать новую страницу, но зато таким методом можно просматривать изображения любых размеров. Так что делаем вывод: если необходимо увеличить изображения очень большого размера, то это единственный верный способ сделать это.

2. Автоматическое увеличение изображение при наведении курсора

Название способа четко отражает его суть: при наведении курсора мышки на изображение оно автоматически зуммируется. Реализация метода элементарная, но опять-таки этот способ мне не нравится тем, что невозможно просто провести курсор через изображение. Ведь оно всегда будет увеличиваться - это может начать раздражать пользователя.

Следующий код реализует возможность автоматического зуммирования при наведении курсора:

img.zoom { cursor : pointer ; max-width : 150px ; } img.zoom:hover { max-width : none ; }

Пояснения к примеру:

  • img.zoom {max-width: 150px } - задает ширину изображения до увеличения;
  • img.zoom:hover {max-width: none } - задает ширину изображения после увеличения (параметр none означает, что ограничение на максимальный размер отсутствует);
3. Увеличение изображения при клике

Это самый распространенный и удобный метод увеличения изображений. Причем здесь существует множество способов и вариантов реализации. Рассмотрим несколько самых популярных вариантов:

3.1. Увеличение при активном фокусе

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

.foc { width : 150px ; cursor :pointer ; display :inline ; } .foc:focus { width : auto ; z-index : 100 ; }

Как это выглядит на странице:

3.2. Увеличение изображения поверх страницы

Ниже приведен код для реализации этого метода

.blokimg { position : relative ; } .overlay { display : none ; height : auto ; left : -15% ; position : absolute ; top : -50% ; width : auto ; z-index : 999 ; } .overlay .overlay_container { display : table-cell ; vertical-align : middle ; } .overlay_container img { background-color : #AB5 ; padding : 10px ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ; } .overlay:target { display : table ; } большое_изображение "/> маленькое_изображение " id ="imagenM1 " />

Как это выглядит на странице:

Варианты 3.1 и 3.2 полностью основаны на возможностях CSS, а значит являются "лайт" способами, т.к. не нагружают страницу лишними скриптами. Есть и другие варианты, которые также основаны на CSS, однако, они уже более экзотические. Я не буду рассматривать их в рамках этой статьи, поскольку некоторые браузеры не поддерживаются подобные вещи.

3.3. Красивое увеличение

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

В архиве будет одна папка содержащая изображение, два файла.js и один.css.

2) Добавьте эти файлы к себе на сайт так, как они есть в архиве (т.е. папка imgs должна лежать в директории где будут файлы.js и.css).

3) На каждой странице сайта, где будет использоваться увеличение изображения, необходимо подключить метод и стиль simplebox:

(function(){ var boxes=,els,i,l; if(document.querySelectorAll){ els=document.querySelectorAll("a"); Box.getStyles("simplebox_css","simplebox.css"); Box.getScripts("simplebox_js","simplebox.js",function(){ simplebox.init(); for(i=0,l=els.length;i адрес_меньшей_копии_изображения ">

Примечание
Вместо адреса меньшей копии изображения можно прописать адрес основного изображения, но при этом применить атрибут width, в котором указать небольшую ширину (читайте подробнее о ).

Довольно частая практика на современных сайтах - плавное увеличение блока с изображением. Как же это сделать с помощью CSS?

Плавное увеличение изображения при наведении курсора CSS Делим решение задачи на два этапа: разметка html и стили css. Для начала разметим блоки с изображениями внутри:



Всем блокам присвоили класс box. Одним из важных его свойств будет overflow:hidden, то есть скрыть всё, выходящее за рамки блока. Будем же увеличивать изображение? Да. Но видима будет только часть, ограниченная блоком.
Это мы разобрали. Переходим к описанию стилей.

Box {
overflow:hidden;
width: 250px;
height:250px;
}
Всё как и оговаривали - квадратные блоки, схожие по размеру со стандартным, не увеличенным изображением, то тоже 250 на 250.
Свойство overflow:hidden как и говорилось ранее, не позволить выходить за рамки блока при увеличении.
Свойства касающиеся изображений:

Box img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Box img:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
Тут без CSS3 никуда. Все современные браузеры анимацию отобразят. Нужны параметры transition и transform. Время на анимацию выставляем 1 секунду (1s). Увеличение будет происходить в 1.2 раза. Вы можете изменить на Ваш вкус.
Теперь к примеру работы!

Смысл увеличения фрагмента изображения

Наверняка вы уже видели подобные скрипты, установленные на сайтах крупных интернет-магазинов, когда при просмотре какого-то товара вы можете поводить мышкой по изображению и при этом будет увеличиваться именно тот его фрагмент, над которым находится курсор мышки в данный момент. Это очень удобно, когда необходимо детально изучить какой-то товар, например бытовую технику, мобильные телефоны, часы, ювелирные украшения, да все что угодно. При этом открываться лишнее всплывающее окно не будет, что довольно удобно и сейчас вы поймете, почему.

Смысл метода увеличения фрагмента изображения при наведении курсора мышки заключается в том, что размер детального изображения может превышать разрешение экрана пользователя, например разрешение экрана ноутбука, с которого просматривают сайт - 1280х800, а размер детального изображения - 1920х900. Ясное дело, что целиком на экране оно никак не уместится, поэтому для его увеличения классический метод с помощью выпадающего окна здесь не подходит. Нужно либо уменьшить картинку до размеров экрана пользователя, либо масштабировать ее (лучше так не делать), либо использовать хитрость и увеличивать лишь часть изображения. В таком случае сайт будет прекрасно смотреться как на больших, так и на маленьких мониторах, но при этом размер детальной картинки будет достаточно большим, чтобы пользователи смогли ее подробно изучить.

Преимущества и недостатки

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

  • простота установки;
  • гибкость настройки;
  • минимальный размер JavaScript;
  • простейшая HTML разметка;
  • совместимость с jQuery любой версии;
  • кроссбраузерность;
  • подходит для разных разрешений экранов;
  • лучше навороченных аналогов;
  • бесплатный;
  • подробное описание принципа работы и легко читаемый исходный код.

Как видите, преимуществ достаточно много и они очевидны. Да, несомненно, вы можете скачать аналогичные скрипты или стащить их с какого-нибудь крупного интернет-магазина. Данный метод, кстати говоря, называется Cloud Zoom , который, на самом деле, является платным и слишком наворочен. Сейчас подобные скрипты широко распространены и используются на многих сайтах, но вам придется потратить довольно много времени для того, чтобы разобраться и интегрировать аналогичный скрипт на свой сайт. Мы же в данной статье подробно опишем работу нашего скрипта, а если учесть, что его код состоит всего из нескольких строк, то вникнуть в суть дела вам удастся всего за несколько минут.

Если говорить о недостатках, то в голову приходит только один момент, да и называть его недостатком можно с натягом. Дело в том, что увеличенное изображение загружается в скрытом слое заранее, еще до того, как пользователь куда-либо нажал. Нам это просто необходимо потому, что когда курсор мышки окажется над картинкой, нужно чтобы увеличенный фрагмент появился моментально, а для этого приходится использовать предварительную загрузку. Но в этом ничего страшного нет, так как обычно на странице будет всего одно такое изображение, а его размер не так уж велик (200-300 Кб при разрешении 1800х1100 как в нашем примере), чтобы стоило переживать за интернет-трафик пользователя.

Разработка в деталях, от А до Я

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

HTML разметка

Как всегда, мы начинаем с HTML разметки страницы. Она до безобразия проста и содержит всего несколько строк кода:

Здесь все элементарно. Первый контейнер с классом preload , как видно из названия, отвечает за предварительную загрузку большого изображения. Зачем это нужно, мы уже обсудили чуть ранее. Внутрь этого контейнера вы помещаете то изображение, которое будет использоваться при увеличении. Некоторые моменты при этом важны и упускать их нельзя:

  • постараться разместить этот контейнер как можно выше в DOM (в коде страницы) - чем выше, тем быстрее скрипт будет готов к работе;
  • скрыть контейнер preload от глаз пользователей, выведя за обозримую область экрана (display: none при этом не подойдет).

Далее идет контейнер, содержащий превью. Мы присвоили ему класс zoomable , который, как не трудно догадаться, означает, что картинка может быть масштабирована. Изображение, которое в нем находится, отображается по умолчанию. Здесь тоже есть несколько ключевых моментов, которые не стоит упускать из виду:

  • размер контейнера должен быть указан явно (ширина и высота, равные размерам превью);
  • контейнер не должен содержать полос прокрутки, а все, что в нем не умещается, не должно отображаться (CSS свойство overflow);
  • при наведении, можно опционально изменить курсор мышки на нестандартный или, как в примере, на один из подходящих стандартных (в виде прицела).

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

  • data-preview-url (путь к маленькому изображению);
  • data-img-url (путь к детальному изображению).

Эти атрибуты можно назвать как угодно, не в этом суть. Главное, чтобы они содержали в себе абсолютные или относительные ссылки на соответствующие изображения. Зачем дублировать путь к маленькому изображению, спросите вы, когда он и так указан в теге img . Не волнуйтесь, вы поймете это чуть позже.

CSS стили

CSS выглядит довольно просто и отвечает всем перечисленным ранее требованиям:

Preload { position: absolute; z-index: -1; top: -5000px; left: -5000px; } .zoomable { cursor: crosshair; width: 600px; height: 368px; overflow: hidden; margin: 0 auto; }

Предварительная загрузка детального изображения

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

  • детальное изображение должно заранее закешироваться браузером ;, чтобы в случае необходимости, моментально отобразиться на экране;
  • для работы скрипта нужно вычислить коэффициент - отношение размеров детального изображения к размерам превью (об этом чуть позже).
JavaScript функция

Теперь все готово и мы переходим к самой интересной части - JavaScript, благодаря которому все это и будет работать.

Итак, приступим и сразу приведем рабочий скрипт целиком , чтобы его было удобно скопировать, а затем детально рассмотрим по частям:

$(window).load(function() { $(".zoomable").hover(function() { $(".zoomable img").stop().animate({opacity: 0}, 0, function() { $(".zoomable img").attr({src: $(".zoomable img").attr("data-img-url")}); }).animate({opacity: 1}, 300); }, function() { $(".zoomable img").stop().animate({opacity: 0}, 0, function() { $(".zoomable img").attr({src: $(".zoomable img").attr("data-preview-url")}).css({margin: "0 0"}); }).animate({opacity: 1}, 300); }); var c = $(".preload img").width() / $(".zoomable img").width(); $(".zoomable").mousemove(function(e) { var pX = e.pageX - $(this).offset().left; var pY = e.pageY - $(this).offset().top; var iX = pX * c - pX; var iY = pY * c - pY; $(".zoomable img").css({margin: "-" + iY + "px -" + iX + "px"}); }); });

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

$(function() { console.log("DOM is ready"); }); $(window).load(function() { console.log("Page is ready"); });

Дело в том, что стандартный $(function() {}); здесь нам не подойдет, ведь если готова структура документа, это еще не значит, что загрузились все находящиеся в нем мультимедийные файлы. А так как нам очень важно получить размеры детального изображения еще до начала работы скрипта, то такое решение полностью оправдано.

Итак, прежде всего, мы обрабатываем событие наведения мышки на наше с вами изображение, используя стандартную функцию jQuery - hover() .

$(".zoomable").hover(function() { }, function() { });

В случае, если курсор мышки находится над контейнером zoomable , мы временно скрываем изображение, незаметно производим подмену его атрибута src (source), а затем плавно выводим на экран. При этом не будет неприятных скачков и все пройдет гладко.

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

Var c = $(".preload img").width() / $(".zoomable img").width();

Данная строка кода вычисляет необходимый для нашего скрипта коэффициент - соотношение размеров маленького и большого изображений. Это нужно для того, чтобы производить точное масштабирование, в зависимости от того, где в данный момент находится курсор мышки пользователя.

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

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

$(".zoomable").mousemove(function(e) { });

Теперь нам нужно вычислить координаты курсора мышки относительно левого верхнего угла экрана. Но нас интересует расположение курсора относительно элемента, а не начала координат, поэтому необходимо сразу же отнять от этих координат расстояние левого верхнего угла контейнера zoomable от начала координат:

Var pX = e.pageX - $(this).offset().left; var pY = e.pageY - $(this).offset().top;

Все что нам остается, это вычислить и подставить значения отступов (margin-top и margin-left ) для детального изображения, чтобы знать, насколько его сдвигать для достижения эффекта увеличения фрагмента изображения. Поскольку слой zoomable у нас имеет фиксированные размеры, а все, что выходит за его пределы не отображается, то требуемый эффект будет получен при помощи отрицательных отступов:

Var iX = pX * c - pX; var iY = pY * c - pY; $(".zoomable img").css({margin: "-" + iY + "px -" + iX + "px"});

Пример работы скрипта

Для примера мы выбрали изображение, увеличение которого может заинтересовать многих. Ведь согласитесь, всем же интересно прочитать, что написано на этикетке бутылки шампанского 🙂

П.С. Комментарии к статье и распространение данного скрипта приветствуются.

При смене темы оформления в WordPress, вместо миниатюр для существующих записей мы иногда видим оригиналы изображений. Это происходит из-за того, что миниатюры требуемого размера небыли созданы в момент загрузки изображения, а с помощью плагина Regenerate Thumbnails эту проблему можно решить.

Размеры изображений

В WordPress есть понятие «размеры изображений» которых по умолчанию всего три — крупный, средний и миниатюра. При загрузке изображений в медиатеку, WordPress создает новый файл для каждого размера, т.е. если посмотреть в директорию загрузок, часто можно увидеть следующее:

  • photo.jpg
  • photo-150×150.jpg
  • photo-300×126.jpg
  • photo-672×360.jpg

Здесь видно, что к оригинальному изображению photo.jpg было создано три дополнительных файла для наших размеров. Размеры по умолчанию в WordPress можно изменять в разделе Параметры → Медиафайлы, а используются они при вставке изображений в записи, при создании галерей и в других местах.

Помимо размеров по умолчанию, в WordPress можно регистрировать дополнительные размеры с помощью тем или плагинов. Например если плагин выводит виджет с популярными записями в боковой колонке, он может сопровождать их изображениями размером 50×50 пикселей. Или тема, которая выводит записи сеткой, может использовать изображения размером 200×200 пикселей.

Стоит снова отметить, что создание файлов различных размеров происходит именно в момент загрузки изображений в медиатеку.

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

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