adHoc.71site.fr

→ Galerie Thème Tiles (tuiles)

Pourquoi ce thème en premier ? C'est tout simplement celui que je préfère et que j'utilise largement sur d'autres sites sous adHoc ( https://cuirs.71site.fr/  https://www.lacompagniedeselles.fr/ ) : Il permet de mettre en place assez facilement une galerie d'images non tronquées, chaque image peut être affichée avec un des effets Lightbox et être zoomée.

Ici, il faudra déclarer des fichiers au début du code source :

 <script charset="utf-8" type="text/javascript" src="skin/unitegallery/themes/tiles/ug-theme-tiles.js"></script>
<script charset="utf-8" type="text/javascript" src="skin/unitegallery/themes/tiles/galeries_tuiles.js"></script>
 <link charset="utf-8" href="skin/unitegallery/css/UG_styleplus.css" rel="stylesheet" />

Le premier fichier ug-theme-tiles.js est celui du pack : indispensable... Le deuxième, galeries_tuiles.js (que j'ai rangé au même niveau dans skin/unitegallery/themes/tiles/) est celui qui contiendra les réglages de vos galeries pour ce thème. Le troisième, UG_styleplus.css (rangé dans skin/unitegallery/css/) est un fichier de style contenant quelques adaptations du style principal d'Unite Gallery : Ces deux derniers fichiers sont détaillés plus bas.

Ci dessous deux exemples de mise en place de ce type de galerie :

Ci-dessous, le contenu du fichier galeries_tuiles.js : vous pouvez le copier, vous en inspirer largement. D'autres options sont possibles. Voir ici : https://unitegallery.net/index.php?page=tiles-columns-options et ici : https://unitegallery.net/index.php?page=tiles-justified-options . Contactez-moi si ces pages ne sont plus à disposition.

jQuery(document).ready(function(){
jQuery("#galeries_tuileC300").unitegallery({
	tiles_type: "columns", //type tuiles : "columns" "justified" "nested"
	tile_enable_border:true, //Bordure : true false
	tile_border_width:3, //Epaisseur bordure
	tile_border_color:"#7a7a7a", //Couleur bordure
	tile_border_radius:0, //Arrondis bordure (ne fonctionne pas pour la bordure extérieure)
	tile_enable_outline: true, //Bordure extérieure : true false
	tile_outline_color:"#dddddd", //Couleur bordure extérieure
	tile_enable_shadow:true, //Ombre portée : true false
	tile_shadow_color:"#000000", //Couleur ombre portée
	tile_overlay_opacity:0.2, //Opacité au survol
	tile_overlay_color: "#111111", //Couleur au survol
	tile_show_link_icon:true, //Icone lien : true false
	tile_enable_textpanel:true, //Légende : true false
	tile_textpanel_source: "title", //Source légende "title" "desc"...
	tile_textpanel_always_on: true, //Légende toujours affichée : true false
	tiles_col_width:300, //Largeur colonne
	tiles_min_columns: 1, //nombre de colonne mini
	tiles_space_between_cols:10, //Espace entre deux colonnes
	lightbox_type: "compact", //Type de lightbox : "compact" "wide"
	lightbox_slider_image_border_width: 5, //Epaisseur bordure lightbox
	lightbox_slider_image_border_color: "#CF6D17", //Couleur bordure lightbox
	lightbox_slider_image_border_radius: 6 //Arrondis bordure lightbox
});
});

jQuery(document).ready(function(){
jQuery("#galeries_tuileJ220").unitegallery({
	tiles_type: "justified", //type tuiles : "columns" "justified" "nested"
	tiles_justified_row_height: 220, //Hauteur de base d'une ligne
	tiles_justified_space_between: 10, //Espace entre les tuiles
	tile_enable_border:true, //Bordure : true false
	tile_border_width:2, //Epaisseur bordure
	tile_border_color:"#dddddd", //Couleur bordure
	tile_border_radius:4, //Arrondis bordure (ne fonctionne pas pour la bordure extérieure)
	tile_enable_outline: false, //Bordure extérieure : true false
	tile_outline_color:"#dddddd", //Couleur bordure extérieure
	tile_enable_shadow:false, //Ombre portée : true false
	tile_shadow_color:"#000000", //Couleur ombre portée
	tile_overlay_opacity:0.4, //Opacité au survol
	tile_overlay_color: "#eeeeee", //Couleur au survol
	tile_show_link_icon:true, //Icone lien : true false
	tile_enable_textpanel:true, //Légende : true false
	tile_textpanel_source: "title", //Source légende "title" "desc"...
	tile_textpanel_always_on: false, //Légende toujours affichée : true false
	lightbox_type: "wide", //Type de lightbox : "compact" "wide"
});
});

Vous pouvez créer autant de types de réglage souhaités à condition de les différencier avec leur Id : ici #galeries_tuileC300 et #galeries_tuileJ220 . Comme ci-dessus, vous pouvez utiliser plusieurs galeries dans la même page...

Il existe aussi un autre type de tuiles : tiles_type: "nested",  testez-le... Il est un peu plus compact, mais le principe est le même, avec d'autres réglages possibles...

Ci-dessous, le contenu du fichier UG_styleplus.css : vous pouvez le copier, vous en inspirer largement. Ce sont des petites modifications du fichier unite-gallery.css. Il n'est pas forcément obligatoire, mais m'a permis de régler des détails... Il pourrait être étoffé en fonction des besoins.

/*Unite gallery*/

.ug-tile .ug-textpanel-title{
	color:#eee;
	font-size:14px;
	font-weight:bold;
}

.ug-lightbox .ug-textpanel-title,
.ug-lightbox .ug-lightbox-numbers {
	color:#eee;
	font-size: 18px;
}

.ug-lightbox-compact .ug-textpanel-title,
.ug-lightbox-compact .ug-textpanel-description,
.ug-lightbox-compact .ug-lightbox-numbers {
	color:#CF6D17;
	font-size: 18px;
}

Et enfin, ci-dessous le code à entrer afin d'afficher les images, où vous le souhaitez dans la page, ou la boîte...

<div id="galeries_tuileC300" style="display:none;">
<a href="https://pixabay.com/fr/" target="_blank">
<img alt="Rouille : vue 1" src="images/UG/petites/UG01.jpg" data-image="images/UG/grandes/UG01.jpg" style="display:none" />
</a>

<a>
<img alt="Rouille : vue 2" src="images/UG/petites/UG02.jpg" data-image="images/UG/grandes/UG02.jpg" style="display:none" />
</a>

<a>
<img alt="Rouille : vue 3" src="images/UG/petites/UG03.jpg" data-image="images/UG/grandes/UG03.jpg" style="display:none" />
</a>

<a>
<img alt="Rouille : vue 4" src="images/UG/petites/UG04.jpg" data-image="images/UG/grandes/UG04.jpg" style="display:none" />
</a>
</div><!-- fin galerie_tuileC300 -->



<div id="galeries_tuileJ220" style="display:none;">
<a href="https://pixabay.com/fr/" target="_blank">
<img alt="Rouille : vue 5" src="images/UG/petites/UG05.jpg" data-image="images/UG/grandes/UG05.jpg" style="display:none" />
</a>

<a>
<img alt="Rouille : vue 6" src="images/UG/petites/UG06.jpg" data-image="images/UG/grandes/UG06.jpg" style="display:none" />
</a>

<a>
<img alt="Rouille : vue 7" src="images/UG/petites/UG07.jpg" data-image="images/UG/grandes/UG07.jpg" style="display:none" />
</a>

<a>
<img alt="Rouille : vue 8" src="images/UG/petites/UG08.jpg" data-image="images/UG/grandes/UG08.jpg" style="display:none" />
</a>

<a>
<img alt="Rouille : vue 9" src="images/UG/petites/UG09.jpg" data-image="images/UG/grandes/UG09.jpg" style="display:none" />
</a>

<a>
<img alt="Rouille : vue 10" src="images/UG/petites/UG10.jpg" data-image="images/UG/grandes/UG10.jpg" style="display:none" />
</a>
</div><!-- fin galerie_tuileJ220 -->

Mes images sont stockées dans deux dossiers : UG/petites/ pour les vignettes et UG/grandes/ pour les images zoomables. Ces deux dossiers sont placés dans le dossier images à la racine d'adHoc. Adaptez les chemins à votre configuration, bien sûr.

Vous remarquerez que les deux Id définies dans le fichier galeries_tuiles.js se retrouvent ici.
Il n'est pas possible, dans la même page ou boîte, d'utiliser la même Id. Mais si vous souhaitez avoir deux (ou plus) galeries dans la même page avec le même réglage, il faut créer deux scripts identiques et les différencier par leur Id : par exemple #galeries_tuileC300-a et #galeries_tuileC300-b.

Pour créer un lien sur l'image (actif avec l'icône correspondante, à condition de l'avoir autorisée dans le script .js), à l'instar de la première image de chaque galerie, il suffit de "remplir" la balise [a href=...].

Les légendes, ici, sont dans la balise [img alt="...." ... /] . Il serait possible d'ajouter un autre descriptif avec une data-description="..." mais j'ai préféré simplifier...

Notez la façon dont les grandes images sont appelées : data-image=''...''

Attention ! Les éditeurs de textes dans adHoc ne gèrent pas les appels de ce type, il faudra donc revenir au code source après l'enregistrement afin de compléter le chemin des grandes images en y ajoutant l'URL de votre site... (par exemple pour ce présent site j'ai ajouté //adhoc.71site.fr/ avant le chemin des grandes images). C'est une vraie contrainte... j'en suis hélas, bien conscient...

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser cette galerie.