Скрипт выключить свет (для кино-сайтов)

3474 просмотров Alan_Writer 23.03.2016

Уже не раз видел на кино сайтах такую функцию как выключение света, позволяющую при нажатии на специальную кнопку или иконку, затемнить основную область сайта - кроме блока с плеером, а также этой кнопки, чтоб потом можно было свет включить обратно. Как по мне функция не особо полезная, особенно если у вас рядом с плеером нет каких-то мигающих и раздражающих элементов. Тем более обычно фильмы смотрят в полноэкранном режиме плеера, и тогда вообще не важно что там на сайте происходит.

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

Установка скрипта

1. Скачайте архив и все содержимое залейте в файловый менеджер.

2. Теперь установим кнопку вкл/выкл. Изначально был только один вариант - фиксированная плавающая кнопку, но я сделал и обычную - устанавливаемую по месту. Код плавающей кнопки, которая всегда буде отображаться в верхнем левом углу сайта:

Код

Обычная кнопка-ссылка, устанавливающаяся в любое нужное место:

Код

<a href="javascript://" onclick="setCookie('light-on',1,365);eraseCookie('light-off');" id="switch-on">Выключить свет</a>
<a href="javascript://" onclick="setCookie('light-off',1,365);eraseCookie('light-on');" id="switch-off">Включить свет</a>
<script type="text/javascript" src="/js/darkino.js"></script>

3. В основной файл стилей. Тут я все сделал по минимуму, оформление кнопок можете подстроить под себя.

Код

.shortstory iframe,.shortstory object,.dark-video {position:relative;z-index:999;}
#dark-block {position:fixed;top:0;left:0;background:rgba(0,0,0,0.9);z-index:998;width:100%;height:100%;display:none;}
/*стили плавающей иконки*/
img#switch-on {position:fixed;top:30px;left:15px;z-index:999;cursor:pointer;}
img#switch-off {position:fixed;top:30px;left:15px;z-index:999;cursor:pointer;display:none;}
/*стили обычной кнопки*/
a#switch-on {background:#888;color:#fff;position:relative;z-index:999;}
a#switch-off {background:#fff;color:#888;position:relative;z-index:999;display:none;}
a[id^="switch"] {padding:5px 10px;display:inline;border-radius:4px;}
a[id^="switch"]:hover {opacity:0.7;}

Ну вот и все, теперь при выключении света на сайте, весь экран будет тускнеть, кроме видеоплеера находящегося в блоке с идентификатором class="shortstory". То есть все что вам нужно, это присвоить контейнеру где у вас плеер - вышеуказанный идентификатор, или же просто обнести плеер (или что либо другое) таким блоком:

Код

<div class="dark-video">тут ваш плеер</div>

Теперь точно все. Если я помог - оценивайте, комментируйте, делитесь материалом (иначе я умру от голода, и больше никто вам помогать ну будет).

Теги: скрипт вкл/выкл, скрипт свет, выключить свет, свет на сайте

6 Комментариев