Как сделать увеличивающуюся при нажатии картинку

Как сделать увеличивающуюся при нажатии картинку
Как сделать увеличивающуюся при нажатии картинку

Увеличение картинки при нажатии, – в предыдущей статье мы рассмотрели один из способов увеличения картинки на страницах сайта. Картинка увеличивалась при наведении на нее курсором мышки.

Эффект увеличения картинки при наведении, который был рассмотрен в прошлой статье, был реализован с  использованием библиотеки jQuery - jquery.min.js,  и ещё для того, чтобы задействовать библиотеку, в html код страницы был добавлен код Java скрипта, который обрабатывает событие – наведение курсора на картинку. 

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

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

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

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

Увеличение картинки при нажатии на нее кнопкой мышки, будем осуществлять с помощью библиотек jQuery, точно так же, как и в прошлой статье. Но на этот раз, мы будем использовать две библиотеки, одна из библиотек jquery.min.js, нам уже знакома, и еще мы добавим  библиотеку -  jquery.magnifier.js.

Кроме библиотек jQuery, в нашем коде, мы будем использовать изображение magnify.cur.  Это изображение появляется в виде значка плюс (+) перед  картинкой, которую мы будем увеличивать на странице сайта.

 

Увеличение картинки при нажатии на кнопку мышки

- Итак, предположим, что у нас есть html страница. В качестве контента на странице присутствует только текст.

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

- После увеличения картинки, чтобы ее уменьшить, нужно будет нажать на нее еще раз.

Вот такая вот задача. 

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

Шаг 1. Добавим в начало статьи картинку, причем в качестве параметров ширины и высоты картинки зададим уменьшенные значения, пусть ширина картинки  будет равна 180 пикселов, а высота картинки пусть будет равна 140 пикселов.  Реальные размеры  800x600 px картинка приобретет после увеличения.

Картинку добавим с помощью следующего кода:

<img src="images/my_foto.jpg"  hspace="10"  width="180" height="140" border="0" align="left">

Шаг 2. Теперь скопируем в каталог, где находится наша страница три файла  - jquery.min.js,   jquery.magnifier.js и magnify.cur. Это файлы библиотек jQuery и файл изображения курсора в виде знака плюс (+).

Шаг 3. Чтобы подключить библиотеки  jQuery, добавим в контейнер head страницы путь к файлам библиотек:

 

<head>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.magnifier.js"></script>

</head>

 

Шаг 4. Это очень важный момент - для того, чтобы библиотеки jQuery - jquery.min.js и jquery.magnifier.js, заработали,  необходимо в html код вывода картинки на страниц добавить -

класс class="magnify"   и стиль style="width:180px; height:140px"  с которыми данные библиотеки могут работать:

<img src="images/my_foto.jpg" hspace="10" class="magnify"  style="width:180px; height:140px" align="left">

 

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

Скачать архив с  html кодом страницы, библиотеками jQuery  о которой шла речь в данной статье, Вы можете по ссылке:

                                   Скачать архив с примеромувеличение картинки при нажатии.

Автор: Виктор Милованов



Как сделать увеличивающуюся при нажатии картинку

Как сделать увеличивающуюся при нажатии картинку

Как сделать увеличивающуюся при нажатии картинку

Как сделать увеличивающуюся при нажатии картинку

Как сделать увеличивающуюся при нажатии картинку

Как сделать увеличивающуюся при нажатии картинку