Как сделать чтобы при нажатии на картинку она увеличивалась html

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

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

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

1. Увеличение изображения через ссылку

Увеличение изображения через ссылку — самый простой способ без применения каких-либо CSS. Просто ставим ссылку на изображение с большим размером.

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

— для того, чтобы ссылка не передавала вес изображению ; — изображение откроется в новой вкладке.

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

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

2. Автоматическое увеличение изображение при наведении курсора

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

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

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

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

3. Увеличение изображения при клике

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

3.1. Увеличение при активном фокусе

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

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

3.2. Увеличение изображения поверх страницы

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

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

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

3.3. Красивое увеличение

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

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

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

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

Я советую указывать полный путь к файлам simplebox_util.js , simplebox.css и simplebox.js , чтобы их можно было легко использовать для каждой страницы сайта.

Для использования этого метода зуммирования используется следующая конструкция:

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

Увеличение картинки при нажатии

Необходимо, чтобы при нажатии на картинку(уменьшенную версию) на экране по центру появлялась её увеличенная версия. Проблема в том, что если картинок много и открывается картинка внизу, то по закрытии картинки происходит переход вверх страницы. Как можно это реализовать без перехода. Мне посоветовали использовать checkbox , но я не особо понимаю, как через них делать.

Если для вас принципиально использование CSS и структура разметки будет как в вашем примере, то вместо псевдокласса :target на самом показывающемся блоке можно использовать псевдокласс :focus на ссылке, по которой происходит клик, и делать видимой следующую за ней ссылку, будет выглядеть так:

Это устранит скроллирование вверх. Пример на JSFiddle

P.S. Но лучше, по-моему, для полноценных модальных окон использовать JS

Вы можете воспользоваться готовыми решениями, например, библиотекой highslide.js. Она имеет MIT-лицензию и написана на javascript без использования Jquery. Просто подключается:

где /graphics/ — путь до графических компонентов, поставляемых в дистрибутиве.

Как сделать чтобы при нажатии на картинку она увеличивалась html

&#9733 Чистый HTML
&#9733 Чистый CSS
&#9733 Чистый JavaScript
&#9733 Пошаговое увеличение размера
&#9733 Увеличение картинки с надписью

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

Кодировка без использования стиля (чистый HTML)

Способ 1 Простейший код переход от малого размера к размеру оригинала (не больше) через ссылку. Увеличенное изображение открывается в новом окне. Щелкни по фото. Возврат по стрелке ‘назад’. Скрипт будет выглядит так: &ltbody&gt &lta href=»31.jpg»&gt&ltIMG height=70 width=100 src=»http://data5r.narod.ru/31.jpg» &gt&lt/a&gt &lt/body&gt Недостаток — могут возникнуть проблемы с возвращением на исходную страницу (см. комментарий к способу 3).

Способ 2 Щелчок по фото — изображение увеличивается. При уходе курсора — возврат. Переход от малого размера к ЛЮБОМУ размеру (без стиля). Возможность задать любой увеличенный размер. Простой и короткий код. В коде только один адрес фото. &ltimg src=»http://data5r.narod.ru/31.jpg» style=»width:100px» onclick=»this.style.width=’800px'» onmouseout=»this.style.width=’150px'» &gt //код не разрывать Пояснения: width: 100px — задает размер малого фото width: 800px — задает размер большого фото возврат к малому фото — уход курсора вне фото

Способ 3 Усовершенствованный аналог Способа 1 — устраняет трудность, которая может возникнуть с возвращением к исходному окну. Благодаря target=»_blank» увеличенный рисунок открывается в новом окне. Закрытие последнего закрывает рисунок, но не закрывает сайт. Иначе из-за неопытности пользователя может возникнуть следующая ситуация: открыв страницу с картинкой, он не знает, как вернутся назад и поэтому просто закрывает вкладку, а значит полностью покидает сайт. &lta target=»_blank» href=»31.jpg»&gt &ltimg width=»100″ height=»70″ src=»http://data5r.narod.ru/31.jpg»&gt&lt/a&gt

Способ 4 При наведении курсора — увеличение, при уводе курсора — возврат к исходному размеру. Увеличение до ЛЮБОГО размера. С помощью width задаются размеры: исходный рисунок, увеличенный рисунок и рисунок после ухода курсора. &ltimg src=»http://data5r.narod.ru/31big.jpg» width=100 onmouseover=»this.style.width=600″ onmouseout=»this.style.width=100″&gt

