An interactive jQuery plugin that lets you turn out the lights.

What it is:

An interactive jQuery plugin, flashlight.js lets users turn the lights out and explore your site using a flashlight. But be careful while you're looking around, when the lights are off, the monsters come out...


  • Customizable flashlight beam and shadow
  • Optional gremlin
  • Fully customizable lightswitch

How to use it:

1. Include the 'jquery.flashlight.js' file in your scripts folder.

2. Link to jQuery and the 'flashlight.js' script to your HTML file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

<script src="scripts/jquery.flashlight.js">

3. Link to the plugin stylesheet.

<link rel="stylesheet" href="style/style.css">

4. 'flashlight.js' accepts 3 parameters as follows:

Parameter Format Notes
Flashlight Any integer with a positive value Determines the diameter of the flashlight beam in pixels.
Darkness Any value 0-1 Determines the opacity of the flashlight shadow.
Gremlin Boolean If true, a gremlin will live on the page when the lights are turned off.

5. In your main javascript file, call the function:

$(function() {
$('body').flashlight(flashlight, darkness, gremlin);