Модальные окна с использованием jQuery

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

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

Этот способ хорош тем, что не нужно готовить изображения в двух экземплярах, достаточно подготовить нужные изображения оригинальных размеров. Весь материал находится в одной папке, которую нужно загрузить на сервер, открыть файл index.html и всё! Открытие окон во втором варианте происходит с плавным увеличением размера, что более приятно и красиво. Так же есть возможность размещения контента в «окнах».

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

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

• Итак, Вы скачали архив, распаковали в «текущую» папку modalwindows_1. В этой папке, как я говорил, в отличие от (условно) прежнего варианта сосредоточен весь материал. Открываем в браузере файл index.html, проверяем работу в демо-режиме перед закачкой на сайт;
• Готовим и копируем в папку необходимые изображения одинакового размера. Размеры изображений очень удобно менять в программе Paint.NET, которая есть в арсенале операционной системы;
• Если есть необходимость размещать контент, подготовьте файл content.html по образцу в папке modalwindows_1;
• Кто уже хорошо разбирается в CSS, можно подкорректировать стили в файле style.css;
• Все страницы моего сайта, а так же страницы учебного материала имеют кодировку UTF-8. Если у вашего сайта иная кодировка, есть смысл перекодировать вышеупомянутые страницы учебного материала, чтобы избежать удовольствия от созерцания «кракозябров». Как это сделать смотрите ЗДЕСЬ.

Далее предстоит не менее ответственная задача - разместить части кода из файла index.html по своим местам на вашей странице и добавить свой материал.

Ссылку на файл стилей и скрипты пропишем в head:

<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.gallery").fancybox();
$("a.gallery2").fancybox(
{						
"padding": 2, // отступ контента от краев окна
"imageScale": true, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - true
"zoomOpacity": false,	// изменение прозрачности контента во время анимации (по умолчанию false)
"zoomSpeedIn": 1000,	// скорость анимации в мс при увеличении фото (по умолчанию 0)
"zoomSpeedOut": 1000,	// скорость анимации в мс при уменьшении фото (по умолчанию 0)
"zoomSpeedChange": 1000, // скорость анимации в мс при смене фото (по умолчанию 0)
"frameWidth": 700,	 // ширина окна, px (425px - по умолчанию)
"frameHeight": 600, // высота окна, px(355px - по умолчанию)
"overlayShow": true, // если true затеняет страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay 
"overlayOpacity": 0.8,	 // Прозрачность затенения 	(0.3 по умолчанию)
"hideOnContentClick": true, // Если true  закрывает окно по клику по любой его точке (кроме элементов навигации). По умолчанию true		
"centerOnScroll": true // Если true окно центрируется на экране, когда пользователь прокручивает страницу		
});
});
</script>

В body вашей страницы в нужном месте разместите код из нижних таблиц в зависимости от выбранного варианта (первый, второй или контент, или, если хотите, всё вместе).

Код варианта № 1

<h3>1-й  вариант</h3>
<a class="gallery" rel="group" title="Хищная птица" href="fly.jpg"><img src="fly.jpg" width="180px" height="120px"></a>
<a class="gallery" rel="group" title="Цветок" href="bloom.jpg"><img src="bloom.jpg" width="170px" height="120px"></a>
<a class="gallery" rel="group" title="Водоём" href="see.jpg"><img src="see.jpg" width="180px" height="120px"></a>

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

          Пропись наименований и размеров превью - уменьшенного изображения наших картинок до указанных величин. При нажатии на маленькие картинки они откроются в реальном размере.

Код варианта № 2

<h3>2-й  вариант</h3>
<a class="gallery2" rel="group2" title="Хищная птица" href="fly.jpg"><img src="fly.jpg" width="180px" height="120px"></a>
<a class="gallery2" rel="group2" title="Цветок" href="bloom.jpg"><img src="bloom.jpg" width="170px" height="120px"></a>
<a class="gallery2" rel="group2" title="Водоём" href="see.jpg"><img src="see.jpg" width="180px" height="120px"></a>

          Код варианта № 2 отличается от первого только лишь тем, что отмечено выделением, а именно: gallery2" rel="group2 (просто, подставить цифру 2) и, конечно же, можно проставить другие наименования рисунков.

Код контента

<h3>Название</h3>
<a class="gallery" title="Контент в модальном окне" href="content.html" >Контент в модальном окне</a>

В этом варианте должно быть всё понятно. Ссылке на контент присвоен класс gallery.

          В этом месте нужно вставить HTML-файл с контентом.

Я надеюсь, что материал был Вам понятен и не сложен для усвоения. Благодарю за внимание, до новых встреч! L.M.