Loading





Форекс с Альпари

eTXT




Анкетка


Использование модальных окон на сайте

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

Понять, что представляют из себя модальные окна лучше на визуальном примере ЗДЕСЬ.


1. Подготовка материала

  • Для правильного отображения модальных окон необходимо проверить включение поддержки сценариев JavaScript в используемом вами браузере.
  • Эффект может не работать на бесплатных хостингах с минимальным набором предоставляемых услуг!

В зависимости от того, что Вы желаете разместить в модальных окнах, необходимо подготовить либо картинки или фотографии, либо видеоролик, либо текст. Изображения необходимо иметь в двух вариантах, большого и малого размеров. Это Вы поняли, посмотрев пример размещения окон. В образце, например, малые изображения имеют ширину 180px., а большие, соответственно, 600px. Размеры в дальнейшем можно изменять, кому как нравится. Изменить размеры изображений можно с помощью специальных программ, но проще всего это сделать в программе Adobe Photoshop или Paint.net:

  1. Запустить программу (графический редактор);
  2. Открыть необходимое изображение командой: Файл → Открыть. В появившемся окне выбрать изображение;
  3. В верхнем меню программы открыть вкладку Изображение → Размер изображения;
  4. В открывшемся окошке установить необходимую ширину изображения (высота установится автоматически). Нажать ОК;
  5. Сохранить изображение с новыми размерами.

Видеоролики можно вставлять как свои, используя для этой цели программы, например Microsoft Office SharePoint Designer 2007, Adobe Dreamweaver, сервисы, о которых рассказано на этой странице, так и из СЕТИ, просто скопировав КОД.

Для размещения текста (контента) в модальном окне необходимо вначале подготовить отдельный HTML-файл с необходимым текстовым материалом, картинками и прочим по желанию.

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

Если у Вас пока нет своего материала, скачайте архив с файлами, которые также будут необходимы в нашем дальнейшем обучении:

