Page 1 sur 1

[BBCode] Utilisation du plugin jQuery Fancybox

Posté : 05 juin 2021, 16:21
par cabot
Ce BBCode permet d'afficher toutes sortes de médias (vidéo, image, son, etc.) dans une fenêtre modale à l'aide du plugin Fancybox.

Sujet mis à jour le 15 juin 2021.
  1. Modification du style.

    Ouvrir overall_header.html, trouver :

    Code : Tout sélectionner

    <!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
    Ajouter avant sur une nouvelle ligne :

    Code : Tout sélectionner

    <link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
    Ouvrir overall_footer.html, trouver :

    Code : Tout sélectionner

    <!-- EVENT overall_footer_after -->
    Ajouter après sur une nouvelle ligne :

    Code : Tout sélectionner

    <script async src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
    <script>
    $(function() {
    	$('.fancybox-media').fancybox({
    		openEffect  : 'none',
    		closeEffect : 'none',
    		helpers : {
    			media : {}
    		}
    	});
    });
    </script>
  2. Création du BBCode.

    Utilisation du BBCode :

    Code : Tout sélectionner

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

    Code : Tout sélectionner

    <a class="fancybox-media" data-fancybox href="{URL}"">Afficher le média</a>
    Ligne d’aide :

    Code : Tout sélectionner

    [fbox]url du média embarqué[/fbox]
  3. Exemples d'utilisation.
Plugin fancyBox