[BBCode] Utilisation du plugin jQuery Fancybox.

Répondre
Avatar du membre
cabot
Administrateur du site
Messages : 123
Enregistré le : 03 nov. 2011, 11:29
Contact :

[BBCode] Utilisation du plugin jQuery Fancybox.

Message par cabot » 06 avr. 2014, 15:09

Ce BBCode permet d'afficher toutes sortes de médias (vidéo, image, son, slideshare, etc) dans une fenêtre en popup.

  1. Ajout du dossier contenant les fichiers.

    Télécharger cette archive et placer le dossier fancybox/ à la racine du forum :
    fancybox.zip
    (42.05 Kio) Téléchargé 402 fois
  2. Modification du style.

    Ouvrir overall_footer.html, trouver :

    Code : Tout sélectionner

    </body>
    Si la bibliothèque jQuery n'est pas utilisée, ajouter avant :

    Code : Tout sélectionner

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script src="{ROOT_PATH}fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
    Si la bibliothèque jQuery est déjà utilisée dans le style, ajouter uniquement :

    Code : Tout sélectionner

    <script src="{ROOT_PATH}fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
  3. Création du BBCode.

    Utilisation du BBCode :

    Code : Tout sélectionner

    [fbox]{URL}[/fbox]
    Code HTML de remplacement :

    Code : Tout sélectionner

    <a href="{URL}" class="fancybox fancybox.iframe"><img src="./fancybox/icone_play.png" alt="Cliquez pour afficher le média" title="Cliquez pour afficher le média" /></a>
    Ligne d’aide :

    Code : Tout sélectionner

    [fbox]url du média embarqué[/fbox]
  4. Exemples d'utilisation.
    • Vidéo Youtube :
      Cliquez pour afficher le média

      Code : Tout sélectionner

      [fbox]http://www.youtube.com/embed/w-XO4XiRop0[/fbox]
      ou pour lecture automatique de la vidéo :

      Code : Tout sélectionner

      [fbox]http://www.youtube.com/embed/w-XO4XiRop0?autoplay=1[/fbox]
    • Vidéo Vimeo :
      Cliquez pour afficher le média

      Code : Tout sélectionner

      [fbox]http://player.vimeo.com/video/89491724[/fbox]
    • Vidéo Dailymotion :
      Cliquez pour afficher le média

      Code : Tout sélectionner

      [fbox]http://www.dailymotion.com/embed/video/x1bgl71[/fbox]
    • Musique Soundcloud :
      Cliquez pour afficher le média

      Code : Tout sélectionner

      [fbox]https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/141391420&auto_play=false&hide_related=false&visual=true[/fbox]
    • Image :
      Cliquez pour afficher le média

      Code : Tout sélectionner

      [fbox]http://farm6.staticflickr.com/5546/9495386712_6cbb2d3e51_k.jpg[/fbox]
    • Présentation Slideshare :
      Cliquez pour afficher le média

      Code : Tout sélectionner

      [fbox]http://www.slideshare.net/slideshow/embed_code/27101904[/fbox]
Plugin fancyBox

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité