Информация к новости
  • Просмотров: 708
  • Автор: sulicompany
  • Дата: 20-12-2012, 21:45
 (голосов: 0)
20-12-2012, 21:45

Просмотр видео в модальных окнах

Категория: Программирование » CSS


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

Это существенно сэкономить свободное место на странице, так как видео ролики не будут видимыми. Они будут появляться только при нажатии на ссылку. Кроме это у данного плагина есть возможность группировки видео по категориям.

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

		<script src="js/jquery-1.3.min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />

По аналогии с прошлым уроком, вставляем ссылку на видео с атрибутом rel="prettyPhoto".

<a href="http://movies.apple.com/movies/wb/terminatorsalvation/terminatorsalvation-tlr3_h.480.mov?width=480&amp;height=204" rel="prettyPhoto[trailers]">Трейлер №1</a>

И после ссылки инициализируем скрипт таким вот образом:

 <script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

Как я уже говорил выше можно объединить несколько видео в одном модальном окне с возможностью перехода с одного на другое специальными кнопками. Для этого достаточно в атрибуте rel="prettyPhoto" добавить в квадратных скобках ([]) общие название. Например для видео трейлеров комедий можно написать rel="prettyPhoto[comedy]".

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

Вот и все! всего хорошего Вам, уважаемые посетители.