[BBCode] Utilisation du plugin jQuery Fancybox

Message par **cabot** » 05 juin 2021, 16:21

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.

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>

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]
```

Exemples d'utilisation.

Vidéo Youtube :
Afficher le média
Code : Tout sélectionner
```
[fbox]https://www.youtube.com/watch?v=54LEywabkl4[/fbox]
```
Vidéo Vimeo :
Afficher le média
Code : Tout sélectionner
```
[fbox]https://vimeo.com/89491724[/fbox]
```

Google map :
Afficher le média

Code : Tout sélectionner

[fbox]http://maps.google.com/?ll=48.85796,2.295231&spn=0.003833,0.010568&t=h&z=17[/fbox]

Google map / Street view :
Afficher le média

Code : Tout sélectionner

[fbox]http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56[/fbox]

Image :
Afficher le média

Code : Tout sélectionner

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

Vidéo MP4 :
Afficher le média
Code : Tout sélectionner
```
[fbox]https://cabotweb.fr/medias/wildlife.mp4[/fbox]
```

Plugin fancyBox