Git Product home page Git Product logo

allofthelights.js's Introduction

Allofthelights.js

Allofthelights.js is a jQuery plugin to turn off the light and enjoy your videos, try it !

http://www.megaptery.com/allofthelights/ - Pierre VION

Allofthelights

Features

  • Multiple videos iframe
  • Responsive video
  • Support of lot of players
  • Switch button entirely customizable
  • Lightweight (3.4Ko minified)
  • Callback functions
  • Control animation speed
  • Custom background (color, opacity)
  • Modern browsers support
  • Requires jQuery 1.7+

Examples

Compatibility

  • Chrome
  • Firefox
  • Opera
  • Safari
  • IE9+

Options

color: '#000000'

Defines the background color.

opacity: '0.9'

Defines the background opacity.

z_index: '10'

Defines the background z-index.

switch_selector: 'switch'

Defines the switch button CSS id or class.

delay_turn_on: 400

Defines animation time to turn on the light.

delay_turn_off: 400

Defines animation time to turn off the light.

scrolling: true

Allows disable scrolling when the light is on if value is false.

is_responsive: true

Enables responsive video.

custom_player: null

Allows to apply responsive on a custom player. Specify your video vendor selector. Only available when is_responsive = true.

callback_turn_on: function(){}

Callback function when the light goes on.

callback_turn_off: function(){}

Callback function when the light goes off.

allofthelights.js's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

allofthelights.js's Issues

Documentation for SCROLLING parameter is confusing

The description "Allows disable scrolling when the light is on if value is false." for scrolling:true is rather confusing.

I suggest "When set to false scrolling becomes disabled while the lights are off" if that's how it behaves.

If it doesn't then it should, as that's what one would intuitively expect a parameter named "scrolling" to do.

Example of toggling the lights with Play/Pause for YouTube and default HTML5 players

I was expecting there to be an example of how to turn off the lights automatically when the Play button is pressed in a player (or it starts automatically at page load) and how to turn them back on when the Pause state is reached (by press/click/tap or at end of video), as this is surely the most common scenario for Allofthelights.js to be used.

I suggest providing examples for both YouTube and the default/standard browser HTML5 players to support easy implementation of this by others.

See https://developers.google.com/youtube/iframe_api_reference#Adding_event_listener and https://developers.google.com/youtube/js_api_reference#Adding_event_listener for YouTube and http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents for the HTML5 media player.

ie10

Hello

In IE10 it pushes down my player to the same distance as player height.

Any clue when IE10 will be fully tested?

Multiple players support confusion

It's nice that you've made it support multiple players, but it's not clear how and it's not necessarily desirable in all cases - does this only happen if I invoke .allofthelights() on a jQuery collection of more than one player? Or does it somehow automagically detect other players on the page? This should be documented for clarity.

Possible conflict with fitvids.js

I was working on implementing allofthelights.js on a site that already uses fitvids.js (http://fitvidsjs.com/), and noticed there is an issue. fitvids.js adds a DIV around video iframes with certain padding, when allofthelights.js is implemented (and works) it duplicates this specific DIV which in turn pushes video down due to double padding. See screenshot.
js-bug

Naming of delay_turn_on and delay_turn_off

It's not a delay, it's a duration, and without reading the documentation (e.g. looking only at code) it's not clear whether turn_on refers to the lights (hence lights off first, then lights on) or the plugin (so switching the plugin on turns off the lights, etc) hence I suggest they should be named duration_lights_off and duration_lights_on (and documented in that order) so that there is no ambiguity.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.