Unite Gallery - Thème Compact Grid (grille de vignettes)

→ Galerie Thème Compact Grid (grille de vignettes)

Ce thème est une variation du thème précédent. Vous pouvez vous y référer utilement ainsi qu'aux thèmes cités en référence à son propos. Ce thème particulier permet de placer une grille de vignettes en haut, en bas ou sur les côtés et de naviguer dans cette grille.

Il faudra déclarer ces 3 fichiers au début du code source :


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

Le premier fichier ug-theme-grid.js est celui du pack : indispensable... Le deuxième, galeries_compact_grid.js est celui qui contiendra les réglages de vos galeries pour ce thème. Le troisième, UG_styleplus.css est un fichier de style contenant quelques adaptations du style principal d'Unite Gallery : Seul, le deuxième est détaillé plus bas, car le troisième est strictement identique aux tutoriels précédents.

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

Ci-dessous, le contenu du fichier galeries_compact_grid.js : vous pouvez le copier, vous en inspirer largement. J'ai utilisé quasiment les mêmes réglages que pour le tutoriel précédent... D'autres options sont possibles. Voir ici : https://unitegallery.net/index.php?page=grid-options. Contactez-moi si cette page n'est plus à disposition.


jQuery(document).ready(function(){
jQuery("#galeries_compact_grid810").unitegallery({
	theme_load_panel:true, //Affiche panneau vignettes : true false
	theme_panel_position: "right", //Position panneau vignettes : top, bottom, left, right
	gridpanel_vertical_scroll: true, //Navigation vignettes verticale : true // horizontale ; false
	theme_hide_panel_under_width: 450, //Cache le panneau sous cette largeur
	gallery_width:810, //Largeur galerie
	gallery_height:450, //Hauteur galerie
	gallery_min_width: 360, //Largeur mini galerie
	gallery_min_height: 200, //Hauteur mini galerie
	gallery_autoplay:true, //Démarrage automatique : true false
	gallery_pause_on_mouseover: true, //Pause au survol : true false
	gallery_play_interval: 4000, //Durée d'affichage d'une image en milisecondes
	slider_scale_mode:"fill", //"fill" (remplit la zone en tronquant l'image) "fit" (adapte l'échelle pour que l'image s'affiche totalement) + "down" "fitvert"
	slider_transition:"fade", //Transition : "slide" "fade"
	slider_transition_speed:1000, //Durée de transition en millisecondes
	slider_transition_easing:"easeInOutQuad", //Type de transition : "easeInOutQuad" "linear" Voir ici : https://api.jqueryui.com/easings/
	slider_enable_progress_indicator:true, //Indicateur de progrès durant l'affichage : true false
	slider_progress_indicator_type:"pie", //Type d'indicateur : pie bar
	slider_progresspie_type_fill: true, //Pie disque : true // Pie couronne : false
	slider_progresspie_color1: "#B5B5B5", //Couleur1 de l'indicateur pie (fill)
	slider_progresspie_color2: "#E5E5E5", //Couleur2 de l'indicateur pie (fill)
	slider_progresspie_width: 25, //Largeur pie
	slider_progresspie_height:25, //Largeur pie
	slider_progress_indicator_align_hor:"left",  //left, center, right - progress indicator horizontal align
	slider_progress_indicator_align_vert:"top",  //top, middle, bottom - progress indicator vertical align
	slider_progress_indicator_offset_hor:50,	 //progress indicator horizontal offset 
	slider_progress_indicator_offset_vert:40,	 //progress indicator vertical offset
	slider_links_newpage: true, //lien éventuel vers nouvel onglet : true false
	thumb_width:108, //Largeur vignettes (thumbs)
	thumb_height:60, //Hauteur vignettes (thumbs)
	strip_space_between_thumbs: 10, //Espace entre vignettes
	thumb_selected_border_width: 2, //Bordure vignette active
	thumb_selected_border_color: "#B5B5B5" //Couleur bordure vignette active
});
});

