Facebox : lightbox avec JQuery
ARCHIVE
Une lightbox permet d'afficher un contenu dans une div à l'intérieur de votre site, une sorte de "pop-in", en quelques sortes. Il en existe de nombreuses sur le net, et parmi celles ci j'utilise souvent facebox ( cf. http://defunkt.io/facebox/ ). Cette lightbox utilise Jquery. Vérifiez donc que vous avez bien chargé la libraire jquery au préalable.
Voici comment la mettre en place.
1) Téléchargez l'archive facebox
2) Insérez, entre les balises <head> et </head> :
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/> <script src="/facebox/facebox.js" type="text/javascript"></script>3) Ajoutez, entre les balises <body> et </body> : $(document).ready(function($) { $('a[rel*=facebox]').facebox() ; }) Et c'est tout. Pour appeler votre lightbox facebox, il vous suffira de faire : Pour faire apparaître une div en lightbox :
<a href="#id_du_div" rel="facebox">text</a>Pour charger un fichier externe (ajax) :
<a href="remote.html" rel="facebox">text</a>Pour charger une image dans la lightbox :
<a href="images/stairs.jpg" rel="facebox">text</a>Vous pouvez également spécifier directement en onclick de votre lien : Du texte, simple :
jQuery.facebox('something cool');Des fichiers distants :
jQuery.facebox({ ajax: 'remote.html' });Image
jQuery.facebox({ image: 'images/stairs.jpg' });Un élément de la page
jQuery.facebox({ div: '#box' });
Tu aimeras aussi...
Un nom de domaine, combien ça coûte?
Basiquement, un nom de domaine, tu l'achètes pour que tout le monde se souvienne comment aller sur ton site. Car une adresse ip (pour peu qu'elle soit en...
Les jeux en ligne par navigateur, du vintage web?
On voit pas mal de jeux flash un peu partout: y'en a même certains qui s'introduisent en bourse (zynga, king... ne rions pas.), et d'autres débarquent ...
Les MFA, ou comment devenir riche sur internet
J'ai récemment découvert un truc magique-sur-le-papier, qui pollue notre bel internet de tous les jours (parfois même sans qu'on s'en rende compte): le...
OpenShift - Héberge ton blog ghost gratos
OpenShift (cf. https://openshift.redhat.com/) ne se limite pas qu'à Ghost, et propose une foultitude (sisi) de "cadridges", dont wordpress pour ne citer ...
Peut on encore trouver des concepts web qui marchent?
J'ai toujours vu le web comme une Amérique d'antan, avec son rêve américain sauce virtuelle: trouver une idée, se lancer, la mettre en place et se réjo...
Un dd de 4to, c'est moins de 200€
Dans mes installations NAS/plex and co. je réfléchis (beaucoup ^) à une meilleure façon de gérer le stockage de mes fichiers ultra-légaux. On a, bien sûr...
Pourquoi il faut tolérer la pub sur internet
J'entends souvent des gens (ah... les gens...) critiquer la pub sur internet: "C'est chiant", "Comment ils savent que j'aime ça?", "Tiens je vais mettre ...
J'ai testé PulseHeberg
Tout se passait bien. Ou presque. Retour sur une expérience qui m'a fait aller voir ailleurs (chez digitalocean, en fait - cf. http://bit.ly/1byjTW0). ...
Photoshop - ils transforment un mannequin en père noël
Vous souvenez vous de la vidéo de cette mannequin qui se faisait photoshoper pour mieux se rapprocher des stéréotypes-impossibles de notre société idyll...
Doctor Who - Un nouveau trailer pour l'épisode spécial noël 2013
On a déjà eu un petit aperçu vidéo de l'épisode spécial noël 2013 de Doctor who, ainsi que quelques photos exclusives. Mais il y a peu, un nouveau tr...
When you click on links to various merchants on this site and make a purchase,
this can result in this site earning a commission.
Affiliate programs and affiliations include, but are not limited to,
the eBay Partner Network and Amazon.