В этом уроке пойдет речь о том, как предоставить Вашим посетителям просмотр видео в модальных окнах. Это существенно сэкономить свободное место на странице, так как видео ролики не будут видимыми. Они будут появляться только при нажатии на ссылку. Кроме это у данного плагина есть возможность группировки видео по категориям.
Первый шаг - как обычно. Подключаем все необходимо е в шапке.
Code
<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".
Code
<a href="http://movies.apple.com/movies/wb/terminatorsalvation/terminatorsalvation-tlr3_h.480.mov?width=480&height=204" rel="prettyPhoto[trailers]">Трейлер №1</a>
И после ссылки инициализируем скрипт таким вот образом:
Code
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Как я уже говорил выше можно объединить несколько видео в одном модальном окне с возможностью перехода с одного на другое специальными кнопками. Для этого достаточно в атрибуте rel="prettyPhoto" добавить в квадратных скобках ([]) общие название. Например для видео трейлеров комедий можно написать rel="prettyPhoto[comedy]".
Данный плагин можно использовать практически для чего угодно (флеш, изображений, других сайтов, галлерей или всего вместе). Достаточно только добавлять необходимый атрибут к ссылкам.
