Script stinge lumina pe site (turn off lights)

Probabil că ați văzut pe multe site-uri un buton sau un link care, dacă este apăsat, stinge lumina în toată pagina exceptând o porțiune, de obicei un filmuleț sau o imagine. Să ne imaginăm următorul scenariu: vizionăm un film sau un videoclip pe un site iar pe pagina respectivă sunt tot felul de elemente care ne distrag atenția gen reclame, imagini, sau texte care clipesc sau se plimbă pe ecran. Nu ar fi mai plăcut dacă am putea, printr-un singur click, să facem să dispară toate aceste elemente enervante și să rămână în prim plan doar clipul video?

Pornim de la o pagină simplă în html în care avem un clip video inserat:

<div class="container">
  <h1>Pagina demo - oprire/pornire lumina site</h1>
  <br />
  <br />
  <div>
    <a class="lightswitch" title="apasa">» stinge lumina «</a>
  </div>
  <br />
  <br />
  <div class="movie">
    <iframe width="420" height="315" src="//www.youtube.com/embed/Tf2BU4e0fkc" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="text">
    <p>Mauris et porttitor tortor. Donec tristique felis id pharetra condimentum. Praesent molestie a leo ut pretium. Ut vulputate justo eu aliquet tempor. Etiam eu sapien ac purus fermentum venenatis id in orci.</p>
    <p>Vivamus mollis leo sit amet leo sagittis aliquet. Integer rhoncus egestas lorem, eu consequat tortor luctus et. Curabitur at vulputate mi. Etiam sed mauris sit amet tortor dictum pulvinar. Donec scelerisque diam sem, eget molestie ipsum condimentum id. Pellentesque dapibus est mauris, rhoncus faucibus eros fermentum nec.</p>
    <p>Aenean nec sodales lectus, vitae laoreet quam. Vestibulum nec dictum turpis, facilisis aliquet odio. Integer rhoncus lectus neque, sit amet eleifend odio tempus nec.</p>
  </div>
  <h4>Integer rhoncus egestas lorem, eu consequat tortor luctus et. Curabitur at vulputate mi. Etiam sed mauris sit amet tortor dictum pulvinar.</h4>
</div>
<div id="dark"></div>

Stilizăm pagina cu ajutorul CSS:

<style>
  .container{
    width:1000px;
    margin:0px auto;
  }

  .movie{
    float:left;
    position:relative;
    z-index:1000;
  }

  .text{
    float:right;
    width:450px;
    border:solid 1px #cccccc;
    padding:20px;
    background-color:#ffffcc;
  }

  h1{
    color:#dd0000;
  }

  h4{
    clear:both;
    padding-top:30px;
  }

  .lightswitch{
    text-decoration:none;
    font-weight:bold;
    color:#0000ff;
    z-index:1000;
    cursor: pointer;
    position:absolute;
  }

  .lightswitch:hover{
    text-decoration:underline;
  }

  #dark{
    background-color:#000000;
    opacity:0.90;
    width:100%;
    height:100%;
    z-index:100;
    position:absolute;
    left:0;
    top:0;
    display:none;
  }

  .lightswitchoff{
    color:#ffff00;
  }
</style>

Totul e bine până acum, avem o pagină cu un filmuleț, puțin stilizată cu CSS, dar butonul nostru încă nu funcționează. Pentru a-l face funcțional mai avem nevoie doar de un mic script în jQuery. Întâi avem două funcții, de aprins și respectiv stins lumina, iar apoi avem funcția care la apăsarea butonului, apelează cele două funcții anterioare:

<script type="text/javascript">
  function turnlightson(){
    $( '#dark' ).fadeOut(200,function() { $( "#dark" ).remove(); });
  };

  function turnlightsoff(){
    $( 'body' ).append( '<div id="dark"></div>' );
    $( '#dark' ).fadeIn(400);
  };
</script>

<script type="text/javascript">
  $(document).ready(function(){
    var i=0;
    $( '.lightswitch' ).click(function(on){
      if(i==1){
        turnlightson();
        $(this).html( "» stinge lumina «" ).removeClass( "lightswitchoff" );
        i=0;
      }
      else{
        turnlightsoff();
        $(this).html( "» aprinde lumina «" ).addClass( "lightswitchoff" );
        i=1;
      }
      on.preventDefault();
    });
  });
</script>

Aici puteți vedea pagina creeată în acest tutorial.

Sper că vă este de folos. Succes!