Abonnez vous au flux !
Abonnez vous au flux RSS de ce blog pour recevoir une notification de votre agrégateur rss lorsqu'un nouvel article est ajouté.
Top clic
Derniers articles
  1. LightBox 2 est un script JavaScript qu permet d'afficher un diaporama en plein écran sur la page courante. Il est possible de paramétrer plusieurs images qui seront affichées en appuyant sur les flèches du clavier ou en cliquant sur les flèches présentes sur l'image.
     


    Cliquez sur l'image pour afficher le résultat 'LightBox'

     

     

    Télécharger et installer LightBox 2.6

    Télécharger l'archive directement sur le site de l'éditeur

    L'archive contient un répertoire 'lightbox' que vous pouvez directement copier dans le répertoire de votre site Web. (le répertoire normalement en majuscule qui se termine par _WEB).

    Votre arborescence de répertoire doit se présenter ainsi

    Voila, pour les fichiers c'est terminé

    Déclarer le script dans la page

    Pour que Light Box puisse fonctionner vous devez intégrer les scripts dans les pages qui doivent afficher un diaporama.

    1. Dans WebDev, faites un clic droit dans votre page web et cliquez sur 'Description'
    2. Cliquez sur l'onglet avancé
    3. Dans la section 'Code HTML ajouté à l'en-tête de la page, ajoutez le code ci dessous :
              <script src="/[VOTRESITE_WEB]/lightbox/js/jquery-1.10.2.min.js"></script>
              <script src="/[VOTRESITE_WEB]/lightbox/js/lightbox-2.6.min.js"></script>
              <link href="/[VOTRESITE_WEB]/lightbox/css/lightbox.css" rel="stylesheet" />

    Ajouter une image et la rendre 'lightbox' !

    1. Ajoutez une image comme vous le faites d'habitude
    2. Dans l'onglet 'Avancé' de l'image, saisissez le code ci dessous dans la zone 'Code HTML généré avant le champ'
      <a href="/[VOTRESITE_WEB]/mon_image.png" data-lightbox="groupe_1" title="Le titre de mon image">
    3. Dans la zone 'Code HTML généré après le champ', saisissez le code suivant
      </a>
    4. Validez

    href : pointe vers l'image à utiliser dans light box. Normalement, c'est la même image qui est affiché !
    data-lightbox : Nom du groupe d'affichage. Pour effectuer un diaporama avec plusieurs images, il faut donner le même nom de groupe.
    title :  Titre de votre image. Ce titre est affiché en bas à gauche pendant le diaporama.

    Utiliser plusieurs images pour faire un diaporama

    Il suffit de faire la même opération que le point précédent en utilisant TOUJOURS le même nom pour la propriété "data-lightbox". Pour ne pas afficher toutes les images dans la page (comme dans cet article, utilise 4 images mais seulement 1 est visible pour vous) il suffit de modifier la propriété 'visible' de vos champs image.. Attention à bien cocher l'option 'Générer le code HTML du champ, même s'il est invisible' dans l'onglet avancé.

    Autres possibilités

    Ceci n'est qu'un exemple simple de mise en œuvre. Avec ces infos et de l'expérience, vous pourrez créer par exemple un modèle de champ qui contiendra soit un champ image ou soit un champ libellé HTML et quelques méthodes pour ajouter dynamiquement des images dans votre diaporama à partir d'une base de données.

    Un modèle de champ qui afficherai automatiquement une  image d'un répertoire donné et qui, lorsqu'on clic dessus afficherai toutes les autres images en diaporama.

    Et bien d'autres possibilités.. Nous pouvons vous aider à réaliser votre intégration dans votre site web. Cliquez sur le lien ci-dessous pour nous contacter.

     

    Créé le mercredi 23 octobre 2013 - 09:29 - Mis à jour le mardi 01 août 2023 - 09:29

  2. Commentaires

    Marche pas avec IE10 !!!
    mercredi 13 novembre 2013 - 00:00 - dominique
    Si quelqu'un arrive à le faire tourner avec IE10 je suis preneur.

  Copyright Service Info 76 - 2018 - Réalisé avec WEBDEV de PC SOFT - Tous droits réservés