Этот приём с картинками я использую у себя на блоге. Когда пользователь наводит на миниатюру любой записи она плавно увеличивается. Согласитесь, довольно не плохо и красиво смотрится.

И делается это только с помощью CSS3, и довольно таки просто. Сейчас я Вам расскажу как это делать.

Как это работает Вы можете посмотреть в демо и у меня на блоге на главной странице.

Плавное увеличение картинки при наведении только на CSS3.

Html

Для начала нам нужно подготовить не сложную разметку html для наших картинок, в данном случае у нас их будет 3.

Как видите, что все картинки имеют класс image к которому мы, собственно, и будем задавать параметры.

CSS

А вот как выглядят стили:

Image { overflow:hidden; width: 380px; height:250px; }

Мы создали обычный блок размером 380 на 250 пикселей. Это блок должен быть такого же размера как и изображение (в нашем случае 380 на 250). Соответственно, если у Вас картинка будет большего или меньшего размера, размер блока.image делаем такого же размера как и картинка.

И обязательно ставим правило overflow:hidden; Оно нужно для того, чтобы наше изображение не выходило за рамки блока при увеличении.

Теперь задаём правила для самих изображений:

Image img { -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; } .image img:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); }

Анимация происходит с помощью параметра в CSS3. На всю анимацию у нас уходит одна секунда. Если Вы хотите, чтобы картинка быстрее увеличивалась, уменьшите это значение.

В демо картинка увеличивается 1.1 раза. Если поставить значение 2, то картинка увеличится в два раза и так далее.

Вот и всё, друзья. Как и обещал, что урок будет очень простым. Надеюсь Вам понравился этот простой эффект для картинок. До скорых встреч.

Регистрирует новый размер картинки (миниатюры).

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

Чтобы для поста можно было определить картинку миниатюру, нужно активировать эту возможность функцией - add_theme_support("post-thumbnails"); в файле шаблона funсtions.php.

При создании своей темы для каталога тем ВП, название нового размера должно содержать имя темы, . Например:

Add_image_size("mytheme-mini", 200, 200, true);

Хуков нет.

Возвращает

Ничего не возвращает.

Использование

Как создавать миниатюру?

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

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

• array(координата_X, координата_Y) - указание позиции кадрирования, т.е. если указать массив (array("right", "top")), то изображение будет кадрированно с указанных позиций.

crop работает только для вновь создаваемых картинок. Если на сайте уже есть картинки и только потом добавляется размер, то оно обработаны не будут.

По умолчанию: false

Зарезервированные названия размеров

thumb, thumbnail, medium, large, post-thumbnail

Названия " thumb " и " thumbnail " - это алиасы (синонимы) и относятся к одинаковым файлам.

Также вы можете установить опции создаваемой миниатюры через:

Update_option("thumbnail_size_w", 160); update_option("thumbnail_size_h", 160); update_option("thumbnail_crop", 1);

Примеры

Добавим новые размеры миниатюр

Регистрируем новые размеры миниатюр, добавив такой код в файл шаблона functions.php:

