Simulate A Camera Flash Effect On Pictures - Flashing Lights

Flashing Lights is a jQuery plugin that applies a customizable camera flash stage effect to your images using CSS3 transitions.

How to use it:

1. Download & unzip the plugin and load the minified version of the Flashing Lights after you load the latest jQuery library.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/jQuery-flashinglights.min.js"></script>

2. Create a container on which you want to render the camera flash effect and then insert it into a stage container as follows:

<div class="stage">
  <div class="example">
  </div>
</div>

/* example CSS */
.stage {
  display: flex;
  justify-content: space-between;
  height:600px;
  width:900px;
  background-image:url('stage.jpg');
  background-position:center center;
  background-size: cover;
  position: relative;
}

.example {
  width:100%;
  height:90%;
}

3. Apply a default camera flash effect to the stage.

$(".example").flashingLights({
  // optional settings here
});

4. Config the camera flash effect with the following settings.

$(".example").flashingLights({

  // number of rows & columns
  rows: 10,
  columns: 10,

  // height of flash lamp
  lampHeight: "5px",

  // width of flash lamp
  lampWidth: "10px",

  // number of lamps to be turned on/off per cycle
  onRatio: 0.1,
  offRatio: 0.7,

  // how often the lamps turn on and off
  refreshRate: 75,

  // colors
  onColour: "white",
  offColour: "black",

  // blur radious in pixels
  blurRadious: 15

});

---

This awesome jQuery plugin is developed by RedLinus. For more Advanced Usages, please check the demo page or visit the official website.