Привет! Бывает так: заходишь на блог, видишь скрин, а что в нём — вообще не видно. Вот и думаешь, что же автор этого поста хотел показать в нём? Но выход есть — скрипт увеличения картинки при нажатии!

Очень классная штука, этот скрипт. Сами смотрите, увеличивает по клику:

(Кликабельно)

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

Отлично. Теперь нам нужно установить скрипт на свой сайт. Установка проходит в 3 шага:

Итак, начнём.

Вторым этапом у нас идёт установка кода скрипта. Куда устанавливать код? Можно устанавливать в header.php, footer.php, function.php, index.php, но я обычно устанавливаю в footer.php, перед тегом , чтобы код последним подгружался.

Вот сам код:

// Параметры изображения " и в пункте "Ссылка " выбрать "Медиафайл " .

Всем привет дорогие друзья читатели! В этом уроке я поговорю с вами о том как сделать на сайте 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

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

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

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

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

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

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

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

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

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

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

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

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

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

большое_изображение "/>

маленькое_изображение " id ="imagenM1 " />

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

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

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

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

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

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

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

Информация, представленная в этой статье ориентирована в первую очередь для начинающих web-мастеров.

Скрипт «Jquery Image Magnify v1.11» позволяет увеличивать любое изображение на странице до требуемой величины. Увеличение или возвращение к исходному состоянию происходит при нажатии кнопки мыши наведённой на изображение. Картинка готовится в одном экземпляре с необходимыми размерами и увеличивается в соответствии с настройками в файле jquery.magnifier.js .

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

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

• папку images с шестью изображениями в формате jpg ;
• папку js с файлом ява-скрипта jquery.magnifier.js и файлом курсора увеличения magnify.cur (отражается не во всех браузерах!);
• файл с демонстрационным материалом demo.html .

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

В полученном вами примере «Jquery Image Magnify v1.11» будет работать только при включенном Интернете, так как файл последней версии библиотеки jQuery - «jquery.min.js» загружается с сайта Google API.

Если Вы желаете, чтобы всё работало автономно, скачайте и подключите последнюю версию библиотеки jQuery с официального сайта.

Если у Вас уже подключена библиотека jQuery последней или более поздней версии (на момент публикации статьи - версия 3.1.1) или Вы используете удаленное подключение последней версии с сайта jQuery или Google API, разумеется, вторично подключать её не стоит.

Шаг 1. Подберите нужное изображение и загрузите его в папку images , которая находится в корневой папке сайта.

Шаг 2. Содержимое папки js закачайте в одноименную папку в корне сайта.

Шаг 3. Нижеприведенный код подключения jQuery и ява-скрипта jquery.magnifier.js необходимо добавить в раздел head или body вашей страницы:

Шаг 4. А этот код необходимо размещать в разделе body на вашей странице:

Пояснения:

Путь к файлу изображения, выбранного вами.

Размеры изображения до увеличения. Выставляйте их на своё усмотрение.

Проще говоря, в раздел body вы вставляете обычный код изображения, присваивая ему class="magnify" . Если изображение содержит явные атрибуты размеров (ширина и высота), то это позволяет пользователю увеличивать изображение соответственно настроек файла скрипта jquery.magnifier.js . Если же размеры не указаны, то реальные размеры изображения будут основой для увеличения.

Пояснения:

Позиционирование слева.

Позиционирование справа.

Первоначальные размеры изображения могут изменяться с помощью атрибутов width и height .

JQuery.imageMagnify={ dsettings: { magnifyby: 5, //коэффициент увеличения изображения (по умолчанию - 3) duration: 500, // продолжительность анимации в миллисекундах (по умолчанию - 500) imgopacity: 0.2 //степень непрозрачности исходного изображения, когда увеличенное изображение покрывает его (по умолчанию - 0,2)

Как убрать рамку картинки?

Я специально вынес этот вопрос в отдельный подраздел, так как он возник у одного из посетителей сайта.

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

• Открыть файл jquery.magnifier.js . Сделать это можно в любом текстовом редакторе, но я рекомендую Notepad++
• Найти участок кода (в Notepad++ он будет на 51 строке)
  var $clone=$target.clone().css({position:"absolute", left:0, top:0, visibility:"hidden", border:"1px solid gray" , cursor:"pointer"}).appendTo(document.body)
• В выделенной маркером строке выставить значение border равное нулю, либо изменить цвет gray (серый) на white (белый) или любой другой, который Вам подходит по теме. Вот и всё!

На двух страницах. Конец страницы 1.

Здравствуйте уважаемые начинающие оптимизаторы.

В 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