Существует множество способов увеличения изображения на сайте. Мы рассмотрим несколько способов увеличения изображений без использования дополнительных скриптов, только с помощью html и CSS.
Такие способы увеличения изображения на сайте позволяют быстро посмотреть оригинал, так как нет дополнительной загрузки скриптов, однако если Вы хотите открывать оригиналы изображений с помощью скриптов с красивыми эффектами, или создать галерею, рекомендую обратить внимание на следующие статьи:
Лирическое отступление сделал, давайте приступать.
Увеличение изображения на сайте
Плюсом является то, что не нужно делать отдельно миниатюру к оригинальному изображению. Здесь задействовано только одно изображение
Увеличение изображения на сайте при наведении курсора
Первый и самый наипростейший способ увеличения изображения на сайте, это добавить к свойству изображения между тегами img следующий код:
1 | onmouseover="this.style.width='ширина оригинального изображения в px (или auto)'" onmouseout="this.style.width='ширина изображения в уменьшенном виде в px'" |
То есть при одном наведении курсора изображение станет большим.
Код полностью:
1 | <img src="http://makoveckij.ru/wp-content/uploads/2013/09/focus.jpg" style="width:100px;" onmouseover="this.style.width='431px'" onmouseout="this.style.width='100px'" /> |
Результат:
Следующий способ абсолютно похож на первый, только тут мы будем использовать CSS-стили:
1 2 3 4 5 6 7 8 9 10 11 | <style type="text/css"> img.bg { cursor: pointer; max-width: 100px; // ширина уменьшенного изображения; } img.bg:hover { max-width: none; } </style> <img class="bg" src="путь к изображению" /> |
И последний самый красивый способ увеличения при наведении с использованием CSS. Здесь мы добавим рамку и описание к большому изображению.
Код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <style type="text/css"> /* Если изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo"> Иначе не будет работать в IE6 */ .ienlarger { float: left; clear: none; /* Можно установить left или right по необходимости */ padding-bottom: 5px; padding-right: 5px; } .ienlarger a { display:block; text-decoration: none; } .ienlarger a:hover{ position:relative; } .ienlarger span img { border: 1px solid #0099ff; margin-bottom: 8px; } .ienlarger a span { // стили текста описания; position: absolute; display:none; color: #FFCC00; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; // Размер шрифта описания; background-color: #0000ff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-weight: bold; padding-top: 10px; padding-right: 10px; padding-bottom: 13px; padding-left: 10px; } .ienlarger img { border-width: 0; } .ienlarger a:hover span { display:block; top: 10px; // Большое изображение появится на 10px ниже относительно верхнего края миниатюры; left: 40px; // Большое изображение появится на 40px правее относительно левого края миниатюры; z-index: 100; } .resize_thumb { width: 100px; // Вводим нужный размер миниатюры здесь; height : auto; } </style> <div class="ienlarger"><a href="http://makoveckij.ru/"><img src="путь к изображению" alt="thumb" class="resize_thumb" /><span><img src="путь к изображению" alt="оригинал" /><br />Описание изображения.</span></a></div> </style> |
Идем далее. Следующие способы увеличения изображения позволяют увеличивать изображения по клику.
Увеличение изображения на сайте по клику
Способ увеличения изображения по клику похож на самый первый способ увеличения при наведении, только вместо onmouseover мы будем использовать onclick
1 2 | <img src="путь к изображению" style="width:100px; border:2px solid green;" onclick="this.style.width='ширина оригинального изображения в px (или auto)'" onmouseout="this.style.width='ширина изображения в уменьшенном виде в px'" /> |
Результат:
Как видите, здесь, чтобы увеличить изображение, нужно по нему кликнуть, а если убрать курсор, то оно уменьшится автоматически.
В следующем варианте увеличения изображения на сайте по клику мы будем использовать CSS:
1 2 3 4 5 6 | <style type="text/css"> .click {width: ширина изображения в уменьшенном виде в px; cursor:pointer; display:inline;} .click:focus {width: ширина оригинального изображения в px (или auto); z-index:100;} </style> <img border="0" src="путь к изображению" class="click" tabindex="1"/> |
Здесь для того, чтобы уменьшенить изображение, то есть вернуть его в исходный размер, нужно будет кликнуть в любом месте веб-страницы.
Результат:
Еще один вариант с использованием CSS — увеличение изображения по клику поверх текста. Здесь используем вот такой код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <style type="text/css"> .blokimg {position: relative;} .overlay{ display: none; height: auto; position: absolute; width: auto; z-index: 999; } .overlay .overlay_container{ display: table-cell; vertical-align: middle; } .overlay_container img{ background-color: green; padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .overlay:target { display: table; } </style> <div class="blokimg"> <div class="overlay" id="open"> <div class="overlay_container"> <a href="#close"> <img src="путь к изображению"/> </a> </div> </div> <a href="#open"> <img style="width:ширина в px уменьшенного изображения" src="путь к изображению" /> </a> </div> |
Мы рассмотрели несколько вариантов увеличения изображения на сайте: от простейших до чуть более сложных с использованием html и CSS. Используйте любой из них на своих сайтах и без дополнительных скриптов.
Давно хотела сделать подобное увеличение изображений. Сначала попробую использовать html и CSS. А потом ещё и скриптами займусь.
С использованием скриптов красивее. Только и всего, а на html и CSS проще.
Никита, а не мог бы ты написать пост в котором рассказал бы как увеличивать изображения с использованием скриптов.
Я дал в этом посте ссылки на три поста, в которых написано про увеличение изображений с использованием javascript. Если данные методы не понравятся, можешь поискать на других сайтах.
Ага спасибо, нашел.
Отличные методы, нужно будет сделать у себя, а то ставил плагином, а я их не люблю, пришлось убрать, а скриптом специальным что — то не получилось.
Спасибо вам огромное, все работает. Очень помогают разобраться в скрипте ваши комментарии, это при том, что я очень далека от веб программирования и ничего кроме html никогда не использовала. Вы не любитель, вы настоящий сенсей)))
Не, до сенсея мне далеко! Я еще сам учусь.
Спасибо! Очень классная и простая фишка, без скриптов и лишней нагрузки на сервер Спасибо!!!
Да, чем меньше плагинов, тем лучше!
Отличная статья, даже не думал что так просто всё можно сделать через код!
Спасибо!!!!!!!
Всегда пожалуйста!
второй день ищу самый простой способ сделать галерею с помощью css, везде все оч сложно много всего непонятного, Наткнулся на ваш сайт… Просто не нарадуюсь спасибо!
Единственное. как сделать чтобы увеличенная картинка просто в момент увеличения поверх всего была. чтобы не сдвигала своим увеличением другие картинки
Такой вариант возможен. Видел на каком-то сайте подобное решение, но не помню на каком…
Для меня это очень нужная информация. Только у меня не получается первым методом увеличить изображение.
Попробуйте другие методы. Может получится. Может быть такое, что сам wordpress не воспринимает должным образом этот код.
Подскажите пожалуйста как добавить надпись в рамке под картинкой при увеличении по клику, так же как в случае с увеличением при наведении.
Попробуйте поиграться со span-ом — добавить надпись и стили как и в примере с наведением.
У меня последний вариант увеличения картинки работает в «Opera», «Firefox». В «Internet Explorer» почему то не работает. Подскажите пожалуйста, что дописать в коде.
Честно, не знаю! IE — это специфическй браузер!
Мне надо, чтоб картинка-мини стояла в левом сайтбаре. Но при увеличении она накрывает страницу с контентом (контент – справа). Все мне нравиться, но контент просвечивается сквозь увеличенную картинку – очень некрасиво! Как исправить? Спасибо!
Честно, не сталкивался с этим. Не помогу!
Подскажите, почему не получается вывести несколько картинок на одной странице? Все миниатюры видны, но по клику на любой из них увеличивается только первая картинка. Все пути прописаны правильно.
Посмотрите внимательно исходный код страницы на моем блоге, где приведен пример с несколькими миниатюрами.
А какую именно страницу смотреть, киньте ссылку если не затруднит.
Извините, перепутал. Нет на блоге такой страницы.
Не могли бы вы подсказать, как сделать увеличение нескольких картинок, последним способом? спасибо!
Попробуйте продублировать данную конструкцию:
[html]<div class="blokimg">
<div class="overlay" id="open">
<div class="overlay_container">
<a href="#close">
<img src="путь к изображению"/>
</a>
</div>
</div>
<a href="#open">
<img style="width:ширина в px уменьшенного изображения" src="путь к изображению" />
</a>
</div>[/html]
Все равно ничего не получается, даже продублировав. Выводится только первая картинка.
При использовании первого способа почему-то изображение увеличевается только в ширину, в высоту никак не хочет, что нужно добавить?
Проверьте, не забыли ли Вы про параметр height.
Спасибо! Самое лучшее описание. Просмотрел несколько сайтов с подобной темой, но здесь описано и преподнесено — на уровне! Спасибо!
Всегда пожалуйста!
Спасибо огромное!!!!
Несказанно помогли.
Давно искала что-то простое т.к. у меня нет доступа в корневую папку сайта.
Теперь буду ваять
клик по картинке и закрытие при клике в любом месте — даже близко не работает! автор хрень какую то скопировал с других сайтов!
Самый лучший вариант из всех найденных мною. Простой код, прекрасная работа.
Но есть вопрос:
Как сделать так, чтобы картинка сворачивалась при повторном клике на нее?
А какой вариант именно? В статье просто несколько вариантов.
Вот в этом варианте:
[css]
.click {width: ширина изображения в уменьшенном виде в px; cursor:pointer; display:inline;}
.click:focus {width: ширина оригинального изображения в px (или auto); z-index:100;}
[/css]
Что изменить, чтобы изображение сворачивалось при клике не в любом месте страницы, а только при клике на изображении?
Посмотрите здесь, только через JavaScript, но практически похоже.
Большое спасибо!
Спасибо! Очень помогло!
Помогло спасибо админу!!!
Никита добрый день.
Картинка увеличивается но назад по клику не возвращается?
К сожалению, нет.
Последний вариант очень кстати, только он с ID, а если несколько картинок на странице?
Попробуйте такой вариант
Здравствуйте!
Подскажите, пожалуйста, куда и как правильно вставить код для увеличения картинки на сайте — при одном наведении курсора изображение станет большим.
Вставляете в нужное место на странице этот код:
[html]<img src="http://путь к изображению" style="width:100px;" onmouseover="this.style.width=’431px’" onmouseout="this.style.width=’100px’" />[/html]
Здравствуйте Никита. Я вставил в свой блог ваш скрипт: http://pastebin.com/LnSNW4SJ
На странице: http://oco.su/glavnaya/servis-besplatnoy-raskrutki-sayta-na-avtomate/ чтобы картинка увеличивалась при клике на нее. Картинка увеличивается, но почему то не по центру, а смещается вверх и вправо, смотрится некрасиво. Подскажите пожалуйста, что сделать, чтобы картинка увеличивалась ровно по центру?
Странно. Я посмотрел. Картинка открывается по центру, но есть небольшое смещение из-за рамки вокруг нее.