Intro Overlay Wiki

To use this plugin
Make sure to attach the javascript, and css files in your head tags.

<link type="text/css" rel="stylesheet" href="introOverlay.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="cookies.js"></script><!-- optional -->
<script type="text/javascript" src="introOverlay.js"></script>
        

Then in some script tages add

$(function(){
    $('body').introOverlay();
});
        

Inside your page add the container you want that you want to container the intro content

<div id="intro"> This is your content </div>
        

There are many differnt options that you can use. Here is alist of them and how you can use them.

$(function(){
    $('body').introOverlay({
        introLength: 10000, // anything numeric no quotes
        transitionSpeed: 1000, // ditto
        introAutoFade: true, //timed fade on overlay...true or false
        introCloseBtn: true, //btn to close overlay...true or false
        introTransition: 'fade', //differnt transition options 'fade', 'slideUp', 'slideLeft', 'slideCenter'
        openAnimation: false, //opening animation...true or false
        cookieActive: false, //cookies enabled to stop overlay from firing twice
        introContent: '#intro', //where the content is at, uses css selector # for id, and . for class
        /* also you can use 'href' to load content for a seperate page..
        when using href it also uses the class of the clicked element to find the content...
        it goes like this .load(href class); check source for use */ 
        introTemplate: 'full', // either 'full' or 'module'
        introTurnOffLights: false, //turn off and on lights...true or false
        //copy paste this code for you first time and test differnt options
    });
});
        

These are all the defaults that will fire if you dont give it a default.

It is set up to use the other jQuery plugin COOKIE, but is purely optional. The cookie plugin is used for telling this plugin to only fire on the first visit. It clear the cookie after the browser window has been closed. If you were to not attach the cookie plugin the intro would fire every time the page is refreshed.

Demos

Messin with 'module'

First intentions with this plugin was to have a full page intro pop up in the beggining of the first page, but upon finding how easy it is to bring up the animations with a click of the mouse i decided that I maybe I could add a nicer template to the mix and

Foolin with 'full'