Навигация
Категории
| Скрипты для Ucoz [474] |
| Шаблоны для Ucoz [199] |
| Графика для Ucoz [11] |
| Скрипты Меню для сайта [21] |
| Ajax Окна [4] |
Мини-Чат
Опрос
Лучшие пользователи
Ник: Толик
Файлов: 744
Ник: cyber
Файлов: 159
Ник: waxirewion
Файлов: 59
Ник: Admin™
Файлов: 5
Партнеры
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
| Главная » Файлы » Всё для Ucoz » Скрипты для Ucoz |
Скрипт: Превращение всех видео Youtube на странице в uLightbox
Данный скрипт в автоматическом режиме превратит все найденные youtube ролики в лайтбокс, а это значит, что при клике по ролику его копия будет воспроизведена в lightbox окне
Механизм работы скрипта прост. Так как у роликов с youtube офигенно большой z-index, то сначала мы нехитрой манипуляцией с адресом ролика дописываем параметр wmode=opaque, после чего накладываем прозрачный оверлей, параллельно перезаписывая ссылку в блоке с готовым фреймом. При клике по оверлею вызываем лайтбокс окно. Более подробное описание никчему.
Установка:
В любое место на нужных страницах:
<div id="videocontent" style="display:none;"><iframe width="640" height="360" src="" frameborder="0" allowfullscreen></iframe></div>
<script type="text/javascript">
var apohtml; // Переменная для проверки ссылки в лайтбокс блоке
$(document).ready(function() {
// Проверка, ролик ли это ютюба + подмена ссылок и наложение оверлея
$('* iframe').each(function() {
if($(this).attr('src').indexOf('/embed/') != -1) {
var aposplit = $(this).attr('src').split('?feature')[0]
$(this).attr('src', aposplit + '?wmode=opaque');
$(this).before('<div class="apovideo" style="background:transparent;position:absolute;width:' + $(this).attr('width') + 'px;height:' + $(this).attr('height') + ';z-index:2;" onclick="$(this).children().hide();videoLightbox();return false;" />');
}
});
// При наведении на оверлей над роликами
$('div.apovideo').hover(function() {
if($(this).next().attr('src') != apohtml) {
$('#videocontent').find('iframe').attr('src', $(this).next().attr('src'));
apohtml = $('#videocontent').find('iframe').attr('src');
};
});
// Очищаем содержимое лайтбокс блока при закрытии
$('#fancybox-overlay, .fancybox-close').click(function(){
$('div#videocontent').empty();
})
});
</script>
Механизм работы скрипта прост. Так как у роликов с youtube офигенно большой z-index, то сначала мы нехитрой манипуляцией с адресом ролика дописываем параметр wmode=opaque, после чего накладываем прозрачный оверлей, параллельно перезаписывая ссылку в блоке с готовым фреймом. При клике по оверлею вызываем лайтбокс окно. Более подробное описание никчему.
Установка:
В любое место на нужных страницах:
Code
<div id="videocontent" style="display:none;"><iframe width="640" height="360" src="" frameborder="0" allowfullscreen></iframe></div>
<script type="text/javascript">
var apohtml; // Переменная для проверки ссылки в лайтбокс блоке
$(document).ready(function() {
// Проверка, ролик ли это ютюба + подмена ссылок и наложение оверлея
$('* iframe').each(function() {
if($(this).attr('src').indexOf('/embed/') != -1) {
var aposplit = $(this).attr('src').split('?feature')[0]
$(this).attr('src', aposplit + '?wmode=opaque');
$(this).before('<div class="apovideo" style="background:transparent;position:absolute;width:' + $(this).attr('width') + 'px;height:' + $(this).attr('height') + ';z-index:2;" onclick="$(this).children().hide();videoLightbox();return false;" />');
}
});
// При наведении на оверлей над роликами
$('div.apovideo').hover(function() {
if($(this).next().attr('src') != apohtml) {
$('#videocontent').find('iframe').attr('src', $(this).next().attr('src'));
apohtml = $('#videocontent').find('iframe').attr('src');
};
});
// Очищаем содержимое лайтбокс блока при закрытии
$('#fancybox-overlay, .fancybox-close').click(function(){
$('div#videocontent').empty();
})
});
</script>
| Всего комментариев: 1 | |
 Написал: Admin2432
21:52
Не работает!
 | |