jQuery(document).ready(function(){
jQuery("#galeries_compact_grid630").unitegallery({
	theme_load_panel:true, //Affiche panneau vignettes : true false
	theme_panel_position: "left", //Position panneau vignettes : top, bottom, left, right
	gridpanel_vertical_scroll: false, //Navigation vignettes verticale : true // horizontale : false
	gridpanel_space_between_arrows: 10, //Espace entre flèches, navigation horizontale seulement
	theme_hide_panel_under_width: 450, //Cache le panneau sous cette largeur
	gallery_width:630, //Largeur galerie
	gallery_height:350, //Hauteur galerie
	gallery_min_width: 360, //Largeur mini galerie
	gallery_min_height: 200, //Hauteur mini galerie
	gallery_autoplay:false, //Démarrage automatique : true false
	gallery_pause_on_mouseover: true, //Pause au survol : true false
	gallery_play_interval: 4000, //Durée d'affichage d'une image en milisecondes
	slider_scale_mode:"fit", //"fill" (remplit la zone en tronquant l'image) "fit" (adapte l'échelle pour que l'image s'affiche totalement) + "down" "fitvert"
	slider_transition:"slide", //Transition : "slide" "fade"
	slider_transition_speed:1000, //Durée de transition en millisecondes
	slider_transition_easing:"swing", //Type de transition : "easeInOutQuad" "linear" Voir ici : https://api.jqueryui.com/easings/
	slider_enable_progress_indicator:true, //Indicateur de progrès durant l'affichage : true false
	slider_progress_indicator_type:"bar", //Type d'indicateur : pie bar
	slider_progressbar_color:"#B5B5B5", //Couleur de l'indicateur bar
	slider_progressbar_opacity: 0.9, //Opacité de l'indicateur bar
	slider_progressbar_line_width: 4, //Epaisseur de l'indicateur bar
	slider_progress_indicator_align_hor:"center", //Alignement horizontal indicateur : left, center, right
	slider_progress_indicator_align_vert:"bottom", //Alignement vertical indicateur : top, middle, bottom
	slider_progress_indicator_offset_hor:0, //Marge horizontale indicateur
	slider_progress_indicator_offset_vert:0, //Marge verticale indicateur
	slider_links_newpage: true, //lien éventuel vers nouvel onglet : true false
	thumb_width:80, //Largeur vignettes (thumbs)
	thumb_height:80, //Hauteur vignettes (thumbs)
	strip_space_between_thumbs: 10, //Espace entre vignettes
	thumb_selected_border_width: 2, //Bordure vignette active
	thumb_selected_border_color: "#B5B5B5" //Couleur bordure vignette active
});
});

Les réglages sont quasi identiques à ceux du Thème Compact et ressemblent beaucoup à ceux du Thème Slider et du Thème Default, il y a beaucoup lignes semblables... Vous pouvez créer autant de types de réglage souhaités à condition de les différencier avec leur Id : ici #galeries_compact_grid810 et #galeries_compact_grid630. Vous pouvez utiliser plusieurs galeries dans la même page...

Pour le contenu du fichier UG_styleplus.css, reportez-vous au premier tutoriel : 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.

Et enfin, ci-dessous le code à entrer afin d'afficher les images, où vous le souhaitez dans la page, ou la boîte... Je n'y ai reproduit que la première occurrence car la différence entre les deux ne se situe que dans leur Id : galeries_compact_grid810 remplacé par galeries_compact_grid630 (notez dans [div id="galeries_compact_gridXXX" style="display:none;margin:0 auto;"] un margin:0 auto; dans le code afin de centrer les sliders).


<div id="galeries_compact_grid810" style="display:none;margin:0 auto;">
<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>

<a>
<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>

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

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

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

<a>
<img alt="Rouille : vue 14" src="images/UG/petites/UG14.jpg" data-image="images/UG/grandes/UG14.jpg" style="display:none" />
</a>
</div><!-- fin compact grid -->

Les contraintes sont les mêmes que dans les tutoriels précédents :

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_compact_grid-a et #galeries_compact_grid-b.

Pour créer un lien sur l'image, à l'instar de la première image du slider, il suffit de "remplir" la balise [a href=...]. Attention, la cible est définie dans le script : slider_links_newpage: true, //lien éventuel vers nouvel onglet : true false

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.


Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels