Сайт
Елисеева
Вячеслава
Воскресенье, 19.11.2017, 17:47
Приветствую Вас Гость | RSS
Взрослеем!

          


Поиск по сайту

Меню сайта

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Погода
          

Мои школы
СШ №1 г. Ефремова МВИЗРУ ПВО

ГРТУ ПВО

Facebook
Вячеслав Елисеев


Праздники Беларуси
Праздники Беларуси

Главная » ПК и ПО » Мои справки по ucoz » Опытные разработки

Создание модальных окон на сайтах ucoz
09.01.2012, 00:28

Создание модальных окон на сайтах ucoz



Читаем примечание здесь

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

1. Готовим необходимый материал

  Для правильного отображения модальных окон необходимо проверить включение поддержки сценариев "JavaScript" в используемом вами браузере. Как включить "JavaScript" в браузерах "Opera", "Internet Explorer" и "Mozilla Firefox" можно посмотреть здесь.

Прежде всего, для размещения в модальных окнах необходимо подготовить соответствующий вашим целям материал: им м.б. картинки или фотографии, или видеоролики, или текст.  Изображения необходимо иметь в двух вариантах - большого и малого размеров. В нашем примере малые изображения имеют ширину 200px, а большие 600px (естественно, размеры можно корректировать). Изменить размеры имющихся изображений можно с помощью специальных программ ACDSee Photo Manager, Adobe Photoshop и др.

Видеоролики в модальные окна можно вставлять как свои, так и из Сети, используя для этой цели "Файловый менеджер" или функции "Загрузить видео" или "Подключить видео" раздела "Мультимедиа" админбара сайта ucoz. Загрузить свои ролики на сайт можно так же с помощью программ или сервисов YouTube, RuTube и др., а сторонние - из Сети, скопировав их код.

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

Здесь же мы пока будем использовать подготовленные нами материалы. Для этого скачайте  архив с материалом и рабочими файлами,  которые также будут необходимы в процессе нашей работы.

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

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

Подготовка рабочего материала закончена, переходим к основной работе.

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

В "Файловом менеджере" сайта ucoz содержимое папки "fancybox" копируем в создаваемую одноименную корневую папку сайта. Содержимое папок "images" и "code" копируем в соответствущие создаваемые папки.

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

<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.gallery").fancybox({ "padding" : 2, "imageScale" : false, "zoomOpacity" : false, "zoomSpeedIn" : 1000, "zoomSpeedOut" : 1000, "zoomSpeedChange" : 1000, "frameWidth" : 700, "frameHeight" : 600, "overlayShow" : true, "overlayOpacity" :0.3, "hideOnContentClick" :true, "centerOnScroll" : false}); $("a.video").fancybox({"frameWidth":560,"frameHeight":340});
$("a.content").fancybox({"frameWidth":600,"frameHeight":300});
$("a.iframe").fancybox({"frameWidth":800,"frameHeight":600});
});
</script>

Разные элементы выделены отдельными цветами. Первая строка - это подключение таблицы стилей.
Три последующие - это "яваскрипты".
Далее идёт скрипт управления элементами, которые мы будем монтировать, а именно:
1) одиночная картинка $("a.first")...,
2) группа изображений $("a.two")...,
3) группа плавно увеличивающихся изображений $("a.gallery")...,
4) видео $("a.video")...,
5) текст $("a.content")... ,
6) ссылка (сайт) $("a.iframe")... .
Изменяемые настройки этого плагина:
- padding — отступ каждого элемента от края окна;
- imageScale — при значении true (по умолчанию) контент масштабируются по размеру окна, т.о. содержимое окна не выходит за рамки в окне браузера; если значение false — окно вытягивается по размеру контента и может выходить за рамки окна браузера;
- zoomOpacity — изменение прозрачности контента во время анимации; при true прозрачность задается от 0 до 1, при false (по умолчанию) - контент является не прозрачным;
- zoomSpeedIn — скорость увеличения размеров контента, указывается в миллисекундах;
- zoomSpeedOut — скорость уменьшения контента, указывается в миллисекундах;
- zoomSpeedChange — время смены контента, указывается в миллисекундах;
- frameWidth — ширина окна, указывается в пикселях (по умолчанию 425px);
- frameHeight — высота окна, указывается в пикселях (по умолчанию 355px);
- overlayShow — если true (по умолчанию), то страница под всплывающим окном затеняется цветом, указанным в jquery.fancybox.css (см. div#fancy_overlay -> background-color: #666;); false — запрещает затенение;
- overlayOpacity — прозрачность затенения от 0 до 1 (по умолчанию 0.3);
- hideOnContentClick — при значении true модальное окно закрывается при клике мышкой в любом месте вне навигации модального окна (по умолчанию), при false — модальное окно не реагирует на клики мышки вне навигации;
- centerOnScroll — при значении true — модальное окно выводится всегда в центре окна браузера, при false — модальное окно прокручивается вместе с остальным содержимым страницы (по умолчанию).

Кликните по картинкам!

Редактируемая страница сайта ucoz со вставленным кодом



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

В редакторе страницы сайта в месте размещения модального окна вставляем следующий код:

<div align="center">
<a class="first" title="Авто Suzuki" href="/images/suzkv1.jpg"><img src="/images/suzkv1_min.jpg"></a>
</div>

Не забудьте изменить параметр title и прописать путь до своих реальных файлов, т.е. выделенный текст заменяем своим.

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

Идём дальше...


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

1] В том месте страницы сайта , где вы хотите вывести группу изображений, вставляем код:

