Любой материал на сайте воспринимается гораздо лучше, если он снабжен графикой. Это могут быть различные фотографии, рисунки, чертежи и т.д. Но из-за нехватки свободного места на web-страницах далеко не всегда получается разместить полномасштабные графические изображения.
И здесь нам на помощь придет скрипт из библиотеки jQuery, который позволяет увеличивать графические изображения. Пример работы скрипта Вы видите ниже:
При наведении курсора на картинку, она плавно трансформируется в размерах по ширине и высоте (увеличивается), а затем, когда убираем курсор, также плавно уменьшается до заданного значения. При этом содержание web-страницы не смещается и не деформируется, как это это было в одном из прошлых уроков, когда мы использовали для увеличения изображения JavaScript.
Теперь давайте разбираться как практически реализовать подобный эффект. Скачайте Архив с исходниками скрипта. В архиве вы найдете: сокращенную версию библиотеки jQuery (файл jquery-1.6.2.min.js), файл таблицы стилей (kvn.css) и графическое изображение файл (kvn.jpg). По умолчанию и в Листингах (ниже) все эти файлы лежат в корневой папке сайта, но если Вы поместите файлы в другие места или папки, то обязательно правильно пропишите путь до этих файлов.
Между тегами <head> и </head> прописываем код Листинга 1:
Здесь цифровые значения: 200 и 145, определяют размер миниатюры (ширину и высоту). Эти значения можете изменить под нужные Вам размеры.
Если у Вас на сайте уже есть таблица стилей, то код из Листинга 2 можно просто добавить в уже существующую таблицу стилей и не создавать отдельную таблицу стилей.
В том месте web-страницы, где Вы хотите вывести миниатюру картинки, прописываете код Листинга 3:
<a class="st" href="javascript:">
<div class="img"><img src="kvn.jpg" alt="" hspace="20" vspace="0" title="Команда КВН г. Смоленска: Триод и Диод" /></div>
</a>
Цифры: 550 и 400 указывают на реальные размеры графического файла-картинки (у меня данное изображение имеет размеры: 550х400 пикселей). У Вас могут быть свои значения.
Цифры: 200 и 145 указывают на размеры миниатюры (у меня 200х145 пикселей). У Вас могут быть свои значения.
Цифра 450 в коде влияет на скорость раскрытия картинки до полномасштабного размера и свертывания к миниатюре. Эту цифру Вы также можете изменить на свое усмотрение.
В примере использован графический файл kvn.jpg, этот файл Вы конечно же замените на свою картинку.
Вот собстевенно и все, теперь осталось только закачать все файлы, с которыми Вы работали на сервер.
Андрей, спасибо за информацию. Вопрос: почему в уменьшенном виде фото выходит за край листа, когда курсор переводится на текст ниже?
Комментарии добавил(а): Ахмад Дата: 2012-07-10
Андрей спасибо Вам! С уважением к Вам Ахмад. Мне очень понравился этот скрипт и думаю воспользуюсь этим скриптом. Мне понадобился скрипт аккардион на сайте http://jquery.com как сказано там я создал, а скачал совсем не то. Как создать скрипт аккардион? Ахмад.
Комментарии добавил(а): Прохожий Дата: 2012-07-09
Глючить картинка при повороте указателя мыши влево - очень мелькает неприятно:)
Комментарии добавил(а): Сергей Дата: 2012-07-09
Некорректное увеличение картинки...при возвращении в норму-рвет текст ниже. Смотрю в Опере
Комментарии добавил(а): Александр Дата: 2012-07-09
Доброго времени суток Андрей! Как всегда Вы на высшем уровне!
С уважением Александр.
Комментарии добавил(а): Владимир Дата: 2012-07-09
Скрипт очень полезен миссионерским и паломническим сайтам для демонстрации соборов, церквей и монастырей вместе с их служителями, миссионерами и паломниками. Но нужен ещё урок попроще, для чайника, на пальцах. Например, как фотографию Храма Христа Спасителя из Интернета, вставить в выбранную страницу опубликованного сайта?
Комментарии добавил(а): Alex Дата: 2012-07-12
Спасибо! Нужная вещь - увеличение картинки.
Все доходчиво описано.
С уважением, Erani Alex
Комментарии добавил(а): Игорь Дата: 2012-07-13
Здравствуйте, Андрей! Я не совсем понял относительно листингов. Здесь бы, нам чайникам, попроще. Я скачал архив с исходниками и поместил его в корневую папку. А дальше что? Где эти листинги? Спасибо.
Комментарии добавил(а): Андрей Дата: 2012-07-13
Листинг - это участок кода, какого либо скрипта или программы, который вставляется в код основной web-страницы.
Комментарии добавил(а): Владимир Дата: 2012-09-14
Андрей, спасибо за Ваши уроки - очень познавательные и доступно. Пока вставлял на страницу по одной картинке или все картинки одного соотношения сторон, всё было прекрасно, но потребовалось на одной странице разместить картинки с разным соотношением сторон и все картинки и в миниатюрах и увеличенные получаются "по последней" хотя файл ".css" создаю для каждой отдельно с её параметрами и прописываю путь на тот файл что надо.
Комментарии добавил(а): Буба Дата: 2012-10-31
А как быть, если ширина и высота картинок разная и названия файлов тоже могут быть разные, да еще и произвольные?
Весь интернет перелопатил, ничего нет подобного, ни на javascript, ни на jquery
Комментарии добавил(а): Иван Дата: 2013-04-28
отстойный пример, lightbox круче, использовал, результат паралитический и кривой