Исходники (356 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Распакуйте архив в отдельную папку. Открыв эту папку с названием modalwindows Вы увидите папки code, fancybox, images.

В папке code содержатся шаблоны для вставки текста, видео и изображений. Папка fancybox содержит все ява-скрипты, картинки и таблицу стилей, а папка images тестовые изображения в двух вариантах, как говорилось ранее. Файл index.html - это полностью готовый файл, открыв который в браузере, Вы сможете увидеть все варианты окон в работе. Ну и файл content.html - это тот файл с контентом, о котором говорилось ранее.

При просмотре в различных браузерах возможны некоторые несовпадения и неправильное отображение, как, например, размер окна под видеоролик, а также проблемы с отображением текста (контента) в окне. Возможно отображение текста в «кракозябрах» в браузере при просмотре на компьютере и правильное отображение при закачке на сервер. Я думаю, что эти неприятности происходят из-за наличия разных кодировок и неправильных перекодировок. С файлами изображений ещё нормально, а вот с текстом есть некоторые заморочки. Если что не будет получаться с контентом попробуйте самостоятельно поэкспериментировать.

На этом подготовка рабочего материала закончена.

2. Подключение элементов к сайту

Папку fancybox копируем в «корневую» папку сайта. Содержимое папки images копируем в папку с изображениями, обычно она так же называется images.

Открываем HTML-документ, в который мы будем монтировать модальные окна и вставляем между тегами head следующий код:


<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>

Разные элементы выделены отдельными цветами. Первая строка - это подключение таблицы стилей.
Три последующие - это ява-скрипты.
Далее идёт скрипт управления элементами, которые мы будем монтировать, а именно: одиночная картинка, группа изображений, видео и контент соответственно.
Всё это хорошо видно на рисунке кода.

В случае, если Вы не планируете работать со вставкой видео в «окно», участок кода
$("a.video").fancybox({"frameWidth":520,"frameHeight":400}); не пишите, и, соответственно, когда не возникает необходимость размещения контента, опускаем часть кода для его старта, а именно
$("a.content").fancybox({"frameWidth":600,"frameHeight":300});.

Я намеренно упростил задачу, предоставив полный набор необходимых элементов кода, чтобы было легче, удобнее и быстрее работать. Просто нужно вставить этот код между тегами head и особо не заморачиваться на деталях, но некоторые из них всё же мы рассмотрим, но немножко позже.

Одиночное изображение в модальном окне

В то место на странице вашего сайта между тегами body, где Вы желали бы видеть маленькую картинку, которая при нажатии будет открываться в модальном окне, вставляем следующий код:


<a class="first" title="Цветы на фоне неба" href="images/flower600.jpg"><img src="images/flower180.jpg" border="0"></a>

Выделенный текст (названия и файлы изображений) заменяем своим.

Вот что у нас получилось:

Цветы на фоне неба

Замечательно! С одиночной картинкой справились. Идём дальше...


Серия изображений

Для показа нескольких изображений в модальных окнах используем этот код:


<a class="two" rel="group" title="Первая картинка группы" href="images/moon600.jpg"><img src="images/moon180.jpg" border="0"></a>
<a class="two" rel="group" title="Вторая картинка группы" href="images/shell600.jpg"><img src="images/shell180.jpg" border="0"></a>
<a class="two" rel="group" title="Третья картинка группы" href="images/sun600.jpg"><img src="images/sun180.jpg" border="0"></a>

Копируем этот код, вставляем точно также, как и в первом варианте. И вот что получаем в итоге:

Первая картинка группы Вторая картинка группы Третья картинка группы

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




Параметры при вызове fancybox

Сейчас рассмотрим некоторые параметры, которые влияют на внешний вид и поведение при открытии модальных окон.

В html-коде, который нужно вставлять в раздел head вместо участка кода:

	
$("a.first").fancybox(); 
$("a.two").fancybox(); 

вставим следующий код, присвоив класс, например, gallery тегу <a>:

$("a.gallery").fancybox( 
{						
"padding" : 20,
"imageScale" : true, 
"zoomOpacity" : false,
"zoomSpeedIn" : 0,	
"zoomSpeedOut" : 0,	
"zoomSpeedChange" : 0, 
"frameWidth" : 600,	 
"frameHeight" : 450, 
"overlayShow" : true, 
"overlayOpacity" : 0.5,	
"hideOnContentClick" :true,
"centerOnScroll" : false
}
);

Практически, получается, что код, выделенный зеленым цветом, нужно вставить между скобками (). Не забудьте поменять класс (first или two) на gallery в разделе body.

Что может меняться при вставке этого кода?

  • padding - отступ изображений от краев окна;
  • imageScale - если установлено значение true - изображение масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - true;
  • zoomOpacity - изменение прозрачности контента во время анимации (по умолчанию false);
  • zoomSpeedIn - скорость анимации в мс при увеличении фото (по умолчанию 0);
  • zoomSpeedOut - скорость анимации в мс при уменьшении фото (по умолчанию 0);
  • zoomSpeedChange - скорость анимации в мс при смене фото (по умолчанию 0);
  • frameWidth - ширина окна, px (425px - по умолчанию);
  • frameHeight - высота окна, px (355px - по умолчанию);
  • overlayShow - если true, то затенят страницу под всплывающим окном. Цвет задается в jquery.fancybox.css - div#fancy_overlay (по умолчанию true);
  • overlayOpacity - прозрачность затемнения (0.3 по умолчанию);
  • hideOnContentClick - при значении true закрывает окно по клику по любой его точке (кроме элементов навигации). По умолчанию true;
  • centerOnScroll - когда установлено true, то окно центрируется на экране, когда пользователь прокручивает страницу.



3. Видеоролик в модальном окне

    

<a class="video" href="#testube">Посмотрите этот видеоролик</a>
  <div style="display: none" id="testube">
   HTML-код ролика
   </div>

   

И как прежде, выделенное маркером - это переменные составляющие.

Результат смотрим в демо-примере.

В архиве, который вы скачали ранее есть папка parameters.txt, в которой представлены различные настройки для строки
$("a.video").fancybox({"frameWidth":560,"frameHeight":340}); Она у нас вверху, помните? Можно эти настройки менять, но, я думаю, что двух основных, а именно, ширина и высота вполне хватит.

Когда Вы будете просматривать результаты своей работы на разных браузерах, увидите, что на Opera, Mozilla, Safari и Хроме размеры видеоролика и модального окна совпадают, при условии выставления оригинальных размеров, а вот в замечательном IE дело обстоит не так хорошо. Там, почему-то, ролик никак не вписывается в окно. Но, как говорится, «четверо против одного», поэтому я в настройках выставляю размеры заявленные в ролике.


4. Текст в модальном окне

Ну и наконец рассмотрим размещение контента в наших окнах. Если по какой-либо причине вы желаете, чтобы текст открывался в отдельном окне на затемнённом фоне основной страницы, вставляйте в нужное место этот код:


<a class="content" href="content.html">Пример размещения контента в модальном окне</a>

content.html - это, как говорилось ранее, самостоятельный, заблаговременно подготовленный HTML-файл, который загружается на ваш сайт, а ссылку на него прописываете в данном коде. Файл изображения, который желаете приобщить к тексту также нужно загрузить в папку images.

Получается следующее:

Пример размещения контента в модальном окне

Размер окна регулируем в строке
$("a.content").fancybox({"frameWidth": 600,"frameHeight": 300});

Вот и всё. Мы научились размещению картинок, текста и видеороликов в модальных окнах. Это вовсе не сложно. Теперь вы сможете вполне реально применять свои знания и наработки на практике. Удачи! Всего Вам доброго! С уважением, Л.М.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка