Widget Photo
But : afficher les miniatures des dernières photographies ajoutées dans le CEL et rendues publiques. Cliquer dessus permet de les afficher en plus grand et de les faire défiler.
Ce widget permet d'afficher des miniatures des dernières images du CEL, sous forme de mosaïque. La dernière image est affichée en plus grand format. En cliquant sur une des vignettes, un diaporama s'ouvre pour afficher les images en grand format.
Permalien
https://www.tela-botanica.org/widget:cel:photoIntégration dans votre site
Pour intégrer ce widget sur votre site, copiez et collez le code ci-dessous :
<div id="galerie-cel-1">
<!-- Javascript : bibliothèques -->
<script type="text/javascript" src="""https://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"""></script>
<script type="text/javascript" src="""https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js"""></script>
<!-- Feuilles de styles -->
<link rel="stylesheet" type="text/css" href="""https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css""" media="screen" />
<link rel="stylesheet" type="text/css" href="""https://www.tela-botanica.org/widget:cel:modules/photo/squelettes/css/photo.css""" media="screen" />
<script type="text/javascript">
$.getJSON("""https://www.tela-botanica.org/widget:cel:photo?mode=ajax&callback=?""", function (galerie) {
$("#galerie-cel-1").append(galerie.contenu);
});
</script>
</div>
Paramètres d'affichage
- extra = 1 ou 0 [par défaut vaut 1] : permet d'indiquer si on veut afficher ou cacher la dernière image sous forme d'une vignette de taille plus importante au bas du widget.
- vignette = [0-9]+,[0-9]+ [par défaut vaut 4,3] : permet d'indiquer avec la première valeur avant la virgule le nombre de colonnes de vignettes et avec la seconde valeur (celle après la virgule) le nombre de lignes. La valeur par défaut "4,3" signifie 4 colonnes de vignettes sur 3 lignes.
- titre = * [par défaut est vide] : permet d'indiquer un titre particulier au widget. Le titre doit être encodé et contenir des entités html à la place des caractères accentués et spéciaux. Utiliser l'outil présent sur le site de neodiffusion.fr pour encoder vos titres. Vous pourrez récupérer la valeur : URLencode
- rss = [0|1] [par défaut vaut 1] : permet d'indiquer si l'on veut que le lien vers le flux rss et l'icone associée aparaissent (1 pour oui, 0 pour non)
- id = [0-9]+ [par défaut vaut "1"] : permet d'indiquer un identifiant spécifique au widget. Utiliser ce paramètre pour inclure plusieurs widgets Photo au sein de la même page html en indiquant un id distinct pour chacun d'entre eux.
- mode_zoom = [fancybox|fenetre]+ [par défaut vaut "fancybox"] : permet d'indiquer le mode d'affichage utilisé lors que l'agrandissement des photo, par défaut la pop in fancybox est utilisée. Pour des widgets de petites largeur qui sont inclus en mode iframe, l'utilisation de la valeur fenetre est conseillée
- mode_eflore = 1 ou 0 [par défaut vaut 0] : permet l'affichage en mode eflore, avec des filtres par organe.
Paramètres de filtrage
- dept : permet d'indiquer un code départemental.
- commune : permet d'indiquer un nom de commune.
- date : permet d'indiquer la date de prise de photo.
- utilisateur : permet de choisir l'auteur des photos à l'aide de son adresse mail.
- taxon : permet d'indiquer le nom scientifique de l'espèce.
- tag : permet de choisir les photos qui sont taguées avec un terme (tag=plantnet), plusieurs termes associés (tag=plantnetETfeuille) ou plusieurs termes (tag=feuilleOUrameau)
- projet : permet de choisir les photos liées à une observation qui a pour mots-clés un terme (projet= AtelierRubus), plusieurs termes associés (projet=Flore de CosteETÀ confirmer) ou plusieurs termes (projet= AtelierRubusOUFlore de Coste)
- commentaire : permet de choisir les photos commentées par le(s) terme(s) choisi(s).
Ces paramètres peuvent être combinés à l'aide de & : ?critere1=valeur1&critere2=valeur2.
ex. https://www.tela-botanica.org/widget:cel:photo?dept=34&tag=feuille&vignette=15,10&extra=0
Exemples
Afficher les photos du CEL :
<!-- Javascript : bibliothèques -->
<script type="text/javascript" src="""https://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"""></script>
<script type="text/javascript" src="""https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js"""></script>
<!-- Feuilles de styles -->
<link rel="stylesheet" type="text/css" href="""https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css""" media="screen" />
<link rel="stylesheet" type="text/css" href="""https://www.tela-botanica.org/widget:cel:modules/photo/squelettes/css/photo.css""" media="screen" />
<div id="galerie-cel-2" style="width:310px;">
<script type="text/javascript">
$.getJSON("https://www.tela-botanica.org/widget:cel:photo?mode=ajax&callback=?&id=1", function (galerie) {
$("#galerie-cel-2").append(galerie.contenu);
});
</script>
</div>
Afficher les photos taguées "Plantnet" et "feuille" :
<!-- Javascript : bibliothèques -->
<script type="text/javascript" src="""https://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"""></script>
<script type="text/javascript" src="""https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js"""></script>
<!-- Feuilles de styles -->
<link rel="stylesheet" type="text/css" href="""https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css""" media="screen" />
<link rel="stylesheet" type="text/css" href="""https://www.tela-botanica.org/widget:cel:modules/photo/squelettes/css/photo.css""" media="screen" />
<div id="galerie-cel-3" style="width:310px;">
<script type="text/javascript">
$.getJSON("""https://www.tela-botanica.org/widget:cel:photo?mode=ajax&callback=?&tag=plantnetETfeuille""", function (galerie) {
$("#galerie-cel-3").append(galerie.contenu);
});
</script>
</div>
Afficher la galerie photo du projet "Atelier rubus", avec un titre, 10x5 photos, sans afficher de grande photo :
<!-- Javascript : bibliothèques -->
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
<!-- Feuilles de styles -->
<link rel="stylesheet" type="text/css" href="https://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://www.tela-botanica.org/widget:cel:modules/photo/squelettes/css/photo.css" media="screen" />
<div id="galerie-cel-4" style="width:900px;">
<script type="text/javascript">
$.getJSON("https://www.tela-botanica.org/widget:cel:photo?mode=ajax&callback=?&projet=AtelierRubus&id=3&titre=Atelier+Rubus&extra=0&vignette=10,5", function (galerie) {
$("#galerie-cel-4").append(galerie.contenu);
});
</script>
</div>