Array

Reveal is a jQuery Plug-in that enables hCard and vCards to be easily revealed and presented when available on a web page.

Introduction

Reveal helps you to show of those hCards to colleagues, business contacts, family and friends. Simply add one or more hCards to your page and let Reveal provide the revelation.

The amazing, quick and easy hCard viewer for jQuery. Oh what a revelation!

It's easy, fun and it's free. Let's try it out!

Download

You can download the artifacts directly from here:

Source code repository

Or if you want, the source code is directly available from the repository at the link below:

https://github.com/olle/reveal

Documentation

  1. Download the plugin and plug-it-in to your jQuery page.
  2. Build and add your hCards to the page, just add them - yes, anywhere on the page will be good.
  3. Now Reveal them with a by attaching the plugin code to some event, for example the click of a button.

Wow! That was fun. Let's take a look at how it works.

Reveal will look up and show all the hCards on your page if the clicked element isn't a card itself. 

$('button').Reveal();

If the clicked element is then only that card is shown. 

$('#me').Reveal();

You can also show groups of cards by adding Reveal to an element that contains a collection of cards. 

$('ul.friends').Reveal();

See, it's not hard at all.

There are options to override if you want to add your own touch the the revelations. These are the defaults: 

{
  overlay : {
    id : 'overlay',
    top : 0,
    left : 0,
    margin : 0,
    padding : 0,
    width : '100%',
    'background-color' : '#210',
    opacity : '.9',
    'z-index' : 99
  },
  hcard : {
    id : 'reveal',
    position : 'absolute',
    width : 400,
    height : 250,
    'background-color' : '#333',
    'border-style' : 'solid',
    'border-color' : '#777',
    'border-width' : '12px',
    'z-index' : 100,
    addStyle : true,
    nextCardTitle : 'Next',
    previousCardTitle : 'Previous'
  }
}

You pass your own options to the Reveal call. 

$('button').Reveal({
  overlay : {
    opacity : .5
  },
  hcard : {
    nextCardTitle : 'Forward',
    previousCardTitle : 'Back'
  }
});

I knew you would get it! Good job. Now go and add Reveal to your web page.

blog comments powered by Disqus

Fork me on GitHub