Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Главная

Рассылка

Магазин

Видео Курсы

Секрет

Услуги

Сегодня: Добавить в Избранное Написать Автору Обмен валют Оплата сервисов

Плавное увеличение изображения при помощи jQuery.

Автор: Андрей Краснокутский

Дата: 2012-07-09

Плавное увеличение картинки с помощью jQuery.

Любой материал на сайте воспринимается гораздо лучше, если он снабжен графикой. Это могут быть различные фотографии, рисунки, чертежи и т.д. Но из-за нехватки свободного места на web-страницах далеко не всегда получается разместить полномасштабные графические изображения.

И здесь нам на помощь придет скрипт из библиотеки jQuery, который позволяет увеличивать графические изображения. Пример работы скрипта Вы видите ниже:

Команда КВН г. Смоленска: Триод и Диод

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

Теперь давайте разбираться как практически реализовать подобный эффект. Скачайте Архив с исходниками скрипта. В архиве вы найдете: сокращенную версию библиотеки jQuery (файл jquery-1.6.2.min.js), файл таблицы стилей (kvn.css) и графическое изображение файл (kvn.jpg). По умолчанию и в Листингах (ниже) все эти файлы лежат в корневой папке сайта, но если Вы поместите файлы в другие места или папки, то обязательно правильно пропишите путь до этих файлов.

Между тегами <head> и </head> прописываем код Листинга 1:

Листинг 1.

<link href="kvn.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

Первой строкой кода мы подключаем к нашей web-странице таблицу стилей: файл kvn.css.

Второй строкой кода мы подключаем к нашей web-странице библиотеку jquery.

Создаем файл таблицы стилей kvn.css и прописываем в нем код Листинга 2:

Листинг 2.

a.st .img{width:200px;height:145px;}
a.st .img img{width:200px;height:145px;}
a.st:hover .img{width:200px;height:145px;overflow:visible;visibility:hidden;}
a.st:hover .img img{visibility:visible;position:absolute;z-index:1;}

Здесь цифровые значения: 200 и 145, определяют размер миниатюры (ширину и высоту). Эти значения можете изменить под нужные Вам размеры.

Если у Вас на сайте уже есть таблица стилей, то код из Листинга 2 можно просто добавить в уже существующую таблицу стилей и не создавать отдельную таблицу стилей.

В том месте web-страницы, где Вы хотите вывести миниатюру картинки, прописываете код Листинга 3:

Листинг 3.

<script type="text/javascript">
$(function(){
$('.img').hover(function(){
$(this).children('img').stop().animate({width:"550px",height:"400px"}, 450);
}, function(){ $(this).children('img').stop().animate({width:"200px",height:"145px"}, 450); });
});
</script>

<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, этот файл Вы конечно же замените на свою картинку.

Вот собстевенно и все, теперь осталось только закачать все файлы, с которыми Вы работали на сервер.

Всего Вам доброго.

Читайте так же:

Как создать в Интернете свой Информационный Бизнес.

Как создать эффект скругления углов изображения с помощью JavaScript.

Почтовая Рассылка - Главный инструмент Интернет-Бизнесмена.

Как сделать электронную книгу в EXE формате. Практическое руководство.

Электронная платежная система: WebMoney. Практическое руководство.

Просмотров: 12775

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Комментарии добавил(а): Ирина
Дата: 2012-07-09

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

Комментарии добавил(а): Ахмад
Дата: 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 круче, использовал, результат паралитический и кривой

Комментарии добавил(а): Антон
Дата: 2015-01-16

Спасибо

Добавить Ваш комментарий:

Разработка полного пакета документов по Охране труда под "КЛЮЧ"
с учетом специфики работы вашей организации. СУОТ.
Дистанционное сопровождение организаций по Охране труда.
Проведение Специальной оценки условий труда (СОУТ).

Новости сайта

12.05.2015
Новая услуга! Изготовление графических элементов. Заказать: иллюстрации для книг, коллажи, подарочные и поздравительные открытки, 3D обложки, фантастические и сюрреалистические работы, зарисовки, баннеры и еще много, многое другое, быстро и дешево.

05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"

Реклама в Почтовых Рассылках.

Почтовая рассылка

Новинка!

Как реально заработать
в Интернете?

"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense

Навигация

Уроки HTML

Инструменты

Шаблоны сайтов

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

Почтовая Рассылка

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я

С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>

Хотите заработать?
2-х Уровневая
Партнерская программа!
Присоединяйтесь.

Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT

Принимаем Z-PAYMENT

www.megastock.ru

HTML | CSS | Статьи | Инструменты | Шаблоны | Книги | Украшения | Сайт | Заработок | Обман
PHP | Услуги | Скрипты | Рассылка | SEO | jQuery | СОУТ | Online | Секрет| Написать Автору

Разрешается полное или частичное копирование материалов сайта с обязательным
указанием ссылки на автора материала и источник - www.LuksWeb.ru

Copyright Андрей Краснокутский © 2008 - 2018