Увеличение изображения при наведении. Задаем произвольные размеры для миниатюр в WordPress. Использование произвольных миниатюр

Сегодня хочу рассмотреть, как делать в css увеличение картинки. Это можно делать, например, при наведении на нее, а также само увеличение может происходить плавно или резко. И все это можно делать по-разному.

Простое резкое увеличение

Чтобы менять внешний вид картинки при наведении на нее, мы будем использовать псевдокласс hover. Способ заключается в том, чтобы просто изменять ширину картинки. При изменении ширины высота также автоматически изменяется. Например, ширина нашего виртуального изображения — 320 пикселей. Давайте немного увеличим:

Img:hover{ width: 380px; }

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

Плавное увеличение за счет трансформаций

Теперь мы рассмотрим абсолютно другой способ. Во-первых, изменение размеров будет происходить плавно. Во-вторых, вместо изменения ширины мы воспользуемся трансформациями — это нововведение css3.

Чтобы активировать плавный переход, нужно добавить самой картинке (не картинке по наведению) свойство transition . В нем нужно указать время, за которое должен быть произведен переход. Также можно добавить другие параметры, но на этом я не буду подробно останавливаться сегодня.

Img{ transition: 0.4s; }

Мы говорим браузеру, что изменения стилей для элементов с тегом img должны происходить не резко, а растягиваться по времени на 4 десятых секунды. Отлично, осталось сделать саму трансформацию при наведении на картинку:

Img:hover{ transform: scale(1.15, 1.15); }

Увеличение элементов делается с помощью свойства transform и его значения scale(увеличение по горизонтали, по вертикали) . Таким образом, если вы хотите пропорционально увеличить изображение, оба значения должны быть одинаковыми. Задавайте значения исходя из того, что 1 — это нормальный размер картинки.

Соответственно, в записи выше мы при наведении увеличиваем картинку на 15% с каждой стороны и это происходит плавно.

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

Изменение размера только по одной стороне

Если вам нужно в css увеличить картинку при наведении только по одной стороне, то это также проще всего сделать с помощью трансформаций. Просто напишите так:

Img:hover{ transform: scaleX(1.2); }

То есть после ключевого слова scale явно указываем координату — X или Y .

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

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

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

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

Уже давно на WordPress можно в редакторе задавать «Изображение записи». Эта миниатюра отображается рядом с анонсом статьи. В шаблонах WordPress прописаны размер миниатюры и ее расположение по отношению к тексту анонса. А раз они прописаны, значит, их можно поменять.

Как изменить размер и расположение миниатюры WordPress вы узнаете их этой статьи.
Обращу ваше внимание, что в статье будем пытаться изменить размер и расположение миниатюры Wordpress непосредственно в текущем шаблоне. В файлах шаблона миниатюра прописывается, как Thumbnail. Чаще всего, миниатюра показывается слева от анонса статьи. Размер может быть разный, чаще от 100 на 100 px.

Размер миниатюры можно изменить

Важно! Пред работой, чтобы избежать « » делаем .

Изменить размер миниатюры можно в файле шаблона, в который входит тег вывода анонса статьи. Скорее всего это будет content.php. В административной части сайта . В файле content.php ищем (слово поиска: thumbnail) код содержащий функцию вывода на экран html код картинки:

Например такого вида:

"; the_post_thumbnail(array(100,100)); echo ""; } the_excerpt(); } ?>

Меняем значения на нужный нам размер Миниатюры. На фото пример замены размера миниатюры записи с 100×100 px на 200×200 px.

Изменить отображение миниатюры по отношению к тексту анонса

Изменить размер и расположение миниатюры WordPress можно редакцией таблицей стилей шаблона. Для этого . Ищем файл style.css (Таблица стилей). В файле ищем секцию: /* Images */. В секции ищем код, опять со словом thumbnail.

Entry-summary .thumbnail img { float: none; margin-right: 10px; max-width: 100px; max-height: 100px; padding: 3px; width: expression(document.body.clientWidth < 742? "200px" : document.body.clientWidth > 1000? "200px" : "auto"); }

