Turn Off The Lights Alongside Jquery

For those who taste watching videos on the internet, this is a real useful script made alongside jQuery past times Janko. And what this script does? It volition turn off the lights for you, therefore that everything on the page volition endure fading to dark, except the video, as well as everything some the video volition endure less visible, inward a means that aught volition distract you lot piece watching it.

You tin examination it on the next evidence spider web log - click the link that says "Turn off the lights" as well as the page volition endure darkened. To brand the page elements visible again, only click the "Turn on the lights" link:

Turn Off the Lights DEMO

How to add together the "Turn off the Lights" Feature to Blogger/Blogspot

Step 1. Log into your Blogger trouble concern human relationship as well as click on your blog, as well as then become to "Template" as well as hitting the "Edit HTML" button

Step 2. Click anywhere within the code surface area as well as search for the next tag past times pressing the CTRL + F keys (hit Enter to honor it):

</head>

Step 3. After you lot industrial plant life it, glue the below scripts only inward a higher house it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>

Note: if you lot already convey 1 version of jquery inward the template, delight take the describe inward red.

Step 4. Now search for the next tag:

]]></b:skin>

Step 5. Just inward a higher house ]]></b:skin> add together the next CSS code:

/* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb90p9VtW53biMgzUIuM-c0EQLdwrXTKtuLO-841kseRIMi_rHBLOngDx0FEFYcJLonJIv0OiiSteCqxXzqk4xIPbGx903xJSKg6RJPu5lDIThw9SpkjqjFcsGm7VQugI6h3u49GGhOEhu/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMJXoQCv5iWHluhdSdZiW-hdomXxQ-Ec1s99LuivBxjoFHnptAyBdMODOi_f_YCJhQawY5-bQTFoWdixtrSLkLi7XxyMaeo1KjlSSdHlnVLbRH-hvfY15_xpY95MYRxLgxiMaRg0jzzt1H/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Step 6. Finally, honor this tag:

</body>

Just inward a higher house the </body> tag, add together this HTML code:

<div id='lightsoff'/>

Step 7. Click the "Save Template" push as well as that's it!

Now, each fourth dimension you lot add together a video, either inward a post service or using a HTML/Javascript gadget, usage this code:

<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
...Here goes the code of the video...
</div>
</center>

Add the iFrame code of your video instead of the text inward bluish as well as "Save" the gadget or "Publish" your post. Now you lot tin taste your videos alongside the lights off!

Remember that this play a joke on uses jQuery as well as if you lot convey some other version of jQuery, you lot quest to take it, otherwise it mightiness non work.

Share this post