|
Как сделать плавное увеличение картинки при клике. Автор: Андрей Краснокутский Дата: 2011-08-06 Кликаем по картинке и она плавно увеличивается в размерах. Одно из новшеств современного веб-дизайна – это применение на сайте модальных окон, наверняка Вы уже неоднократно видели такой эффект: картинка (фотография, изображение, рисунок и т.д.) при клике по ней, открывается в отдельном окне, на затененном фоне. Смотрится очень эффектно. Поэтому и называется такой эффект – модальные окна. Ниже приведен пример использования Модального окна. Кликните по картинке ниже. Реализуется подобный эффект с помощью JavaScript , а точнее с помощью jQuery . Поэтому для правильного отображения модальных окон, в Ваших браузерах обязательно должна быть включена поддержка сценариев "JavaScript" — обязательно это проверьте. В IE JavaScript включается здесь: Сервис / Свойства обозревателя / далее Кнопка: Другой / Выполнять сценарии приложения Java / Включить. Модальное окно для изображения. Для реализации модального окна, нам понадобится изображения одной картинки, но 2-х разных размеров (уменьшенное и большое, то которое будет открыться в модальном окне). О подготовке графических файлов, я уже рассказывал ранее в статье: Как подготовить изображение для сайта. Считаем что эти графические файлы у Вас уже есть. У меня это два разных файла: sait180.jpg и sait600.jpg , размеры этих файлов соответственно: 180×113 и 600×375 пикселей. Размеры взяты примерные и у Вас эти размеры могут отличаться. Картинка взята случайным образом (первая попавшаяся), чисто для примера. Положите эти файлы в папку, в которой у Вас на сайте лежат все изображения на сайте, обычно это папка images или img. Для ясности считаем что это папка images. Теперь скачайте архив со скриптами. После распаковки архива папку с названием "fancybox" скопируйте и положите в «корневую» папку сайта. Открываем HTML-документ, в который мы будем монтировать модальные окна и вставляем между тегами <head> и </head> следующий код Листинг 1: Листинг 1. | <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
<script type="text/javascript" src="fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.first").fancybox();
$("a.two").fancybox();
$("a.video").fancybox({"frameWidth":520,"frameHeight":400});
$("a.content").fancybox({"frameWidth":600,"frameHeight":300});
});
</script> | Хотя этот код не привередлив и его можно прописать и в другом месте web-страницы, работать будет, но всетаки, лучше между <head> и </head>.
Первая строка:
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">— это подключение таблицы стилей CSS, которая лежит в папке "fancybox". Три последующие — это "яваскрипты". Далее идёт скрипт управления элементами, которые мы будем монтировать, а именно: одиночная картинка, группа изображений, видео и контент соответственно. В этом уроке мы научимся делать модальные окна из одной картинки и из группы картинок. А в следующих уроках разберемся как втавлять в модальные окна видео и контент. Поэтому сильно не заморачивайтесь, а вставляйте код Листинга 1 в код web-страницы между <head> и </head> и идем дальше. Опускаемся ниже по коду и в то место web-страницы, где Вы хотите вставить маленькое изображение, при нажатии на которое будет открываться модальное окно, прописываем следующий код Листинг 2. Листинг 2. | <div align="center">
<a class="first" title="Сайт фантазия" href="images/sait600.jpg"><img src="images/sait180.jpg"></a>
</div> | Не забудьте изменить параметры title и прописать путь до своих реальных файлов. Вот собственного говоря и все. Обновляем web-страничку на сервере и радуемся полученным результатам. Еще раз смотрим, что у нас получилось: Конечно картинки здесь будут Ваши. С одиночной картинкой разобрались, теперь разберемся с группой изображений. Модальные окна для нескольких изображений. Давайте сначала посмотрим конечный результат, который у нас должен получиться. Кликайте по изображениям: Процесс подготовки изображений, такой же как и одиночном примере, т.е. каждое изображение должно быть 2-х размеров: маленького формата и большого формата. Все эти изображения тоже ложим в папку images. С подключением Скриптов мы разобрались выше, смотрите Листинг 1. В том месте web-страницы, где Вы хотите вывести группу изображений, вставляем код Листинга 3. Листинг 3. | <div align="center">
<a class="two" rel="group" title="Глубоководные рыбы" href="images/okon600.jpg"><img src="images/okon180.jpg" /></a>
<a class="two" rel="group" title="Пещерные рыбы" href="images/kit600.jpg"><img src="images/kit180.jpg" /></a>
<a class="two" rel="group" title="Чудные рыбы" href="images/som600.jpg"><img src="images/som180.jpg" /></a>
</div> | И вот что получаем в итоге, еще раз смотрим на результат: Согласитесь, симпатично получилось. И как Вы убедились, сделать такие окна совсем не сложно. Кстати в открытых модальных окнах по бокам появляются стрелочки (при наведении мышки) для перехода к следующей картинке. P.S. В Листинге 3 прописано три картинки, но как Вы наверное уже поняли, прописать таких картинок можно сколько угодно, просто добавляя новую строчку кода:
<a class="two" rel="group" title="Первая картинка группы" href="images/moon600.jpg"><img src="images/moon180.jpg" /></a> для каждой новой картинки. И конечно же нужно указать реальный путь до картинки и имя графических файлов. Всего Вам доброго. Читайте так же другие наши материалы. Устанавливаем Флеш часы на сайт. Фоновые изображения для сайта в стиле Мрамор. Как сделать Скриншот (снимок) с экрана монитора нужного размера? Сайт своими руками за 9 часов 45 минут! Как издать (выпустить) собственную электронную книгу? Просмотров: 22629 Комментарии к этой заметке: Комментарии добавил(а): Андрей
Дата: 2011-08-07 А как вам такое представление картинок в мини слайд шоу http://auto-schol.by/Brabus_Mercedes-Benz-E-Class-Cabriolet.html Есть возможность увидеть все картинки в мини, при нажатии на цент картинки появляется в натуральную величину… Комментарии добавил(а): Александр
Дата: 2011-08-07 Как всегда всё на высшем уровне, Вы Андрей настоящий кландайк знания! С уважением Александр. Комментарии добавил(а): Олег Гузь
Дата: 2011-08-07 Здорово, Андрей! Мне понравилось! Комментарии добавил(а): Нина
Дата: 2011-08-08 Здавсвуйте.Не знаю чл получися у меня, но у вас на сайте при нажатии на картинку которую вы приводите в качестве примера ничего не происходит,кроме того что темнеет экран манитора и комп зависает Комментарии добавил(а): Александр
Дата: 2011-08-08 Все отлично. Буду пробовать вставлять свои картинки. Комментарии добавил(а): Антон
Дата: 2011-08-09 Здорово, у меня все классно работает, спасибо Андрей большой вам респект и успехов Комментарии добавил(а): Нина
Дата: 2011-08-09 Отличая галерея для браузеров опера и фиркфокс-всё как по маслу. Но я проверила через IE-6 IE-7 и Vistu.В них этот скрипт не рабоет.Я в инет всегда выхожу через IE-7, так сразу видно у кого какое качество сайта,и вижу на некоторых сайтах более сложные галереи. Комментарии добавил(а): Нина
Дата: 2011-08-09 Как бы сделать такую галерею, как здесь http://www.zecho.ru/ да что бы она работала во всех браузерах? Комментарии добавил(а): АндрейК
Дата: 2011-08-10 Нина Вы путаете, это не скрипт галереи, а скрипт модальных окон. Это абсолютно разные вещи и выполняют они разные задачи. И конечно же реализуются тоже по разному. Комментарии добавил(а): Вячеслав
Дата: 2011-08-15 Спасибо, Андрей! Есть вопрос: изменение фона картинки не здесь ли Папка: fancybox -> Файл: jquery.fancybox.css -> Строка: background-color: #666; Комментарии добавил(а): mery
Дата: 2011-08-15 Супер, работает без проблем. Спасибо за предоставленное готовое решение! Всех благ автору! Комментарии добавил(а): Инга
Дата: 2011-08-19 Подскажите, плиз, а какой параметр затемняет экран, хочется немного темнее сделать фон за модальным окном. Комментарии добавил(а): TigerBUK
Дата: 2011-09-13 Приветствую!
Всё чётко и понятно.
Ты анонсировал что расскажешь как вставить ВИДЕО в такое вот окошко. Очень хотелось бы посмотреть! Комментарии добавил(а): Роман
Дата: 2011-10-04 Андрей, спасибо огромное за хороший урок. но у меня вопрос. все картинки работают, но мне надо как то поменять код, что бы изначально картинки были не в центре экрана, а на тех заранее запланированных мной местах, куда я их расставил. как это можно сделать? Комментарии добавил(а): Роман
Дата: 2011-10-04 прошу прощения за беспокойство. все, разобрался что к чему. огромное спасибо еще раз. Комментарии добавил(а): Вячеслав
Дата: 2011-10-09 Великолепно!!! Комментарии добавил(а): qwinmen
Дата: 2011-10-12 Спасибо. Комментарии добавил(а): Юрий
Дата: 2011-10-18 Доброго времени суток. Ситуация такая: мне необходимо сделать, чтобы увеличенная картинка приобретала свои истинные размеры, а не вписывалась по высоте экрана. Как это сделать? Комментарии добавил(а): NextIM
Дата: 2011-11-16 как увеличивать картинки не прописывая их в коде? картинка загружается пользователем в папку через сайт и эта картинка должна увеличиваться… Комментарии добавил(а): Максим
Дата: 2011-11-25 Автору кода респект. отлично . и понятно без глюков Комментарии добавил(а): АндрейК
Дата: 2011-11-25 Максим я согласен с Вами, авторам большой респект, но я не автор, а всего лишь рассказываю на доступном языке как использовать библиотеку jQuery. А про Авторов здесь: http://www.luksweb.ru/view_post.php?id=274 Комментарии добавил(а): Александр
Дата: 2011-11-26 Андрей, ну что я могу сказать:) Респект и уважуха! Все работает отлично. Комментарии добавил(а): Дмитрий
Дата: 2011-12-02 Спасибо вам огромное!) очень выручили, все отлично работает Комментарии добавил(а): Евгений
Дата: 2011-12-12 Похоже я тупее всех… знаю 3 прекрасные кнопки "Сtrl+C" и "Сtrl+V". Пользуюсь ими в совершенстве…
При нажатии на маленькую картинку, экран темнеет появляется маленькое окошко, а в нем вместо большой картинки высвечивается опять мой сайт.
Если ввести адреса картинок в браузере, они открываются. Комментарии добавил(а): Юрий
Дата: 2011-12-13 Вопрос. Почему в IE не рабботает? Всплывающее окно просто белое — картинки нет. Комментарии добавил(а): АндрейК
Дата: 2011-12-13 Работает во всех браузерах, и в IE тоже, скорее всего Вы где то допустили ошибку Комментарии добавил(а): Ирина
Дата: 2012-01-09 я сделала, как у Вас написано, но у меня ничего не получается. Картинка открывается в в этом же окне и во весь экран и не перелистывает Комментарии добавил(а): Алена
Дата: 2012-01-11 У меня картинки открываются в том же фрейме, только в новом окне.. А как в Вашем примере — не выходит.. Что не так?? Комментарии добавил(а): Федор
Дата: 2012-02-05 Крутотень класная, пять минут разобраться. Хорошо что скрипты писать не надо. Для новичков — таких как я самое то!!! Комментарии добавил(а): Александр
Дата: 2012-02-09 подскажите пожалуйста , почему картинка закрывается при нажатии на любое место??? и где найти урок про видео? Комментарии добавил(а): Наталья
Дата: 2012-01-27 Огромное спасибо за скрипт!! Искала-искала, а тут все так понятно и просто! Еще раз спасибо. Комментарии добавил(а): Наталья
Дата: 2012-01-27 "Вопрос. Почему в IE не рабботает? Всплывающее окно просто белое — картинки нет."
Такая же фигня была. Нужно включить все что относиться к Java и еще нажать кнопочку, которая находиться справа в строке поиска и выглядит как разорванный лист. После этого все заработало. Комментарии добавил(а): Юрий
Дата: 2012-03-13 Спасибо, все работает отлично, вопрос только один, почему когда я применяю этот урок "Как сделать плавное увеличение картинки при клике" и ваш урок "Галерея изображений с плавно меняющимися картинками" на одной странице сайта плавное увеличение картинки не получается, работает нормально только "Плавно меняющиеся картинки", не получается, чтоб работало все? Комментарии добавил(а): Ольга
Дата: 2012-03-26 Спасибо за чудесный скрипт, только я столкнулась с небольшой проблемой, помогите, пожалуйста, ее решить. Сделала групповые картинки (штук 6), локально все работает, но на сайте первые 2 не открываются (крутится загрузка и все), а начиная с 3-ей все нормально. Как это исправить 🙁 Комментарии добавил(а): АндрейК
Дата: 2012-03-26 Ольга, скорее всего у Вас проблема с указанем места где лежат картинки, т.е. проверьте путь до графических файлов, имена файлов, регистры написания (верхний/нижний). Комментарии добавил(а): Ольга
Дата: 2012-03-27 АндрейК, спасибо, что так быстро откликнулись) Путь и имена файлов прописаны правильно… Эти картинки у меня в таблице, т.е. таблица из 4-х колонок, в первой ячейке фотка, во второй описание, в третей фотка, в четвертой описание. Так вот, эти две фотки и не отображаются, а дальше уже нормально. Может это быть из-за таблицы? Комментарии добавил(а): Ксения
Дата: 2012-04-08 СУУУУУПЕР!!! Мне оч понравилось. просто класс!!! Комментарии добавил(а): Ярослав
Дата: 2012-04-09 Спасибо. Все очень доступно описано. У меня благодаря вам все получилось. Еще рас спасибо. Комментарии добавил(а): rakegent@mail.ru
Дата: 2012-05-26 блин не разобрался, Комментарии добавил(а): Дмитрий
Дата: 2012-06-17 Ваш материал рулит! Информативно, классно, доступно, а главное — эффективно.
+ Комментарии добавил(а): Сергей
Дата: 2012-06-20 Спасибо огромное, для меня это первый "скрип", но нужна помощь! На станичнике разместил несколько "Модальных окон" в разных таблицах, с разным направлении и смыслом в фотографиях по 3шт. При просмотре просматриваются не только нужные 3 фотки, но и все остальные с других "Модальных окон". Комментарии добавил(а): Татьяна
Дата: 2012-06-20 Спасибо,всё получилось, только почему-то нет стрелочки,которая листает на следующее изображение… Комментарии добавил(а): Татьяна
Дата: 2012-06-22 А,простите,это я не так сделала: у меня каждая картинка лежит в отдельной ячейке, поэтому и стрелочки не было. Если сделать без таблицы — всё чудесно работает. Спасибо!!! Комментарии добавил(а): Владимир
Дата: 2012-07-07 Все супер, автору респект, благодаря таким людям, как Вы хочется двигаться дальше в познаниях неизвестного, спасибо! Комментарии добавил(а): 111
Дата: 2012-07-19 спасибо! все получилось только в IE не получается экран становится серым и все(((( не подскажете почему Комментарии добавил(а): генадий
Дата: 2012-07-31 можно ли чтоб на увеличенной картинки вставить текст? Комментарии добавил(а): АндрейК
Дата: 2012-08-01 Генадий, конкретно в этом скрипте вставить текст поверх картинки нельзя. Но кто Вам мешает нанести текст например в фотошопе на увеличенную картинку и получите тот же эффект. Комментарии добавил(а): Дмитрий
Дата: 2012-11-19 А подскажите, почему не отображаются эл-ты навигации на увеличенной картинке(закрыть, пред, след) и тайтл без рамки и фона ? Комментарии добавил(а): DocSK
Дата: 2012-08-15 Проверьте автоопределение кодировки в chrome. Еще плохо читается листинг кода Комментарии добавил(а): Роман
Дата: 2012-09-03 Подскажите почему может не отображаться title картинок при открытии, css такой же, только вот javascript подключаю на странице где эти картинке (не между head, а в body) Комментарии добавил(а): Тема
Дата: 2012-09-27 А на укоз то пойдет? поставил и не работает открывается картинка сама((
Может что не так с путями внутри архива? Комментарии добавил(а): Тимур
Дата: 2012-10-01 АндрейК подскажите пожалуйста решение проблемы.Увеличенная картинка открывается не в модальном окне,а на всю страницу,без перехода к другим картинкам,заранее спасибо! Комментарии добавил(а): АндрейК
Дата: 2012-10-02 Тимур, заочно трудно диагностировать проблему, тем более имея так мало информации, но одно могу сказать точно: Вы где то допустили ошибку. Обратите внимание на синтаксис, правильные пути и наличие всех файлов скрипта. Комментарии добавил(а): Владимир
Дата: 2012-10-16 Андрей, просто большое спасибо, выставил в инет — все замечательно работает! По Вашим пояснениям все доходчиво понятно, даже мне пенсионеру на седьмом десятке, приходится тащить сайт организации. С уважением Владимир. Комментарии добавил(а): АндрейК
Дата: 2012-10-12 Владимир, ошибка скорее всего в пути до большой картинки, заочно точнее сказать трудно, но Вы где-то ошиблись. Комментарии добавил(а): Владимир
Дата: 2012-10-12 при клике на маленькую картинку выплывает пустое большое окно без картинки. В чем проблема??? Пока файлы не выставлял в инет. Комментарии добавил(а): Елена
Дата: 2012-10-13 Андрей, спасибо большое за скрипт. Всё работает. Подскажите есть ли тот следующий урок, в котором Вы обещали рассказать как вставлять в модальные окна видео и контент? Комментарии добавил(а): Вальдемар
Дата: 2012-11-01 К сожалению, те файлы которые Вы (автор) выложили, они не работают в IE 8.0 (отображается пустое окно, без картинки). Все пути к файлам проверены и мало того, тот же скрипт работает во всех других браузерах и там отображает картинку.
Я проверил 4 популярных браузера, и только в IE 8.0 такая проблема. Но самое интересное, что пример который показан в начале этой статьи, работает. Она отображается и в IE 8.0
Автор, подскажите, в чем проблема, или выложите, пожалуйста, рабочие файлы. Комментарии добавил(а): АндрейК
Дата: 2012-11-01 Вальдемар. Скрипт и все файлы выложенные выше полностью рабочие, причем абсолютно во всех браузерах, в том числе и в IE8.0. Если у вас что то не получается ознакомтесь с информацией здесь: http://www.luksweb.ru/view_post.php?id=335 Комментарии добавил(а): Вальдемар
Дата: 2012-11-02 Знаете, я бы с радостью с Вами согласился. Да вот беда.
Я выложил Ваши файлы (урок) полностью на чистый ФТП и домен сайта и запустил в разных браузерах. И во всех браузерах картинка увеличенная отображается, а вот в IE 8.0 — нет. Можете и сами в єтом убедиться — http://free.selcet.com.ua/ Комментарии добавил(а): АндрейК
Дата: 2012-11-02 Вальдемар. Посмотрел в браузере IE8, версия 8.0.6001.18702. Все работает замечательно, кроме кодировки, но это не относится к работе скрипта. А соглашаться или нет со мной — это ваше полное право. Комментарии добавил(а): Надежда
Дата: 2012-11-06 Просто супер. Редко встречаешь, когда все понятно, и главное работает))) Комментарии добавил(а): Ольга
Дата: 2012-11-14 Большое спасибо за урок! в IE 8.0 всё работает, подтверждаю.
Андрей, не подскажете, а можно сделать так, что бы стрелка для переключения след. картинки всегда отражалась бы на картинке, а не только когда на нее наведена мышка?
Заранее спасибо! Комментарии добавил(а): Людмила
Дата: 2012-12-01 Спасибо! Все работает!
Поддерживаю Ольгу, неплохо былобы чтобы стрелка для переключения всегда отображалась.
как это сделать?
puf593@gmail.com
Спасибо! Комментарии добавил(а): Борис
Дата: 2012-12-07 Прикольно. Спасибо у меня все вышло здорово. Комментарии добавил(а): Олег
Дата: 2012-12-09 Большое спасибо! Работает безупречно! Давно хотел такой эффект, благодаря Вам получилось! Браво!!! Комментарии добавил(а): Виктор
Дата: 2012-12-15 Спасибо за скрипт, всё работает, долго искал похожее, но вот есть проблема, почему то картинка открывается в окне, а не так как у вас, поверх окна. Комментарии добавил(а): Виктор
Дата: 2012-12-15 Всё получилось, пропустил скобку > Комментарии добавил(а): Виктор
Дата: 2012-12-26 Подскажите, где ошибся. Картинки открываются не в всплывающем окне, а на отдельной странице. Комментарии добавил(а): Алексей
Дата: 2013-01-06 Такая же проблема. Открываются в отдельном окне, а не во всплывающем. Вроде все делаю правильно, а не помогает. Несколько скриптов пробовал, но проблема остается. Получается javascript не работает, что ли.. В чем проблема, кто подскажет? Комментарии добавил(а): Алекс
Дата: 2013-01-06 Большое спасибо. Все просто и понятно!!!! Комментарии добавил(а): Виктор
Дата: 2013-01-10 Листинг не вставляется в шаблон, cms ругается Добавить Ваш комментарий: Ваше имя: Текст комментария:
Введите сумму чисел с картинки:
| 
