Скрипт увеличения изображения при нажатии. Cкрипт увеличения картинки при нажатии. Вариации с размещением изображений

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

На двух страницах. Страница 1. На следующую >>> Описание

Скрипт «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.magnifier.js

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.

От мусора и понял — ПОРА! Пора вставлять на блоге в статьи картинки так, чтобы при нажатии на них, они увеличивались и показывались в оригинальном размере.

При чем чтобы эффект увеличения был удобным для пользователя (вас), чтобы мне как автору долго в кодах (настройках) не ковыряться при вставке изображений в статьи и чтобы при этом нагрузка на блог была минимальная. Не хочется использовать всякие плагины и нагружать все ту же базу данных Mysql.

Обратился за помощью к профи и они подсказали мне, что нужно сделать и я все настроил буквально за 3 минуты. Повторюсь, без использования всяких плагинов типа Auto Highslide и т.д. Давайте не буду долго тянуть кота за я... и перейду к делу.

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

Интересный эффект. Нажимаем на изображение и оно не открывается в новом окне (что очень не удобно), а открывается на этой же странице в увеличенном виде, в красивой рамке с крестиком и ниже подставляется описание картинки.

Если вам нравится такой эффект увеличения изображений, то можете использовать его! О нем я и буду писать ниже.

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

Итак начнем. Все делается в ТРИ простых шага:

1. Скачиваем скрипт и закидываем его на свой хостинг (сервер)
2. Добавляем в файл footer.php небольшой код
3. Добавляем изображения в статьи блога.

ГОУ! Скачиваем сам скрипт . Закидываем все содержимое в корень своего блога. Корень блога — это главная директория блога где лежат такие папки как wp-admin, wp-content и т.д. Гут! Это сделали!

Вторым шагом добавляем в файл footer.php темы своего блога специальный код. Вот он:

Внимание! В коде замените site.ru на ваш домен. Добавлять код в footer.php нужно перед закрывающим тегом

Гут! Ну в принципе все! Теперь самая основная часть! Будем вставлять картинки в статьи так, чтобы при нажатии они увеличивались, как я показал выше на примере. В общем смотрите. Тут все просто, хотя сначала покажется сложно кому-то! Я вставляю картинки как обычно в пост через кнопку в текстовом редакторе — Добавить медиафайл:

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

В итоге у нас получается вот что:

Мы видим, что сверху у нас ссылка на картинку оригинального размера, а снизу та же самая картинка (тот же url), но для уменьшения ей даны размеры. Кстати так же мы и про оптимизацию не забываем, alt у картинки тоже присутствует. Все круто!

ОБНОВЛЕНИЕ! В комментариях к этой статье Дмитрий Шкурин предложил еще более легкий вариант использования данного скрипта. Теперь в коде вообще ковыряться не нужно:

То есть когда мы закинули скрипт в корень блога + добавили специальный код в footer.php, нам уже не надо ни чего ковырять чтобы добавить картинку в статью. Делаем все следующим образом. Как обычно добавляем картинку в статью через функцию «Добавить медиафайл». Теперь в параметрах отображения файла указываем ссылка как — «медиафайл»:

естественно настраиваем размеры, чтобы картинка ровно влезала в статью, дальше переходим во вкладку «Дополнительно» и в графе «Отношение» пишем — — «Обновить». Готово!

Все быстро, просто и еще удобнее. Дмитрий большое спасибо! Очень помог!

Все просто! Кому что не понятно? Здесь все элементарно! Самое классное то, что я могу придавать эффект увеличения не всем изображениям, а только тем, которым хочу придать. Если, например, я вставляю картину в статью и мне ее не нужно уменьшать, чтобы она влезла в пост, то и эффект увеличения создавать не обязательно!

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

С уважением, Александр Борисов

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

В 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