<div align="center">

<a class="two" rel="group" title="Первая картинка группы" href="/images/Cvetok1.jpeg"><img src="/images/Cvetok1_min.jpeg" /></a>

<a class="two" rel="group" title="Вторая картинка группы" href="/images/Cvetok2.jpg"><img src="/images/Cvetok2_min.jpg" /></a>

<a class="two" rel="group" title="Третья картинка группы" href="/images/Cvetok3.jpg"><img src="/images/Cvetok3_min.jpg" /></a>

</div>

Процесс подготовки изображений, такой же как и одиночном примере, т.е. каждое изображение должно быть 2-х размеров: маленького и большого формата. Все эти изображения, как вы помните, лежат у нас в папке "images".

Вот что получаем в итоге:



Рассмотрим второй вариант просмотра групповых изображений в модальных окнах

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

<div align="center">

<a class="gallery" rel="group" title="Первая картинка группы" href="/images/Cvetok1.jpeg"><img src="/images/Cvetok1_min.jpeg" /></a>

<a class="gallery" rel="group" title="Вторая картинка группы" href="/images/Cvetok2.jpg"><img src="/images/Cvetok2_min.jpg" /></a>

<a class="gallery" rel="group" title="Третья картинка группы" href="/images/Cvetok3.jpg"><img src="/images/Cvetok3_min.jpg" /></a>

</div>


Как вы заметили, коды первого и второго варианта групповых изображений отличаются только классами: в первом случае он "two", во втором - "gallery"

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

И вот что получаем:

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


Для вставки видеоролика, например, с сайта YouTube используем этот код:

<div align="center">
<p><a class="video" href="#testube"><span style="color:red"><u><b>Посмотрите этот видеоролик</b></u></span></a></p>
<div style="display:none" id="testube">
<!-- HTML - код ролика -->
<iframe width="560" height="315" src="//www.youtube.com/embed/GIaQG07xvrk" frameborder="0" allowfullscreen></iframe>
</div>
</div>

Смотрим результат:

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

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

Рассмотрим размещение текста в модальном окне. Для этого применим следующий код:

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

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

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

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

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


Открытие ссылки (сайта) в модальном окне

Еще проще реализуется открытие ссылки (сайта) в модальном окне. Для этого применим следующий код:

<p align="center"><a class="iframe" href="http://www.luksweb.ru/about.php">Сайт интернет-гуру Андрея Краснокутского</a></p>

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

Сайт интернет-гуру Андрея Краснокутского

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



Итог нашей с вами работы.


Примечание:(24.02.2013) кроссбраузерность: я тестировал демки с сайта в Opera 12.14, Maxthon 4.0, Avant Browser 12.0, Google Chrome 24.0, Firefox 18.0, MyIE 3.3. Как и ожидалось все работало гладко. В Internet Explorer 8.0 в "Сервисе" надо включить "Представление совместимости".

Вот и всё. Удачи вам!


Источники: [1] [2] [3] [4] [5] [6] [7] и др.


Поделитесь с друзьями


Категория: Опытные разработки | Добавил: elislav | Теги: Создание модальных окон на сайтах u
Просмотров: 7827 | Загрузок: 0 | Комментарии: 3
Всего комментариев: 1
0
1  
Спасибо за материал. Все доступно и понятно! хочу с сайтом посоветовать, поменьше внешних ссылок, поудалять бы лишние, такие как http://www.cys.ru/, http://www.siteguard.ru/, счетчик http://mycounter.ua/ тоже не очень...
Ответ: Спасибо за внимание и советы, avklips!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Переводчик

Форма входа

IP-адрес и прочее
       измерьте скорость интернета

Наши рейтинги
Этот сайт защищен «Site Guard»

Друзья сайта
  • HELP на sonikelf.ru
  • Сайт Ирины Веренчик
  • Сайт СШ №1 г. Ефремова
  • Мои альбомы на gallery.ru
  • ГРТУ ПВО
  • МВИЗРУ ПВО
  • МОА КВИРТУ ПВО
  • Ветераны ВВКУРЭ ПВО
  • ЭВЗРКУ ПВО
  • Одесский музей западного и восточного искусства
  • Одесский историко-краеведческий музей
  • Олег Соколов - художник, поэт, зачинатель одесского авангарда

  • Сайты Ефремова
        Ефремов   Ефремов  
      Сайт Ефремовского Дома-музея И.А. Бунина

    Информспонсоры

    Обмен WebMoney
             

    Слушаем радио

    Яндекс.Метрика
        Основан 22.09.2009    Copyright Елисеев В.И. © 2017      Сейчас на сайте человек(а) Online Casino
    Бесплатный конструктор сайтов - uCoz