[BBCode] Utilisation du plugin jQuery Fancybox.

[cabot]

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é 564 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 :
     

     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 :
     

     Code : Tout sélectionner

     [fbox]http://player.vimeo.com/video/89491724[/fbox]

   • Vidéo Dailymotion :
     

     Code : Tout sélectionner

     [fbox]http://www.dailymotion.com/embed/video/x1bgl71[/fbox]

   • Musique Soundcloud :
     

     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 :
     

     Code : Tout sélectionner

     [fbox]http://farm6.staticflickr.com/5546/9495386712_6cbb2d3e51_k.jpg[/fbox]

   • Présentation Slideshare :
     

     Code : Tout sélectionner

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

Plugin fancyBox