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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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