Jquery lightbox onload

Voici un petit script qui permet d’ouvrir une fenêtre style facebox au chargement d’une page, et également la possibilité de la refermer automatiquement après un temps donné.

[voir l’exemple]

Tout d’abord dans la section head de votre page :

<!-- load the jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- ALL jQuery Tools. No jQuery library -->
<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>

Puis le style de la lightbox :

<style>
#facebox {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	text-align: left;
	display:none;
}
#facebox .popup {
	position:relative;
	border:3px solid rgba(0,0,0,0);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
	-moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
	box-shadow:0 0 18px rgba(0,0,0,0.4);
}
#facebox .content {
	display:table;
	width: 370px;
	background: #fff;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}
</style>

Maintenant créons notre div#facebox juste après la balise body

<div id="facebox">
  <div class="content">
    <button class="close" style="border:none; background:#3E1A0B; color:white; text-align:center; font-weight:bold; position:absolute; top:-25px; left:300px; margin:0px; padding:0 2px; width:70px; height:20px; line-height:20px"> X FERMER </button>
    <div style="padding:20px;">
      <h1>Une belle facebox</h1>
      <div class="resume">resume</div>
    </div>
  </div>
</div>

et pour finir l’appel juste avant la balise de fin du body

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
// select the overlay element - and "make it an overlay"
$("#facebox").overlay({

	// custom top position
	top: 160,
	// some mask tweaks suitable for facebox-looking dialogs
	mask: {
        // you might also consider a "transparent" color for the mask
		color: '#3e1a0a',
		// load mask a little faster
		loadSpeed: 1000,
		// very transparent
		opacity: 0.7
	},
    // disable this for modal dialog-type of overlays
	closeOnClick: true,
	// we want to use the programming API
	api: true

// load it after delay
})
var ol = $("#facebox").overlay({api: true});
// wait 5 seconds, then load the overlay
 setTimeout(function() {
   ol.load();
 }, 500);
setTimeout(function() {
	ol.close();
 }, 7000);
});
</script>