И меняем Значение свойства float:

float:left | right | none

На выбор вставляем одно из значений: left | right | none (левое | правое | нет).

Также меняем значения в секции ниже, в соответствии с тем, что установили в файле Loop-singl.php.

max-width: 100px; меняем на нужный размер;
max-height: 100px; меняем на нужный размер.

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

Размеры миниатюр в файле function.php

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

Важно! Перед любыми изменениями в файлах шаблона, особенно в файле function.php, сделайте резервную копию сайта, для восстановления сайта в случае ошибок.

Например добавить размеры миниатюр, по умолчанию, можно, так:

If (function_exists("add_theme_support")) { add_theme_support("post-thumbnails"); set_post_thumbnail_size(150, 150, true);

Причем изображение будет обрезаться (true). Код вставляется в файл function.php.

Вывод

На этом все! Надеюсь эти старенькие советы помогут изменить размер и расположение миниатюры WordPress.

WordPress Codex

Скрытый текст

Функция the_post_thumbnail

Функция

the_post_thumbnail

Назначение

Функция the_post_thumbnail выводит html код картинки-миниатюры поста пустое значение, если картинка отсутствует.

Применение

Этот тег шаблона, функция the_post_thumbnail, должен использоваться внутри

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

the_post_thumbnail(string|array $size = "post-thumbnail", string|array $attr = "")

Источник

Файл: wp-includes / post-thumbnail-template.php

Function the_post_thumbnail($size = "post-thumbnail", $attr = "") { echo get_the_post_thumbnail(null, $size, $attr); }

Параметры

$size (строка/массив)

Размер миниатюры, которую нужно получить. Может быть строкой с условными размерами: thumbnail, medium, large, full или массив из двух элементов (ширина и высота картинки): array(60, 60).

По умолчанию : ‘post-thumbnail’, то есть размер который устанавливается для текущей темы функцией set_post_thumbnail_size()

$attr (строка/массив)

Массив атрибутов, которые нужно добавить получаемому html тегу img (alt - альтернативное название).

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

Пример

" title= "_("permalink"), the_title_attribute("echo=0")); ?>"> get("layout", "imgwidth"), $SMTheme->get("layout", "imgheight")), array("class" => $SMTheme->get("layout","imgpos") . " featured_image")); if (!is_single()){ ?>

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

2. Выводим его в нужном месте html кода нашего сайта

В файле стилей присваиваем ему следующие параметры:

Block{ width:150px; height:150px; background:#f30; display: block; opacity: 1; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; } .block:hover { -webkit-transform: scale(1.2,1.2); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1.2,1.2); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; }

Можно проверять готовый результат. Ширину, Высоту, фон и другие параметры задаем какие угодно, главное указать правильно параметры -transform - отвечающий за размер увеличения, причем просто в блоке его трогать не надо, он по умолчанию 1 - исходный размер, а вот при свойстве :hover мы его меняем на нужное, до какого размера будет увеличение, в данном случаи 1.2.
Конечно же Вы можете изменить наоборот, допустим если Вам нужно плавное уменьшение при наведении, тут никто не запретит Вам этого сделать.
Следующее свойство - это -transition , отвечающее за скорость анимации в миллисекундах. Если его не использовать, все будет резко увеличиваться и уменьшаться. В данном примере значение этого параметра - 550ms .

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

1. Как и в первом примере определяем блок с классом уже block2

2. Опять же выводим в нужном месте

И присваиваем ему стили:

Block2{ width: 150px; height: 150px; background:#390; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .block2:hover { width: 200px; height: 200px; }

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

Старые версии браузеров, могут не понять что от них хотят, поэтому смотрите сами. Лично я не обращаю внимания и не забиваю голову плохим с тем, что возможно, 1 из миллиона зайдет на мой сайт с древнего убогого Internet Explorer и у него что-то не отобразится. Для таких пользователей я вывожу сообщение, что им пора отказаться от мусора и перейти на нормальный, человеческий браузер.

На этом все, спасибо за внимание. 🙂