Wubijacq.comLe Colorbox de Jack Moore
Un lightbox personnalisable
Créé en 2009, Colorbox n' était pas adapté pour être lu aussi sur les appareils mobiles. Le jquery lightbox était déjà très personnalisable. Maintenant c' est un jquery lightbox responsive léger et toujours personnalisable. Il permet la visualisation d' une gallerie de photos tout simplement ou d' une gallerie de screenshots pour un tutoriel par exemple.
Il est possible d' entrer un texte descriptif pertinent d' une trentaine de caractères dans le lightbox.
Dans ce tuto je vais vous expliquer comment installer en particulier :
example3
J'ai ajouté un dossier que j' ai nommé "img" où j' ai placé mes différentes images ( de grandes images pour le lightbox, les petites images pour la gallerie). Le plus pratique est de placer aussi jquery.colorbox.js dans ce dossier.
Montrer une gallerie
Modifier le page index.html pour configurer cette gallerie
Chaque petite image de la gallerie (vignettes) devra avoir les mêmes dimensions pour avoir un meilleur alignement et sera accompagnée d' un petit intitulé (voir la technique de W3C)
Vous pouvez vous en inspirer pour votre gallerie. Personnellement, j' aurai placé l' intitulé en haut de la petite image.
La fenêtre Popup Modale
Appelée communément lightbox
"img src" affiche uniquement les images des vignettes
Le déclencheur
L' attribut "class" est relié à un script qui lance la fenêtre modale.
HTML<a class="group3" href="" title="">
$(document).ready(function(){
$(".group3").colorbox({rel:'group3', transition:"none", width:"100%", height:"100%"});Entrer du texte dans le lightbox
Un panneau descriptif dans le coin en haut à gauche qui disparait au survol de la souris
Il faudra modifier #cboxTitle dans "colorbox.css"
#cboxTitle{position: absolute;
top: -1px;
left: 3px;
border-radius:10px;
color: #ccc;
font-size: 110%;
font-weight: bold;
background:#333;
height:;
width:60%;
padding:10px;
opacity:.3;
}
#cboxTitle:hover {opacity:0};
Les plus téléchargés
Les DEBs XnViewMP-linux et les MSI IsoRecorder et Gpick sont actuellement les logiciels les plus demandés sur wubijacq.com
