news_default

Colorbox est un plugin JQuery permettant d’afficher une lightbox (ou popup avancé) sur votre page internet. L’intérêt des lightbox est que, contrairement au popup basique en javascript, celles-ci ne seront pas bloquées par les navigateurs. Pourquoi utiliser Colorbox ?

  • – Très simple à mettre en place
  • – Choix entre divers styles de lightbox
  • – Il supporte les images, les scripts ajax, les adresses internet…
  • – Il est vraiment très léger, la version compressée fait à peine 10 ko
  • – Il est simple de modifier le style de la lightbox car il est géré en css
  • – Il est paramétrable, ce qui permet de ne pas toucher au code pour des modifications simples
  • – Possibilité de pré-charger les images
  • – Valide W3C
  • – Testé sous Firefox 3+, Safari 3+, Opera 9+, Chrome, Internet explorer 6+
Pour installer ce plugin, copiez/collez le fichier javaScript jquery.colorbox.js et liez-le à votre page HTML/PHP entre les balises <head></head>
<script type="text/javascript" src="jquery.colorbox.js"></script>
Ensuite, choisissez un des thèmes, vous avez le choix entre 5 styles différents, et copiez/collez le fichier css colorbox.css dans votre dossier, puis liez-le à votre page HTML/PHP, toujours entre les balises <head></head>
<link href="colorbox.css" rel="stylesheet" media="screen" />
Copiez/collez le dossier des images et vérifiez dans le fichier colorbox.css que les chemins des images soient corrects. Le plugin est installé, maintenant il va falloir appeler la fonction colorbox, pour cela, dans votre fichier HTML/PHP et entre les balises <head></head>, placez ce petit script :
<script type="text/javascript">
$(document).ready(function(){
    $("a.zoom").colorbox();>
}) ;
</script>
Traduction : pour tous les liens <a> ayant la classe « zoom », on appel la fonction colorbox(). Dans votre code HTML, il ne reste plus qu’à appliquer ajouter la classe « zoom » sur tous les liens que vous souhaitez ouvrir avec une lightbox.
<a href="lien_image" class="zoom">Mon lien</a>
Vous avez la possibilité de modifier de nombreux paramètres, comme la transition, c’est-à-dire l’effet d’ouverture de la lightbox, par défaut transition prend la valeur élastique. La vitesse d’ouverture, le titre, la hauteur, la largeur sont aussi modifiables, ainsi que le nom des boutons précédent, suivant et fermer. Vous pouvez télécharger le plugin à cette adresse : http://colorpowered.com/colorbox/ Bon développement !

Laisser un commentaire