jQuery Object Overlay

Purchase This Script

Description

This plugin makes it easy to add an overlay to any element on your website. It was created to inform the user that your website is currently processing and therefore best used in ajax applications. It can also be used in conjunction with a light box that fades out the background to bring attention to the modal window. The uniqueness of this plugin is the ability to style the overlay and any text you assign yourself. It also includes an amazing ability to blur any element or make it colourless using a new feature in CSS3 called filters. Filters are currently only supported in Webkit browsers, however the plugin has been designed to automatically detect the feature in any browser and fallback to a coloured overlay that you specify, meaning that it is future proof without any modification from you.

Features

  • Blur / Grayscale the element you wish to detract attention from (Currently Webkit Only)
  • Automatic text colour, if you choose a dark overlay, the text color will be adjusted to still be visible.
  • 100% Customizable with simple css
  • Add an image / text on top of the overlay
  • Global defualts, set style once and use accross your website.
  • Simple API to allow show / hide / destory

Demos

Basic Usage

In the simplest form, the plugin by default will attempt to remove focus by blurring. Here we have made the whole window lose focus and append text with an image. For best results view the demo in a webkit browser eg. (Safari || Chrome)

$("body").ObjectOverlay();
scottwills autumn2scottwills autumn4scottwills autumn5
scottwills autumn6scottwills butterflyscottwills farmhouse2

Multiple Filters

Let's add to the default blur effect by making the content greyout. We can do multiple filters by passing valid css filter attributes to an array

$("body").ObjectOverlay({
    overlayEffect: ["grayscale", "blur"],
    overlayEffectValue: ["1", "2px"]
});
scottwills autumn2scottwills autumn4scottwills autumn5
scottwills autumn6scottwills butterflyscottwills farmhouse2

Modal Demo

In this demo we have integrated the plugin into the popular modal window prettyPhoto with ease. It will work with almost any lightboxes on the market as long as they support callbacks. Here we simply, on before show initalize our overlay and on the closing of the lightbox, hide our overlay.

API Use

Simple to use, you can interact with the overlay with three simple commands. Show, Hide and Destroy.

$(window).on("load", function(){
    $("#APIOverlayDemo").ObjectOverlay();
});

$("#APIDemoTriggerShow").on("click", function(){
    $("#APIOverlayDemo").ObjectOverlay("show");
});

$("#APIDemoTriggerHide").on("click", function(){
    $("#APIOverlayDemo").ObjectOverlay("hide");
});

$("#APIDemoTriggerDestroy").on("click", function(){
    $("#APIOverlayDemo").ObjectOverlay("destroy");
});

scottwills autumn3adfish falltrees4scottwills autumn7

Site Wide Defaults

In most cases you will want to style all calls to the overylay plugin the same. In this instance it is not neccessary to add the options to each call but to a global variable. You can still override your defaults in the initialisation of the plugin.

    $.ObjectOverlay = {
        overlayImage: "assets/loader2.gif",
        overlayCss: {
            backgroundColor: "#000",
            opacity: 0.8
        },
    }
    
    $("#GlobalOverlayDemo").ObjectOverlay();
    $("#GlobalOverrideOverlayDemo").ObjectOverlay({
        overlayImage: "assets/loader.gif"
    });

Available Options

overlayEffect

Css Filter Type (blur, greyscale, sepia, brightness, contrast, invert, saturate, opacity, false)

Can be an array of values or a single value in string format.

overlayEffectValue

The corrosponding effect value, can be either an Array or a String.

overlayText

The text to display on the overlay. If you do not wish for any text to appear, set this to false.

overlayImage

The image to display on the overlay. If you do not want an image, set this to false.

animate

Enable the animation setting to animate the overlay.

animationTime

The time in milliseconds that the animation lasts for. Defaults 1000

showOnInit

If you want to create the overlay before showing it via the show method set this to false. Defaults true.

containerClass

The class of the overlay container. Defaults "ObjectOverlayContainer".

overlayClass

The class of the overlay itself. Note, if you are using filters with overlayCssAsFallback set to true, this container will not show on a supported browser. Defaults "ObjectOverlay".

overlayCss

Any addtional styling you wish to add to the overlay, eg. background-color. Note that the position of the overlay is already handled.

overlayTextCss

The styling of the text that appears on the overlay. By default the text will attempt to set a color dependent on the background you are applying the overlay to. You can override this functionality by explictly setting a font color.

overlayCssAsFallback

Set this option to false to always show an overlay regardless of any filters applied to the element. Defaults true.

$("body").ObjectOverlay({
    overlayEffect: ["blur", "grayscale"],
    overlayEffectValue: ["3px", "1"],
    overlayText: "Loading...",
    overlayImage: "Http://",
    animate: true,
    animationTime: 1000,
    showOnInit: true,
    containerClass: "ObjectOverlayContainer",
    overlayClass: "ObjectOverlay",
    overlayCss: {
        backgroundColor: "#fff",
        opacity: 0.8
    },
    overlayTextCss: {},
    overlayCssAsFallback: true
});

Browser Support

IE7+ Chrome Safari Firefox 3+ Opera

Requirements

This plugin uses jQuery 1.7+
It makes use of the jQuery.on function but could easily use bind in earlier versions of jQuery.

Disclaimer

CSS3 Filters are still very much experimental, however this progressive enhancement technique is really cool.

Purchase This Script