Imprimer

Lightbox (zoom image)

Écrit par Super Utilisateur. Publié dans Non catégorisé

La Visionneuse lightbox vous permet de visualiser des images, du contenu HTML et multi-média sur une superposition noire grisé sans avoir à quitter la page en cours.

Utilisez les balise HTML5 personnalisés data-lightbox pour attribuer des données à la visionneuse et l'activer .

Par exemple
:

<a data-lightbox="on" href="http://www.gesci.fr/informatique/images/stories/magasin-informatique-realmont-full-web.jpg"><img src="/http://www.gesci.fr/informatique/images/stories/magasin-informatique-realmont-thumb-web.jpg" width="193" height="145" alt="" /></a>

resultat (cliquer pour voir) :


Si vous voulez créer un groupe d'image ou de vidéo utiliser le parametre  group

Par exemple :
<a data-lightbox="group:mygroup" href="/image1_lb.jpg"><img src="/image1.jpg" width="180" height="120" alt="" /></a>
<a data-lightbox="group:mygroup" href="/image2_lb.jpg"><img src="/image2.jpg" width="180" height="120" alt="" /></a>

Vous pouvez definir de nombreux paramètres suplémentaire

Par exemple pour voir google :

<a data-lightbox="transitionIn:elastic;transitionOut:elastic;" href="http://www.google.fr">Google</a>

Voici la liste des parametre commun :
  • titlePosition - Où le titre doit-il se placer ? (float, outside, inside or over)
  • transitionIn - Style d'ouverture. (fade, elastic, or none)
  • transitionOut - Style de fermeture (fade, elastic, or none)
  • overlayShow - Fond gris oui true ou non false
  • width - Largeur en pixel
  • height - Hauteur en pixel
  • padding - Espacement en pixel