Увеличение за счет чистого стиля

Способ 5 Простейший переход от малого размера к ЛЮБОМУ размеру за счет стиля. Увеличение изображения — щелчок по фото. Возврат — щелчок вне фото. Кодировка &ltstyle&gt #img #img:focus &lt/style&gt &lt/head&gt &ltbody&gt &ltimg src=»http://data5r.narod.ru/31.jpg» tabindex=»1″&gt Пояснения. Здесь width задает размер исходного и увеличенного изображения. Обозначение «:focus» позволяет менять стиль элемента в зависимости от действий пользователя. Свойство focus активизируется при щелчке мыши. Для возврата к исходному размеру нужно щелкнуть вне изображения. Изображению присваивается идентификатор («img»), которому в стиле задаются определенные свойства (после знака #img).

Способ 6 Еще один простейший переход от малого размера к ЛЮБОМУ размеру с использование стиля. При наведении курсора — увеличение, при уводе курсора — возврат к исходному размеру. Аналог способа 4. &ltstyle&gt #big #big:hover &lt/style&gt &ltimg src=»http://data5r.narod.ru/31.jpg»&gt Пояснения. Здесь width задает размер исходного и увеличенного изображения. Обозначение «:hover» позволяет менять стиль элемента в зависимости от действий пользователя. Свойство hover активизируется в том случае, если на элемент наведен курсор мыши. Приведем еще один простейший способ переход от малого размера к ЛЮБОМУ размеру с использование стиля. Клик — увеличение размера, другой клик — возврат к исходному размеру.

Увеличение за счет чистого JavaScript

Способ 7 Можно произвести увеличение размера, используя только JavaScript.

Комбинация простых способов В этом способе первое увеличение происходит при наведении курсора, второе по щелчку. Возврат к исходному размеру — увод курсора с изображения. Если второе изображение очень большое и появляются ползунки, то воспользоваться последними для перемещения изображения невозможно. Как только курсор соскользнет с изображения, последнее возвращается к исходному размеру. Приводим скрипт. &ltp align=center&gt&ltimg src=’Karta-5.jpg’ width=130 onMouseover=’this.style.width=900′ onclick=’this.style.width=1500′ onMouseout=’this.style.width=130’&gt

С помощью тернарного оператора Этот способ позволяет 3 раза увеличивать размер изображения, последовательно кликая на фото 3 раза. На четвертом клике происходит возврат к исходному размеру. О сути тернарного оператора и его работе было сказано выше в разделе «Увеличение за счет чистого стиля». &ltstyle&gt .f img < width:100px; >.g img < width:300px; >.h img < width:500px; >.j img < width:700px; >&lt/style&gt &ltbody&gt &ltdiv onclick=»this.className =(this.className == ‘f’ ? ‘g’: this.className == ‘g’ ? ‘h’ : this.className == ‘h’ ? ‘j’: ‘f’)»&gt&ltimg src=’18.jpg’ &gt&lt/div&gt&lt/div&gt

.text1a &lt/style&gt &ltbody&gt &ltdiv &gtщелкни&lt/div&gt &ltdiv&gt&ltimg src=’18.jpg’ tabindex=»0″&gt&ltdiv tabindex=»0″&gtТекст поверх фото&lt/div&gt При щелчке по фото размер изображения увеличивается, при повторном клике вне поля картинки — размер возвращается к исходному.

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

UPD от 04.05.2016 Если у вас нет желания разбираться с кодом, то приглашаю к тестированию моего плагина LightZoom!

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

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

В прошлом примере изображение выводилось в скрытый <div> , который был отцентрирован на странице с помощью css. Сейчас логика будет та же, но реализация совсем другая:

1. изображения, которые мы хотим увеличить, должны иметь класс minimized;
2. при клике по изображению, перед закрывающимся тегом </body> будет добавляться <div> с классом magnify в который будет выводится наша картинка и центрироваться на странице и <div> с классом overlay , затемняющий фон
3. при клике по кнопке закрытия или затемняющему фону, увеличенное изображение надо закрыть, а добавленные элементы удалить

Начнем. Сначала выведем изображение:

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