Plugin Lightbox V1.0 pour dotclear2
23 août 2006Lightbox JS v1.0 pour DotClear 2 est l'adaptation en plugin DotClear du script de visualisation dynamique du même nom. Il permet d'ouvrir une image en plein écran avec un effet animé impressionnant. Il permet aussi d'afficher plusieurs photos en mode album photo, de se déplacer dans l'album via les touches du clavier, d'afficher une légende etc. Pour plus d'informations, allez voir sur le site de l'auteur en suivant le lien au bas de la page.
Fonctionement visible ici
Comment l'installer
Code à mettre dans votre le fichier _head.html de votre thème:
[javascript] <link rel="stylesheet" href="dc_app_url/dotclear2/plugins/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="dc_app_url/dotclear2/plugins/lightbox/js/prototype.js"></script> <script type="text/javascript" src= "dc_app_url/dotclear2/plugins/lightbox/js/scriptaculous.js?load=effects"> </script> <script type="text/javascript" src="dc_app_url/dotclear2/plugins/lightbox/js/lightbox.js"></script>
Comment l'utiliser ?
En mode XHTML
Ajouter l'attribut rel="lightbox" à vos lien pointant vers votre image devant s'ouvrir avec l'effet LightBox. Par exemple :
[html4strict] <a href="/dotclear2/public/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
Option: Vous pouvez utiliser l'attribut title pour donner une légende à l'image.
Si vous voulez définir un ensemble d'images à visionner en mode album photo, suivez l'étape précédente en ajoutant le nom de votre album entre crochet dans l'attribut rel. Par exemple :
[html4strict] <a href="/dotclear2/public/images/image-1.jpg" rel="lightbox[album1]">image #1</a> <a href="/dotclear2/public/images/image-2.jpg" rel="lightbox[album1]">image #2</a> <a href="/dotclear2/public/images/image-3.jpg" rel="lightbox[album1]">image #3</a>
Exemple de code avec la mise en forme des images por la positionner dans le texte
[html4strict] <a href="/dotclear2/public/image/image.jpg" rel="lightbox" title="mon titre"> <img src="/dotclear2/public/image/imageminiature_tn.jpg" alt="" style="margin: 15px; float: left; display: block;" /></a>
Plus d'informations sur l'utilisation du script sur le site officiel de l'auteur : www.huddletogether.com
Plugin réalisé par Adrian Sauzade d'après le plugin pour DC1 réalisé par Nicolas Demange aka Alconis
''
Modif du 11 février 2007 :''
Les plugins officiels dotclear sont disponible ici le plugin lightbox à été revu et amélioré par monoceros01.
- Par Adrian Sauzade
- - Dotclear2
- - Tags :













