Здравствуйте уважаемые начинающие оптимизаторы.
В WordPress, по умолчанию, при клике на картинку, пользователь переводится на страницу картинки. Согласитесь — это очень неудобно, когда тебя вдруг перекидывает на другую страницу.
Для того, чтоб изображение увеличивалось прямо на той странице, на которой и находиться, на сайт нужно установить специальный скрипт.
Как он работает, можно посмотреть на картинке выше или на картинках в сайдбаре.
Найти его в интернете не проблема, но к сожалению у всех предложений есть один изъян. Код скрипта, при проверке в валидаторе, выдаёт ошибку.
Пришлось немного напрячься, и исправить эту ситуацию, так что дальше речь пойдёт о прекрасно работающем на всех шаблонах, и валидном скрипте.
Способ его установки, доступен даже для тех, кто ничего не знает о скриптах, и вообще о языках программирования.
Вместе с тем, он при отличном результате, позволяет обойтись без плагина, и предполагает обязательное заполнение тега alt , соответствующим текстом, а это очень хорошо скажется на оптимизации сайта.
Не секрет, что плагины тормозят скорость загрузки, так как многие из них размещают свои скрипты в блоке head .
А заполнять тег alt , зачастую просто недосуг. Тут же, хочешь не хочешь, а придётся вписать подходящий текст, так как он отобразится в виде подписи под увеличенной картинкой.
Можно просто задать нумерацию по странице, если изображений много.
Ещё одна фишка заключается в том, что скрипт увеличивает не всё подряд, а только те изображения на которые Вы укажете.
Удобно? Удобно. Ведь если картинка в оригинальном размере прекрасно умещается на странице, то зачем её увеличивать.
Переходим к установке.
Получить zip со скриптом можно совершенно бесплатно, просто скачав его с моего Яндекс Диска. Скачать
После этого его нужно закинуть в корень сайта. Коревая папка — это папка в которой находятся wp-admin, wp-content, и так далее.
Через FTP загружаем zip, распаковываем, после чего в директории появляются три файла, и одна папка.
Папку с zip нужно удалить. Так же, теперь нужно удалить, если был, плагин увеличивающий изображения.
Следующее действие, нужно сделать в файле footer.php . можно, не выходя с сервера, пройти wp-content — themes — Ваша тема — footer.php .
А можно зайти в консоль сайта, затем Внешний вид — Редактор — footer.php , или Подвал. И так и так можно.
В этом файле, в самом конце, перед тегом , нужно вставить следующий код:
(function(){
var boxes=,els,i,l;
if(document.querySelectorAll){
els=document.querySelectorAll("a");
Box..css");
Box..js",function(){
simplebox.init();
for(i=0,l=els.length;iПараметры изображения
"
и в пункте "Ссылка
"
выбрать "Медиафайл
"
.
От мусора и понял — ПОРА! Пора вставлять на блоге в статьи картинки так, чтобы при нажатии на них, они увеличивались и показывались в оригинальном размере.
При чем чтобы эффект увеличения был удобным для пользователя (вас), чтобы мне как автору долго в кодах (настройках) не ковыряться при вставке изображений в статьи и чтобы при этом нагрузка на блог была минимальная. Не хочется использовать всякие плагины и нагружать все ту же базу данных Mysql.
Обратился за помощью к профи и они подсказали мне, что нужно сделать и я все настроил буквально за 3 минуты. Повторюсь, без использования всяких плагинов типа Auto Highslide и т.д. Давайте не буду долго тянуть кота за я... и перейду к делу.
Я испробовал много всяких вариантов скриптов увеличения картинок, но остановил свое внимание на том скрипте, который создает вот такой эффект. Посмотрите пример, нажмите на картинку слева:
Интересный эффект. Нажимаем на изображение и оно не открывается в новом окне (что очень не удобно), а открывается на этой же странице в увеличенном виде, в красивой рамке с крестиком и ниже подставляется описание картинки.
Если вам нравится такой эффект увеличения изображений, то можете использовать его! О нем я и буду писать ниже.
Вот повторюсь в такой эффект просто необходим. Там есть изображения, в которые нужно очень внимательно присматриваться, чтобы что-то там разглядеть. У кого плохое зрение, так те вообще ни чего не увидят. Скрипт увеличения изображений будет как раз кстати!
Итак начнем. Все делается в ТРИ простых шага:
1. Скачиваем скрипт и закидываем его на свой хостинг (сервер)
2. Добавляем в файл footer.php небольшой код
3. Добавляем изображения в статьи блога.
ГОУ! Скачиваем сам скрипт . Закидываем все содержимое в корень своего блога. Корень блога — это главная директория блога где лежат такие папки как wp-admin, wp-content и т.д. Гут! Это сделали!
Вторым шагом добавляем в файл footer.php темы своего блога специальный код. Вот он:
Внимание! В коде замените site.ru на ваш домен. Добавлять код в footer.php нужно перед закрывающим тегом
Гут! Ну в принципе все! Теперь самая основная часть! Будем вставлять картинки в статьи так, чтобы при нажатии они увеличивались, как я показал выше на примере. В общем смотрите. Тут все просто, хотя сначала покажется сложно кому-то! Я вставляю картинки как обычно в пост через кнопку в текстовом редакторе — Добавить медиафайл:
Окей. Теперь я просто весь этот (что на картинке выше) html код изображения в редакторе удаляю, и на его место вставляю вот этот:
В итоге у нас получается вот что:
Мы видим, что сверху у нас ссылка на картинку оригинального размера, а снизу та же самая картинка (тот же url), но для уменьшения ей даны размеры. Кстати так же мы и про оптимизацию не забываем, alt у картинки тоже присутствует. Все круто!
ОБНОВЛЕНИЕ! В комментариях к этой статье Дмитрий Шкурин предложил еще более легкий вариант использования данного скрипта. Теперь в коде вообще ковыряться не нужно:
То есть когда мы закинули скрипт в корень блога + добавили специальный код в footer.php, нам уже не надо ни чего ковырять чтобы добавить картинку в статью. Делаем все следующим образом. Как обычно добавляем картинку в статью через функцию «Добавить медиафайл». Теперь в параметрах отображения файла указываем ссылка как — «медиафайл»:
естественно настраиваем размеры, чтобы картинка ровно влезала в статью, дальше переходим во вкладку «Дополнительно» и в графе «Отношение» пишем — — «Обновить». Готово!
Все быстро, просто и еще удобнее. Дмитрий большое спасибо! Очень помог!
Все просто! Кому что не понятно? Здесь все элементарно! Самое классное то, что я могу придавать эффект увеличения не всем изображениям, а только тем, которым хочу придать. Если, например, я вставляю картину в статью и мне ее не нужно уменьшать, чтобы она влезла в пост, то и эффект увеличения создавать не обязательно!
Вот такие дела. Пользуйтесь. А может кто-то знает способ лучше? Напишите в комментариях. Кстати этот скриптик можно использовать не только на блоге, но еще и на различных одностраничных сайтах! Ну все, всем пока!
С уважением, Александр Борисов
Изображения на сайтах встречаются довольно часто и при этом они бывают больших размеров, но дизайны сайтов далеко не всегда позволяет разместить её в полном формате. Поэтому нужно придумать способ, который бы позволял увеличивать их.
Начнем с примитивных методов, а закончим самым лучшим способом увеличения изображения.
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.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 ; }Как это выглядит на странице:
Варианты 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, в котором указать небольшую ширину (читайте подробнее о ).
Всем привет дорогие друзья читатели! В этом уроке я поговорю с вами о том как сделать на сайте wordpress увеличение картинки при нажатии курсора на нее.
Разбирать мы будем два варианта, для тех, кто хочет сделать это с помощью скрипта увеличения картинки и плагина.
Соответственно будет две части.
Дело в том, что при добавлении картинок на сайт, особенно если они большие, WordPress при нажатии мышкой на них, открывает каждую из них в новой вкладке. Это, откровенно говоря, не очень удобно и не правильно. Поскольку вы создаете под названием attachments (вложения). Т.е каждая картинка – это отдельная страница вложения, которая индексируется. У нас они и так хорошо сканируются поисковыми роботами, поскольку папка uploads для у нас открыта в файле . Сегодня мы разберемся с этим вопросом и подскажем, как правильно организовать на сайте увеличение картинки при нажатии на блоге вордпресс.
Давайте прямо сейчас приступим к освоению урока на практике. Предлагаю посмотреть содержание данной заметки.
Установка скрипта для увеличения картинокНачнем с выполнения первого шага – установки скрипта на сайт. Он очень легкий практически ничего не весит и не создаст нагрузку на ваш блог. Скачать вы его может по этой ссылке.
После того как скачали, вам нужно загрузить его к себе на блог. Зайти вы можете двумя способами как по фтп доступу, так и через панель . Я предпочту второй вариант. Загружать файлы скрипта мы будем в специально созданную папку lib (библиотека – library сокр., примечание автора). Создадим ее по самому ближайшему пути, т.е после public_html или www (в зависимости от вашего хостинга).
Отлично заходим в нее и копируем туда все файлы из архива.
С этим шагом разобрались и сейчас переходим к следующему этапу.
Добавление кода скрипта на блогЧтобы наш скрипт увеличения картинки при нажатии заработал, нам нужно подключить небольшой фрагмент кода в шаблон блога. Для этих целей я рекомендую воспользоваться шаблоном подвала сайта (footer . php ). Вот этот код вам нужно подключить к себе на сайт:
(function(){ var boxes=,els,i,l; if(document.querySelectorAll){ els=document.querySelectorAll("a"); Box.getStyles("simplebox_css","http://local..css"); Box.getScripts("simplebox_js","http://local..js",function(){ simplebox.init(); for(i=0,l=els.length;i