Как увеличить изображение на сайте

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

HTML коды и стили для увеличения изображений

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

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

В данном случае при нажатии на изображение меньшего размера будет осуществлен переход по ссылке на изображение большого размера. В текстовом редакторе вашей CMS прописываем скрипт:

<a href=“адрес большого изображения”><img scr=“адрес маленького изображения”></a>
Для примера возьмем одно изображение двух форматов 1024 на 768 пикселей, 227 на 170 пикселей и пропишем код:
<a href=»https://inetvinegret.ru/wp-content/uploads/2020/01/Дед-Мороз.jpg»><IMG src=»https://inetvinegret.ru/wp-content/uploads/2020/01/-Мороз-1-e1578882232986.jpg» ></a>
Теперь при нажатии на картинку откроется новое окно.

Можно упростить задачу и не загружать в библиотеку медиафайлов изображения двух разных размеров, а задать высоту и ширину при переходе:

<a href=»оригинал изображения»><IMG height=170 width=227 src=»оригинал изображения» ></a>

Для нашего изображения:

<a href=»https://inetvinegret.ru/wp-content/uploads/2020/01/Дед-Мороз.jpg»><IMG height=170 width=227 src=» https://inetvinegret.ru/wp-content/uploads/2020/01/Дед-Мороз.jpg» ></a>

Этот метод прост, но минусом его является то, что вернуться на исходную страницу невозможно.

Можно воспользоваться вариантом, когда сохраняется исходная страница и открывается новое окно с увеличенным изображением:
<a target=»_blank» href=»оригинал изображения»></a227» height=»170″ src=»оригинал изображения»></a>

В нашем случае:

<a target=»_blank» href=»https://inetvinegret.ru/wp-content/uploads/2020/01/Дед-Мороз.jpg»><img width=»227» height=»170″ src=»https://inetvinegret.ru/wp-content/uploads/2020/01/Дед-Мороз.jpg»></a>

Увеличение картинки при помощи курсора или нажатия.

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

<style>
#big {cursor: pointer; width: 227px;}
#big:hover {width: 1024px}
</style>
<img id=»big» src=»оригинал изображения»>

Для нашей картинки:

<style>
#big {cursor: pointer; width: 227px;}
#big:hover {width: 1024px}
</style>
<img id=»big» src=»https://inetvinegret.ru/wp-content/uploads/2020/01/Дед-Мороз.jpg»>

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

<style type=»text/css»>
.foc {
width: 150px;
cursor:pointer;
display:inline;
}
.foc:focus {
width: auto;
z-index: 100;
}
</style>
</head>
<body>
<img border=»0″ src=»оригинал изображения» class=»foc» tabindex=»1″/>

Для нашей картинки:

<style type=»text/css»>
.foc {
width: 150px;
cursor:pointer;
display:inline;
}
.foc:focus {
width: auto;
z-index: 100;
}
</style>
</head>
<body>
<img border=»0″ src=»https://inetvinegret.ru/wp-content/uploads/2020/01/Дед-Мороз.jpg» class=»foc» tabindex=»1″/>

Здесь мы наблюдаем, что при увеличении картинки страница опускается вниз. Можно сделать увеличение, при котором изображение увеличится поверх страницы:

<html>
<head>
.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: #1437e3;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.overlay:target {
display: table;
}
</style>
</head>
<body>
<div class=»blokimg»>
<div class=»overlay» id=»contenedor1″>
<div class=»overlay_container»>
<a href=»#close»>
<img src=»оригинал изображения»/>
</a>
</div>
</div>
<a href=»#contenedor1″>
<img src=»минимальное изображение» id=»imagenM1″ />
</a>
</div>
</body>
</html>

В нашем случае:

<html>
<head>
.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: #1437e3;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.overlay:target {
display: table;
}
</style>
</head>
<body>
<div class=»blokimg»>
<div class=»overlay» id=»contenedor1″>
<div class=»overlay_container»>
<a href=»#close»>
<img src=»https://inetvinegret.ru/wp-content/uploads/2020/01/Дед-Мороз.jpg»/>
</a>
</div>
</div>
<a href=»#contenedor1″>
<img src=»https://inetvinegret.ru/wp-content/uploads/2020/01/-Мороз-1-e1578882232986.jpg» id=»imagenM1″ />
</a>
</div>
</body>
</html>

Важно! Многие сталкиваются с проблемой обрезки кода в визуальном редакторе. Написав скрипт и вставив его в текстовой редактор, после переключения на визуальный редактор происходит удаление половины коды или замена элементов кода на другие. Эта проблема известна многим и очень давно. Решать ее пытались и добавлением кода в function.php и установкой различных плагинов. Оптимальным действенным решением стала установка 2 модулей insert-html-snippet.1.3.1.zip и insert-php-code-snippet.1.3.1.zip, в которых прописанные коды html и php не подвержены изменениям.