Astuces de composition
- Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.
- Les lignes et les paragraphes sont reconnus automatiquement. Les balises <br /> saut de ligne, <p> paragraphe et </p> fin de paragraphe sont insérées automatiquement.Si les paragraphes ne sont pas reconnus ajoutez simplement quelques lignes vides.
Pour ajouter une Lightbox à vos images, ajoutez l'attribut rel="lightbox" dans le lien pour activer la Lightbox. Par exemple :
<a href="image-1.jpg" rel="lightbox">image #1</a><a href="image-1.jpg" rel="lightbox[][my caption]">image #1</a>Pour afficher une légende, utilisez l'attribut TITLE ou placez là dans la seconde paires de crochets [] de l'attribut REL.
Si vous voulez grouper des images liées, alors vous devrez inclure un nom de groupe entre [] dans l'attribut rel. Par exemple :
<a href="image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="image-2.jpg" rel="lightbox[roadtrip][caption 2]">image #2</a>
<a href="image-3.jpg" rel="lightbox[roadtrip][caption 3]">image #3</a>
Il n'y a pas de limite au nombre de collections d'images affichées par page ou au nombre d'images par collection.
Si vous voulez transformer la légende en un lien, formatez votre légende de cette manière :
<a href="image-1.jpg" rel='lightbox[][<a href="http://www.yourlink.com">View Image Details</a>]' >image #1</a>- Les liens images provenant de Gallery2 sont formatés pour une utilisation avec Lightbox2
Pour ajouter un diaporama Lightbox à vos images, ajouter l'attribut rel="lightshow[slideshowname][slide caption]" à tous vos liens. Par exemple :
<a href="image-1.jpg" rel="lightshow[show1]">image #1</a>
<a href="image-2.jpg" rel="lightshow[show1]">image #2</a>
<a href="image-3.jpg" rel="lightshow[show1]">image #3</a>
L'attrinut title est optoinnel dans les liens. L'ajout de cet attribut permet d'afficher une légende avec l'image affichée dans la Lightbox.
Il n'y a pas de limite au nombre de collections de diaporama d'images par page ou au nombre d'images dans chaque diaporama.
Si vous voulez transformer la légende en un lien, formatez votre légende de cette manière :
<a href="image-1.jpg" rel='lightshow[show1][<a href="http://www.yourlink.com">View Image Details</a>]'>image #1</a>Il ets possible d'afficher le contenu d'une page web dans une Lightbox en utilisant des iframes. Dans ce cas, l'attribut "rel" doit être réglé sur "lightframe". Il est possible de grouper le contenu (exemple :
lightframe[search][caption]) et en plus de cela, il est possible de contrôler certaines des propriétés de l'iframe. Il est possible de controler la taille de la Lightbox en précisant les propriétés "width", "height" et "scrolling" de l'iframe. Les propriétés sont séparées du groupe de nom par|, par exemplelightframe[search|width:100px;][caption]. Si aucun groupement n'est effectué,|est toujours utilisé sous la formelightframe[|width:100px;]. Les propriétés doivent toutes être au format "propriété: valeur;" (notez le point virgule à la fin). Si aucune propriété de l'iframe n'est précisée, alors la largeur et la hauteur par défaut seront utilisées (400 px). Voir ci-dessous pour plus d'exemples.Exemple simple :
<a href="http://www.google.com" rel="lightframe">Search google</a>Exemple groupés :
<a href="http://www.google.com" rel="lightframe[search][caption]">Search google</a>
<a href="http://www.yahoo.com" rel="lightframe[search]">Search yahoo</a>Exemple de comment contrôler les propriétés d'une iframe :
<a href="http://www.google.com" rel="lightframe[|width:400px; height:300px; scrolling: auto;][caption]">Search google</a>Controlling iframe property when grouped example:
<a href="http://www.google.com" rel="lightframe[search|width:400px; height:300px; scrolling: auto;]">Search google</a>
<a href="http://www.yahoo.com" rel="lightframe[search|width:400px; height:300px;]">Search yahoo</a>Il est possible de montrer des bouts de code HTML dans une Lightbox s'ils sont hébergés sur le même domaine. Dans ce cas, l'attribut "rel" doit être réglé sur "lightmodal". Il est possible de grouper le contenu (exemple :
lightmodal[group][caption]) mais en plus de cela, il est possible de contrôler certaines propriétés modales. Il est possible de controler la taille de la Lightbox en précisant ses propriétés "width", "height" et "scrolling". Les propriétés sont séparées du groupe de nom par|, par exemplelightmodal[group|width:100px;][caption]. Si aucun regroupement n'est utilisé,alors le code|est toujours utilisé et le format estlightmodal[|width:100px;]. Les propriétés doivent toutes être au format "propriété: valeur;" (notez le point virgule à la fin). Si aucune propriété modale n'est précisée, alors la largeur et la hauteur par défaut seront utilisées (400 px). Voir ci-dessous pour plus d'exemples.Exemple simple :
<a href="search.php" rel="lightmodal">Search</a>Exemple groupés :
<a href="search.php" rel="lightmodal[search][caption 1]">Search</a>
<a href="search.php?status=1" rel="lightmodal[search]">Search published</a>Exemple de contrôle de la propriété modal :
<a href="search.php" rel="lightmodal[|width:400px; height:300px; scrolling: auto;][caption]">Search</a>Controlling modal property when grouped example:
<a href="search.php" rel="lightmodal[search|width:400px; height:300px; scrolling: auto;]">Search</a>
<a href="search.php?status=1" rel="lightmodal[search|width:400px; height:300px;]">Search published</a>- If you include a textual smiley in your post (see chart below), it will be replaced by a graphical smiley.



Commentaires récents