Les pré-requis
Tout d'abord intégrons les pré-requis à notre page HTML. A savoir jQuery, le plugin Easing 1.3 pour les effets ainsi que le script Lightbox.
CODE JAVASCRIPT
<!DOCTYPE html>
<html>
<head>
<title>LIGHTBOX TTM V0.2 PAR SKY DE TUTOMANIA.COM</title>
// Inclusion du CSS - IMPORTANT
<link rel="stylesheet" type="text/css" href="lightbox.css" />
// Inclusion de jQuery , Easing 1.3 et Lightbox
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="lightbox_TTM.js"></script>
</head>
<body>
...
Ci-dessous les blocs div qui serviront à afficher notre lightbox, tous ces blocs div seront cachés lors de l'affichage de la page (class CSS)
CODE HTML
// LIGHBOX
// FIN LIGHBOX
Nous avons un bloc "bgPopup" qui correspond au bloc qui noircira le fond du site
Nous avons un bloc "Popup" qui correspond au conteneur générale ou tout s'affichera.
Nous avons un bloc "my_logo" qui contiendra le titre de notre lightbox
Nous avons un bloc "fermer" qui contiendra la croix pour fermer la lightbox
Nous avons un bloc "load" qui est le bloc de chargement avant l'affichage
Et enfin un bloc "contenu" qui contiendra le contenu que nous souhaitons afficher.
En voyons les CSS associés à chaque bloc nous y verrons un peu plus clair
La premère choise à comprendre est de caché tous ces blocs lors du chargement de la page avec un
display:none;. Tous ? non car certains blocs sont des éléments enfants, il prendront donc la même classe que son parent, ici le bloc parent est "#Popup" et les enfants "#fermer", "#my_logo", "#contenu".
CSS du bloc "bgPopup"
"bgPopup" qui correspond au bloc qui noircira le fond du site.
CODE CSS
#bgPopup {
display:none; /* On cache le bloc */
/* hack for internet explorer
La position fixed n'étant pas prise en charge par IE nous sommes
obligé de le rendre en position absolute, le _ sera interprété que par IE
La petite problèmatique est que le fond slidera en même temps que le site
En cours de recherche de solution */
_position:absolute;
/* FIN HACK*/
position:fixed; /* On fixe sa position sur l'écran avec top et left ci-dessous */
top:0;
left:0;
height:100%; /* Hauteur du bloc */
width:100%; /* Largeur du bloc */
overflow:hidden; /* On efface tout ce qui peux dépasser :) */
background:#000000; /* On lui attribut une couleur de fond noire, opacity sera gérée par jQuery */
/* couplé avec position : permettra de placer ce bloc au dessus du site
A modifier si vous utilisez déjà un z-index dans votre site
Si vous modifiez celui-ci, incrémenter aussi "#Popup" */
z-index:1000;
}
CSS du bloc "Popup"
"Popup" qui correspond au conteneur principal qui contiendra l'ensemble de nos éléments.
CODE CSS
#Popup {
display:none; /* On cache le bloc*/
position:fixed; /* On fixe sa position */
_position:absolute; /* hack for internet explorer 6*/
z-index:1500;
/* Ci-dessous est juste pour le design du bloc */
background-color: #000;
border:7px #000 solid;
text-align:justify;
padding:-10px;
-moz-border-radius : 10px; /* Bord arrondi sous Firefox*/
color:#fff;
font-family: verdana;
font-size:16px;
}
CSS du bloc "fermer"
"fermer" qui correspond au bloc visant à acquérir l'image pour fermer la lightbox.
CODE CSS
#fermer {
position:relative; /* important pour que la croix soit bien à droite */
float:right;
margin-top:-40px; /* On sort du bloc pour affichage au dessus de Popup */
margin-right:-15px;
cursor:pointer; /* Le pointeur de souris change */
}
CSS du bloc "my_logo"
"my_logo" qui correspond au bloc visant à contenir le titre de la lightbox.
CODE CSS
#my_logo {
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
margin-top:-40px; /* Pour que le titre apparaisse bien au dessus de Popup */
margin-left:-6px; /* Idem */
/* Ci-dessous est juste pour le design du bloc */
background-color:#000;
-moz-border-radius : 10px;
padding:4px;
border:1px #000 solid;
}
CSS de "contenu", "load" et "a.lightbox"
CODE CSS
/* Bloc du contenu de la lightbox ... */
#contenu {
position:absolute;
}
/* Bloc du loading ... */
#load {
display:none;
}
/* CSS sur les balises "a" ayant comme classe lightbox */
/* Le lancement des lightbox fonctionnant avec une balise "a" sans href */
a.lightbox {
/* Seul cet élément est important */
cursor:pointer;
/* ci-dessous pour le design */
font:verdana 16px #fff;
padding:4px;
border:1px #ff0000 dotted;
background-color:#ffffff;
color:#ff0000;
}
Maintenant que nous avons spécifier les classes CSS de chacun de nos blocs nous pouvons passer à la construction de notre balise "a". Comme expliqué ci-dessus je me sert de cette balise et ses attributs pour lancer notre lightbox.
Construction de la balise "a"
Voici un exemple de balise utilisée, vous remarquerez qu'il n'y a pas d'attribut "href".
Voyons ci-dessous les attributs utilisés :
CODE HTML
/* "title" - Titre que prendra votre lightbox */
title="choisissez un titre ..."
/* "rel" peu prendre la valeur image ou frame,
une autre valeur affichera la lightbox d'erreur */
rel="frame"
rel="image"
/* "name" est le chemin de l'élément que vous souhaitez afficher */
name="images/mon_image.jpg"
name="ma_page.html"
/* Il va de soit que si vous mettez rel="image" vous devez mettre une image dans "name"
Et vice versa, si vous mettez rel="frame" vous devez mettre une page html, php ou autre dans "name" */
/* "value" est à utiliser uniquement si vous utilisez rel="frame"
il permet de spécifier la hauteur et la largeur de votre box pour les pages html, php etc.
Ce paramètres est optionnel, si vous ne le renseignez pas la box prendra une valeur de taille
par défaut -> value="largeur?hauteur" */
value="800?600"
Attaquons-nous à jQuery - Outch ;)
Avant de balancer du code brut de pomme, essayons de voir un peu comment cela va se passer
De quoi avons nous besoin :
- Une fonction lors du clic sur une balise "a"
- Une fonction pour fermer la lightbox
- Un script qui analyse les images chargées pour les afficher au mieux
- Un script qui va charger la Popup au centre de l'écran
- Quelques effets funky ;)
- ...
Allons-y commençons à construire notre script ;)
Script - Jquery
Je vais essayer de commenter un maximum le code jQuery, n'hésitez pas à venir en parler sur le forum si vous rencontrez des problèmes, ou si vous souhaitez apporter des modifications. Il s'agit de mon deuxième ou troisième scripts jQuery, j'ai pu facilement faire des erreurs :)
CODE JAVASCRIPT
/*
LIGHTBOX TTM V0.2 PAR SKY DE TUTOMANIA.COM
Auteur : Xavier FRACHOT (sky@tutomania.com)
*/
$(document).ready(function() { /* Dès que le DOM est prêt */
$('a.lightbox').click(function() { /* Lorsque que l'on clique sur un lien "a" ayant comme class lightbox */
var typeElement = $(this).attr("rel"); /* On récupère avec attr() ce que contient l'attribut rel */
/* On va charger tout de suite le loader sans l'afficher */
$("#load").html("
");
/* La on l'affiche avec un effet fade */
$("#load").fadeIn("fast");
if( typeElement == "image") { /* Si rel="image" */
/* On récupère avec attr() ce que contient l'attribut name */
var image = $(this).attr("name");
/* On déclare une variable photo */
var photo;
/* Qu'on attribut à une image */
photo = new Image();
/* Qui a pour source ce qui a écrit dans "name" */
photo.src = image;
/* On récupère avec attr() ce que contient l'attribut title */
var title = $(this).attr("title");
/* On charge l'image, tant que celle ci n'est pas chargée on exécute pas le reste */
/* Idem que $(photo).load(function() { ... */
$(photo).bind('load', function() {
/* On commence à analyser l'image et son futur affichage */
/* on récupère la taille de fenêtre actuelle du visiteur en jQuery moins 100 px */
var axe_x = $(window).width() - 100;
var axe_y = $(window).height() - 100;
/* on récupère la taille de l'image avec LargeurImg et HauteurImg */
var LargeurImg = photo.width;
var HauteurImg = photo.height;
/* Script pour redimensionner les images trop grandes en hauteur et/ou largeur */
if (LargeurImg > axe_x)
{
HauteurImg = HauteurImg * (axe_x / LargeurImg);
LargeurImg = axe_x;
if (HauteurImg > axe_y)
{
LargeurImg = LargeurImg * (axe_y / HauteurImg);
HauteurImg = axe_y;
}
}
else if (HauteurImg > axe_y)
{
LargeurImg = LargeurImg * (axe_y / HauteurImg);
HauteurImg = axe_y;
if (LargeurImg > axe_x)
{
HauteurImg = HauteurImg * (axe_x / LargeurImg);
LargeurImg = axe_x;
}
}
// FIN SCRIPT IMAGE
/* C'est parti !!!! */
/* On cache en fade out le bloc de loading */
$("#load").fadeOut("fast");
/* On met une opacité de 0.8 au bloc "bgPopup" */
$("#bgPopup").css({ "opacity": "0.8" });
/* et on l'affiche en fade */
$("#bgPopup").fadeIn("normal");
/* Ici on imbrique deux animate() en callback */
/* La première function animate() va redimensionner la largeur de #Popup à celle de l'image précédemment chargée */
/* La deuxième function animate() va redimensionner la hauteur fr #Popup à celle de l'image précédemment chargée */
$("#Popup").animate({"width" : ""+LargeurImg+"px"}, 300, function () {
$("#Popup").animate({"height" : ""+HauteurImg+"px"}, 300, function () {
/* On appel la function de centrage de popup - disponible ci-dessous */
popupcentre();
/* on redimensionne la barre de titre on affiche le titre */
$("#my_logo").css({"width":""+LargeurImg-50+"px"});
$("#my_logo").fadeIn("normal");
$("#my_logo").html(" 
"+title+" ");
/* On affiche la popup en fade */
$("#Popup").fadeIn("normal");
/* On efface le bloc de loading */
$("#load").fadeOut("fast");
/* On affiche le contenu image souhaitée*/
$("#contenu").html("![]("+image+")
");
$("#contenu").fadeIn("normal");
/* On cache les balises object car sous ie il y a un problème de transparence :) */
$("object").hide();
});
});
// FIN CHARGEMENT bind('load')
});
/* FIN DU SCRIPT SI REL EST IMAGE */
}
/* Si rel="frame" */
else if(typeElement == "frame"){
/* On récupère les infos des attributs title, name, et value */
var title = $(this).attr("title");
var ma_frame = $(this).attr("name");
var vars = $(this).attr("value");
/* Si value n'est pas défini on met des valeurs par défaut */
if(!vars ) {
var largeur = 500;
var hauteur = 500;
}else{
/* sinon on split le champ value ce qui nous retourne un tableau avec deux éléments largeur et hauteur */
var mes_vars = vars.split('?');
var largeur = mes_vars[0];
var hauteur = mes_vars[1];
}
/* COMME POUR IMAGE CI DESSUS */
$("#load").fadeOut("fast");
$("#bgPopup").css({ "opacity": "0.8" });
$("#bgPopup").fadeIn("normal");
$("#Popup").animate({"width" : ""+largeur+"px"}, 300, function () {
$("#Popup").animate({"height" : ""+hauteur+"px"}, 300, function () {
popupcentre();
$("#my_logo").css({"width":""+largeur-50+"px"});
$("#my_logo").fadeIn("normal");
$("#my_logo").html(" "+title+" ");
$("#Popup").fadeIn("normal");
$("#load").fadeOut("fast");
$("#contenu").fadeIn("normal");
/* SEUL ICI CHANGE, CHARGEMENT DU CONTENU FRAME DANS UNE IFRAME */
/* IFRAME AVEC UN overflow vertical , overflow horizontal caché */
$("#contenu").html("");
$("object").hide();
});
});
/* FIN DU SCRIPT SI REL EST FRAME */
}
/* SI REL N'EST NI UNE IMAGE NI UNE FRAME ON AFFICHE UNE LIGHTBOX D'ERREUR */
else{
$("#load").fadeOut("fast");
$("#bgPopup").css({ "opacity": "0.8" });
$("#bgPopup").fadeIn("normal");
$("#Popup").animate({"width" : "300px"}, 300, function () {
$("#Popup").animate({"height" : "300px"}, 300, function () {
popupcentre();
$("#my_logo").css({"width":"250px"});
$("#my_logo").fadeIn("normal");
$("#my_logo").html(" ERREUR ! ");
$("#Popup").fadeIn("normal");
$("#contenu").fadeIn("normal");
$("#contenu").html("
");
$("object").hide();
});
});
/* FIN DU SCRIPT REL IMAGE / FRAME / ERROR */
}
/* FIN click(function... */
});
/* FERMETURE DE LA LIGHTBOX EN CLIQUANT SUR LE BACKGROUND */
$('#bgPopup').click(function() {
$("#bgPopup").fadeOut("normal");
$("#Popup").fadeOut("normal");
$("#my_logo").fadeOut("normal");
$("#contenu").hide();
/* On réaffiche les balises objects notemment pour les videos Youtube */
$("object").show();
});
/* FERMETURE DE LA LIGHTBOX EN CLIQUANT SUR LE BACKGROUND (X) */
$('#fermer').click(function() {
$("#bgPopup").fadeOut("normal");
$("#Popup").fadeOut("normal");
$("#my_logo").fadeOut("normal");
$("#contenu").hide();
$("object").show();
});
// CENTRAGE DE LA BOX
function popupcentre(){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var popupWidth = $("#Popup").width();
var popupHeight = $("#Popup").height();
var alih = windowWidth/2-popupWidth/2;
var alig = windowHeight/2-popupHeight/2;
$("#Popup").animate({"top":""+alig+"px", "left":""+alih+"px"}, 500, 'easeOutElastic');
// FIN CENTRAGE DE LA BOX
}
// FIN DOM READY
});
Sondage du mois
La connaissance ne vaut que si elle est partagée par tous
Utilisateurs en ligne
Administrateur - Newsers - Rédacteurs - VIP - Membres - Bots
Anniversaire du jour
Amis en ligne (0)
La bifle - Extrait