If (function_exists("add_theme_support")) { add_theme_support("post-thumbnails"); set_post_thumbnail_size(150, 150); // размер миниатюры поста по умолчанию } if (function_exists("add_image_size")) { add_image_size("category-thumb", 300, 9999); // 300 в ширину и без ограничения в высоту add_image_size("homepage-thumb", 220, 180, true); // Кадрирование изображения }

Кадрирование (параметр $crop)

#1 - false (масштабирование)

Эта строка укажет WP, что при загрузке нового файла, нужно создать его уменьшенную копию. В этом случае миниатюра будет подогнана под ширину или высоту, смотря какая из сторон подходит больше, а противоположная сторона будет уменьшена пропорционально и скорее всего не будет больше указанного размера. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Картинка будет уменьшена до размеров - 250х180 px, т.е. высота будет 180, как мы и указали, однако ширина получится выше указанной 250 а не 220. В этом случае картинка не кадрируется и уменьшенная копия сохраняет пропорции полностью.

Add_image_size("homepage-thumb", 220, 180);

#2 - true (кадрирование)

Если установить четвертый параметр в true, то миниатюра будет уменьшена и обрезана точно под указанные размеры. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Оригинал будет уменьшен до высоты 180xp (тогда ширина его как бы равна 250px), а ширина будет обрезана по краям по 15px и в итоге получим уменьшенную копию: 220х180 пикселей:

Add_image_size("homepage-thumb", 220, 180, true);

#3 - уменьшение по нужной стороне

Чтобы уменьшить картинку по одной из нужных нам сторон, нужно указать противоположной стороне огромное значение. Например, у нас есть картинка 2500х1800, нам нужно получить миниатюру 500х1800, тогда указываем так:

Add_image_size("homepage-thumb", 500, 9999);

#4 - Array(x, y) (кадрирование с указанием позиций)

С версии 3.9 появилась возможность указывать позицию кадрирования. Давайте добавим размер миниатюры, которая будет размером 220х220 пикселей и будет фрагментом от оригинала, который будет взят с левого верхнего угла (left, top):

Add_image_size("custom-size", 220, 220, array("left", "top"));

Х_позиция может быть: " left " " center " или " right ".
Y_позиция может быть: " top ", " center " или " bottom ".

Использование новых размеров

Мы зарегистрировали 3, отличных от базовых, размера: post-thumbnails , category-thumb , homepage-thumb . Чтобы теперь использовать эти размеры (выводить картинки в шаблоне), можно использовать следующие функции:

Избранная картинка (featured image)

Чтобы использовать новый размер при выводе картинки установленной как "Избранная картинка" поста, в файле шаблона нужно использовать функцию the_post_thumbnail() :

If (has_post_thumbnail()) { the_post_thumbnail("category-thumb"); // category-thumb - название размера }

Новый размер в выбор размеров при вставке картинки (админ-панель)

Чтобы добавить новый размер в выбор размеров при вставке картинки в пост, нужно использовать фильтр-хук image_size_names_choose , в котором нужно добавить размер и указать для него понятное название:

Add_filter("image_size_names_choose", "my_custom_sizes"); function my_custom_sizes($sizes) { return array_merge($sizes, array("category-thumb" => "Мой размерчик",)); }

Для основных медиафайлов (PHP/Templates)

Также можно выводить картинки (по размерам) напрямую из библиотеки WordPress по ID картинки. Для этого используйте функцию wp_get_attachment_image() :

// Подразумевается, что у вас в библиотеке есть картинка с ID 42... echo wp_get_attachment_image(42, "category-thumb");

Если нам нужно получить только УРЛ картинки а не готовый тег , то используйте функцию wp_get_attachment_image_src() .

Плагины

Regenerate Thumbnails - этот плагин позволяет создать новые размеры для каждого загруженного изображения. Полезен когда вы изменили или добавили новые размеры миниатюр (через Настройки > Медиафайлы) во время когда в библиотеке уже есть загруженные изображения. Или когда вы изменили размеры "Избранного изображения" поста.

Force Regenerate Thumbnails - удаляет ранее созданные размеры и создает новые, на основе текущих установок.

AJAX thumbnail rebuild - позволяет пересоздать миниатюры. Полезен, если вы использовали функцию add_image_size() когда у вас уже есть загруженные изображения. (Это медленный плагин, но при этом в нем не бывает ошибок с недостатком выделенной памяти).

1. Simple Image Sizes - позволяет создавать новые размеры миниатюр прямо из панели "Медиафайлы". Он также умеет пересоздавать миниатюры. Он добавляет новые размеры в выбор для постов, так вы можете вставлять новые размеры в посты. Вы можете выбирать какие из размеров вы бы хотели пересоздать и для каких типов постов это нужно сделать.

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

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

Смысл метода увеличения фрагмента изображения при наведении курсора мышки заключается в том, что размер детального изображения может превышать разрешение экрана пользователя, например разрешение экрана ноутбука, с которого просматривают сайт - 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. И сегодня мы рассмотрим как задать в WordPress свои произвольные размеры для миниатюр в постах.

Задаем произвольные (свои, кастомные) размеры миниатюр

Открываем файл functions.php и в конце файла пишем комментарий о том что начинаем свой произвольный код, и вставляем код для регистрации своих размеров миниатюр:

// МОИ ФУНКЦИИ // Задаю миниатюры и размеры миниатюр для постов // добавляем миниатюты в тему if (function_exists("add_theme_support")) add_theme_support("post-thumbnails"); // Определяем размеры миниатюр if (function_exists("add_image_size")){ add_image_size("tie-small", 100, 55, true); //$width, $height, $crop add_image_size("tie-medium", 300, 150, true); add_image_size("tie-large", 600, 300, true); }

Выводим в шаблоне кастомные размеры миниатюр

В данном примере я использую тему twentytwelve. В этой теме обычные посты выводятся шаблоном content.php. Открываю этот шаблон. В нем миниатюра записи выводится на 20-й строке кодом:

Нам необходимо вывести свои новые размеры миниатюр. Заменим этот код приведенный выше на следующий:

Я закомментировал стандартный код вывода миниатюры, отключив его, и после него добавил код вывода своей миниатюры, размера tie-medium. Теперь в постах выводятся миниатюры заданного размера tie-medium 300px X 150px.

Дополнение.

Порядок работы с миниатюрами при создании сайта/темы:

1. Определяем какие размеры миниатюр будут использоваться на сайте

2. Регистрируем соответствующие размеры в functions.php

3. Добавляем миниатюры, если миниатюры уже заданы, тогда запускаем плагин regenerate thumbnails

4. Выводим миниатюры в шаблонах

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

1. Размеры изображений в настройках

По умолчанию размеры устанавливаются в административной панели WordPress. Настройка размеров находится в пункте меню: Настройки -> Медиафайлы .

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

2. Размеры изображений из-за add_image_size

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

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

Новые размеры могут применяться в файлах шаблона WordPress для вывода конкретных размеров изображений в миниатюрах на главной или в записи. Это может выглядеть так:

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

Например, вместо 400 на 300 (которому соответсвует add_image_size -> blog-medium) будет грузится полная версия изображений (допустим с разрешением 1600 на 1600). А это скажется как на скорости загрузки изображений, так и на дополнительной нагрузке сайта.

3. Размеры изображений по умолчанию WordPress

Некоторые размеры изображений WordPress генерирует автоматически. Например .

4. Размеры изображений из-за isset ($content_width)

Как-то в одном из шаблонов WordPress столкнулся с тем, что несмотря на изменения в add_image_size один лишний размер всё-таки создавался. Пришлось углубиться в документацию WordPress, где я нашел такой параметр как «Content Width #» :

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

Например, с параметром $content_width = 750 и настройками медиафайлов WordPress (пункт 1) где указан размер больше 750 пикселей, будет создаваться дополнительный размер, который окажется равен или меньше этой цифре.

Вот как это выглядело. У меня были выставлены размеры:
маленький — 150 на 150
средний — 800 на 600
большой — 1200 на 900

С настройкой $content_width = 750; изображения создавались таким образом: сгенерированные изображений

Видим, что размер для формата «Большой» создаётся максимум в пределах 750 пикселей. Это выглядит абсурдно, потому что «средний» размер больше «большого».

Так что либо убираем эту настройку в файле functions.php либо увеличиваем её размер.

5. Размеры миниатюр из-за плагинов

Некоторые установленные плагины на сайте создают свои размеры для миниатюр.

Например, плагин создаёт миниатюру на 60 пикселей по горизонтали.

Эта настройка находится в файле: