Скрипт увеличения изображения. Скрипт увеличения картинки при нажатии

В этой статье мы расскажем о том, как сделать модальное окно с увеличенным изображением.

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

Сделать такое очень просто, используя jQuery библиотеку. Нам понадобятся три файла - index.html, файл стилей в папке css с названием template.css, и файл скриптов popup_img.js. А ещё три изображения в папке images

Для начала напишем HTML-разметку страницы, не забываем подключить файл стилей и библиотеку jQuery:

Страница

Так же добавляем наши изображения на страницу. У каждого изображения добавляем класс image, при помощи которого мы в будущем будем обращаться в скрипте к изображениям.

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

$(document).ready(function() { // Ждём загрузки страницы $(".image").click(function(){ // Событие клика на маленькое изображение var img = $(this); // Получаем изображение, на которое кликнули var src = img.attr("src"); // Достаем из этого изображения путь до картинки $("body").append(""+ //Добавляем в тело документа разметку всплывающего окна ""+ // Блок, который будет служить фоном затемненным ""+ // Само увеличенное фото ""); $(".popup").fadeIn(800); // Медленно выводим изображение $(".popup_bg").click(function(){ // Событие клика на затемненный фон $(".popup").fadeOut(800); // Медленно убираем всплывающее окно setTimeout(function() { // Выставляем таймер $(".popup").remove(); // Удаляем разметку всплывающего окна }, 800); }); }); });

Здесь всё описывают комментарии. Следующий шаг - добавить стили, для них я не буду описывать комментарии, подразумевается, что CSS вы знаете хорошо.

body { margin:0; } .image { margin:30px; float:left; cursor:pointer; max-height:100px; } .popup { position: absolute; height:100%; width:100%; top:0; left:0; display:none; text-align:center; } .popup_bg { background:rgba(0,0,0,0.4); position:absolute; z-index:1; height:100%; width:100%; } .popup_img { position: relative; margin:0 auto; z-index:2; max-height:94%; max-width:94%; margin:1% 0 0 0; }

Результат работы смотрите на демо-странице.

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

Начнем с примитивных методов, а закончим самым лучшим способом увеличения изображения.

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. Увеличение изображения при клике

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

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 ; }

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

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

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

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

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

Как он работает, можно посмотреть на картинке выше или на картинках в сайдбаре.

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

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

Способ его установки, доступен даже для тех, кто ничего не знает о скриптах, и вообще о языках программирования.

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

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

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

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

Увеличение изображения на сайте 1 способ – увеличение изображения на сайте при наведении курсора

Очень простой, ну наипростейший способ, честное слово. Надо добавить следующий код к свойствам картинки:

Onmouseover="this.style.width="значение ширины большого изображения px"" onmouseout="this.style.width="значение ширины маленького изображения px""

При наведении курсора мыши картинка увеличивается.
Надеюсь, вы понимаете, что все это делается в текстовом редакторе.

2 способ – увеличение картинки на сайте при клике мыши

Способ аналогичный, просто onmouseover надо заменить onclick. К свойствам картинки добавляется следующий код:

Style="width: "значение ширины маленького изображения px; border:2px solid black;" onclick="this.style.width=значение ширины большого изображения px "" onmouseout="this.style.width="значение ширины маленького изображения px""

Полностью это будет выглядеть так

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

Надеюсь вам не показалось сложным использовать такие способы – с помощью html – сделать увеличение изображения на сайте.

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