LightShow is a JavaScript/JQuery plugin that helps you create amazingly simple overlays. Designed to be flexible and easy to use.
- Overlay the whole document or a specific element.
- No external CSS file needed. But still easy to style.
- Auto adjusts itself on window resize. Possible to manually adjust element (e.g. during animation, see: readapt).
- Positioning. Position the content relative to the overlay according to directions (e.g. top center, middle center, bottom left, a.s.o.).
- Effects. Use standard JQuery effects (toggle, fade, slide) or use your own.
- Hover activation. Show/hide overlay on element hover.
- Callbacks. Hook in when events occur.
- Close overlay using escape key.
var overlay = $.lightShow({options});
Notice: The instance returned is not a JQuery object.
var overlay = $.lightShow("lightshow-id");
$.lightShow("lightshow-id").show().setContent("<h1>YUP WE'RE SETTING IT!!!!!</h1>").hide();
String identity of this instance.
id: "login"
This means that if identity is 'login' then the instance is accessible by using:
$.lightShow('login').show();
The object that you want to overlay. Can be either document (default) or a specific element.
overlay: 'document' // Default is 'document'
=================== overlay: $("#element-to-overlay")
Content that you want to place inside your overlay. This can be either a string (HTML) or an element, i.e.
content: "<h1>My amazing content that I want in my overlay!</h1>"
=========================== content: $("#element-to-use-as-content")
Whether or not to run show() directly after initialization.
showOnStartup: true // Default is false
Enabling this option is equal to doing the following:
$.lightShow({/*options...*/}).show();
If a specific overlay element is set, then the overlay can be activated (show/hide) on mouse hover.
showOnHover: true
Selector used to identify buttons that close (hide) the overlay.
hideButtonSelector: ".hide-button" // Default is '.hide-button'
==== This means that using the above selector you can have content with elements that match the specified selector, i.e.
content: "<h1>Content!</h1><a href='#' class='hide-button'>Close overlay</a>"
Enabling this option means that pressing the escape key (ESC) automatically closes (hides) the overlay.
hideOnEscape: true // Default is true
Effects that run when the overlay is showing/hiding.
effect: {
type: 'fade', // Default is 'fade', but can also be, 'slide' and 'toggle'
duration: 500 // Time in milliseconds (ms) that the effect should animate
}
But it is also possible to override the default effects and use your own, i.e.
effect: {
show: function(element, complete_callback){
element.css('display', 'block').zoomIn(500, complete_callback);
},
hide: function(element, complete_callback){
element.zoomOut(500, complete_callback);
}
}
Decides how content overflow is handled.
style: {
overflow: 'hidden', // Default is 'hidden'
}
Specifies the overlay opacity. From 0.0 (fully transparent) to 1.0 (fully opaque).
style: {
opacity: 0.85, // Default is 0.85
}
Overlay background color. Note that this color is affected by the overlay opacity.
style: {
backgroundColor: "#000" // Default is '#000' (black)
}
Shows the overlay and it's content (runs the 'show' animation).
$.lightShow({/*options...*/}).show();
Hides the overlay and it's content (runs the 'hide' animation).
$.lightShow({/*options...*/}).hide();
Sets the content of the overlay. Value is same as the 'content' option, i.e.
$.lightShow({/*options...*/}).setContent("<h1>My amazing content that I want in my overlay!</h1>");
=========================== $.lightShow({/options.../}).setContent($("#element-to-use-as-content"));
Sets the effect to be used when showing/hiding the overlay. Effects supported are 'fade', 'slide' and 'toggle'.
$.lightShow({/*options...*/}).setEffect("slide");
=========================== $.lightShow({/options.../}).setEffect("toggle");
Repositions/dimensions the overlay and it's content. This can be used when you want to do animations on the content and want the overlay to stick with it.
$("#element-in-overlay-content").animate({
height: '50%'
},{
step: function(now, fx) {
$.lightShow("my-overlay-id").readapt();
}
});
Releases/removes all memory/elements associated with this instance. This can be used to clean up overlays.
var overlay = $.lightShow({/*options...*/}); // Instantiate..
overlay.release(); // Tell the instance to release all that it has allocated (variables, elements, etc..)
overlay = null; // Necessary to fully release the object from memory
See /examples
- IE 9.0.8112.16421 - All features supported
- Chrome 20.0.1132.57 m - All features supported
- Firefox 14.0.1 - All features supported
Copyright (C) 2013, Robin Orheden
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Robin Orheden