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

ГлавнаяJava скрипты → Видео и фото в модальном окне

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

Скрипт будет очень полезен тем, у кого на странице находится довольно большое количество видео материала, то есть естественным способом вы разгрузите свою страницу. Потому как каждое видео будет загружаться отдельно при принудительном нажатие посетителя определённой ссылки, кнопки, фото и т.д. А так же его может использовать любой желающий для подачи красивого эффекта всплывающего видео в модальном окне.

Ради примера, я использую кнопки для вызова видео в модальном окне, вы же можете использовать то, что вам больше по душе (как и писал выше): картинки, или простые ссылки. Видео можно использовать с любимого сервиса Youtub.com, а так же и свои в различных форматах.

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




Добавлять видео на страницу можно неограниченное количество. И здесь используются: один стилевой файл и два скрипта.

Код для html


    Код перед </head>
<link href="divbox.css" rel="stylesheet" type="text/css" media="screen" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="divbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.lightbox').divbox({width: 600, height: 400, caption: false});
$('a.iframe').divbox({ width: 200, height: 200 , caption: false});
$('a.ajax').divbox({ type: 'ajax', width: 200, height: 200 , caption: false,api:{
	afterLoad: function(o){ 
	$(o).find('a.close').click(function(){
	o.closed();
	return false;
});
			
$(o).find('a.resize').click(function(){
	o.resize(200,50);
	return false;
	});
       }
   }});
});
</script>

    Код в теле документа
<p style="text-align:center;">
<a href="http://youtube.com/ваше-видео" class="lightbox"><input name="submit" value="Видео 1"></a><br />
<a href="http://youtube.com/ваше-видео" class="lightbox"><input name="submit" value="Видео 2"></a><br />
<a href="http://youtube.com/ваше-видео" class="lightbox"><input name="submit" value="Видео 3"></a><br />
<a href="http://youtube.com/ваше-видео" class="lightbox"><input name="submit" value="Видео 4"></a><br />
</p>

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

И абсолютно таким же макаром используется и фото в модальном окне. Только вместо ссылки указываете путь до большой картинки, а вместо input, как в моём случае, прописываете путь до маленькой вашей картинки. И у вас таким образом получится красивое фото в модальном окне. Фотки то же добавляются сколько угодно - сколько пропишите в коде.

Понравился скрипт - нажимаем на Лайки. Что не понятно, - спрашиваем.

Скачать скрипт - видео и фото в модальном окне

Поделись ссылкой с друзьями:

Комментарии к статье

Юрий 25-02-2015

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

Admin 25-02-2015

Да, вижу. В коде прописал путь для стилевого файла divbox.css, а в архив его не закинул. И картинок тоже там нет.
Попозже исправлю, скорее всего завтра (26.02) всё будет в комплекте.

Юрий 25-02-2015


Спасибо за быстрый ответ.

Жоря 14-06-2016


Не работает этот скрипт на сайте под движком ДЛЕ...

Admin 14-06-2016

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