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

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

Скачать 📥 Демо ▶️

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

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

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

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

2. Теперь установим кнопку вкл/выкл. Изначально был только один вариант - фиксированная плавающая кнопку, но я сделал и обычную - устанавливаемую по месту. Код плавающей кнопки, которая всегда буде отображаться в верхнем левом углу сайта:
Код
<img src="/img/switch-off.png" onclick="setCookie('light-on',1,365);eraseCookie('light-off');" id="switch-on" title="Выключить свет">
<img src="/img/switch-on.png" onclick="setCookie('light-off',1,365);eraseCookie('light-on');" id="switch-off" title="Включить свет">
<script type="text/javascript" src="/js/darkino.js"></script>

Обычная кнопка-ссылка, устанавливающаяся в любое нужное место:
Код
<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 Комментариев
avatar
6
спасибо за скрипт biggrin
avatar
4
Немного поковыряв заработало, наверно конфликтовало с чем то
avatar
5
Конфликтовать там не чему, ты просто со стилями затупил.
avatar
1
У меня что то не работает(((
avatar
2
Да откуда же у вас руки растут, там же все элементарно. Ну пиши хотяб сразу куда ставил, если нужна помощь.
avatar
3
Да, ничего сложного. Но вставил код, залил скрипт и не пашет что то)))