Ajouter feuille de style et script
Style et script : fichier ou code source
Service de téléchargements (v1)
Service de changement de skin (thème) à la volée
Service de calendrier avec des liens
Ce thème, s'apparente à Camera lorsque l'on utilise des vignettes (thumbs) pour naviguer. Mais ses réglages permettent des effets différents : Ces deux sliders peuvent être complémentaires en fonction de ce que l'on souhaite afficher.
Attention, ici, il faudra déclarer 4 fichiers au début du code source :
<script charset="utf-8" type="text/javascript" src="skin/unitegallery/themes/default/ug-theme-default.js"></script>
<script charset="utf-8" type="text/javascript" src="skin/unitegallery/themes/default/galeries_default.js"></script>
<link charset="utf-8" href="skin/unitegallery/themes/default/ug-theme-default.css" rel="stylesheet" />
<link charset="utf-8" href="skin/unitegallery/css/UG_styleplus.css" rel="stylesheet" />
Le premier fichier ug-theme-default.js est celui du pack : indispensable... Le deuxième, galeries_default.js est celui qui contiendra les réglages de vos galeries pour ce thème. Le troisième, ug-theme-default.css est le fichier de style du pack : indispensable... le quatriè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 quatriè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_default.js : vous pouvez le copier, vous en inspirer largement. D'autres options sont possibles. Voir ici : https://unitegallery.net/index.php?page=default-options. Contactez-moi si cette page n'est plus à disposition.
jQuery(document).ready(function(){
jQuery("#galeries_default900").unitegallery({
gallery_width:900, //Largeur galerie
gallery_height:500, //Hauteur galerie
gallery_min_width: 360, //Largeur mini galerie
gallery_min_height: 200, //Hauteur mini galerie
theme_hide_panel_under_width: 450, //Cache le panneau sous cette largeur
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:"linear", //Type de transition : "easeInOutQuad" "linear" Voir ici : https://api.jqueryui.com/easings/
slider_background_color:"#111111", //Couleur de fond
slider_background_opacity:0.8, //Opacité fond
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:"#ff9900", //Couleur de l'indicateur bar
slider_progressbar_opacity: 0.4, //Opacité de l'indicateur bar
slider_progress_indicator_align_hor:"center", //Alignement horizontal indicateur : left, center, right
slider_progress_indicator_align_vert:"top", //Alignement vertical indicateur : top, middle, bottom
slider_links_newpage: true, //lien éventuel vers nouvel onglet : true false
theme_enable_text_panel: true, //Légende : true false
theme_text_align: "left", //Légende : left center right
theme_text_type: "title", //Légende : title description
slider_textpanel_bg_color:"#111111", //Couleur fond textpanel
slider_textpanel_bg_opacity: 0.6, //Opacité fond textpanel
strippanel_background_color: "#222222", //Couleur fond vignettes
thumb_width:99, //Largeur vignettes (thumbs)
thumb_height:55, //Hauteur vignettes (thumbs)
strip_space_between_thumbs: 10, //Espace entre vignettes
thumb_selected_border_width: 2, //Bordure vignette active
thumb_selected_border_color: "#ff9900" //Couleur bordure vignette active
});
});
jQuery(document).ready(function(){
jQuery("#galeries_default720").unitegallery({
gallery_width:720, //Largeur galerie
gallery_height:400, //Hauteur galerie
gallery_min_width: 360, //Largeur mini galerie
gallery_min_height: 200, //Hauteur mini galerie
theme_hide_panel_under_width: 450, //Cache le panneau sous cette largeur
gallery_autoplay:false, //Démarrage automatique : true false
gallery_pause_on_mouseover: true, //Pause au survol : true false
gallery_play_interval: 4500, //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:1500, //Durée de transition en millisecondes
slider_transition_easing:"swing", //Type de transition : "easeInOutQuad" "linear" Voir ici : https://api.jqueryui.com/easings/
slider_background_color:"#000000", //Couleur de fond
slider_background_opacity:0.9, //Opacité fond
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: "#c0c0c0", //Couleur1 de l'indicateur pie (fill)
slider_progresspie_color2: "#827758", //Couleur2 de l'indicateur pie (fill)
slider_progresspie_width: 25, //Largeur pie
slider_progresspie_height: 25, //Hauteur pie
slider_progress_indicator_align_hor:"right", //Alignement horizontal indicateur : left, center, right
slider_progress_indicator_align_vert:"top", //Alignement vertical indicateur : top, middle, bottom
slider_links_newpage: true, //lien éventuel vers nouvel onglet : true false
theme_enable_text_panel: true, //Légende : true false
theme_text_align: "center", //Légende : left center right
theme_text_type: "title", //Légende : title description
slider_textpanel_bg_color:"#eeeeee", //Couleur fond textpanel
slider_textpanel_bg_opacity: 0.2, //Opacité fond textpanel
strippanel_background_color: "#827758", //Couleur fond vignettes
thumb_width:70, //Largeur vignettes (thumbs)
thumb_height:70, //Hauteur vignettes (thumbs)
thumb_round_corners_radius:4, //Arrondis vignettes
strip_space_between_thumbs: 10, //Espace entre vignettes
thumb_border_width: 2, //Bordure vignette
thumb_border_color: "#403A2B", //Couleur bordure vignette
thumb_over_border_width: 2, //Bordure vignette survolée
thumb_over_border_color: "#AA9E80", //Couleur bordure vignette survolée
thumb_selected_border_width: 2, //Bordure vignette active
thumb_selected_border_color: "#c0c0c0", //Couleur bordure vignette active
thumb_color_overlay_effect: true, //Effet de couleur au survol
thumb_overlay_color: "#827758", //Couleur vignettes non survolées
thumb_overlay_opacity: 0.3 //Opacité vignettes non survolées
});
});
Les réglages ressemblent beaucoup à ceux du tutoriel Slider, il y a même quelques lignes semblables... Vous pouvez créer autant de types de réglage souhaités à condition de les différencier avec leur Id : ici #galeries_default900 et #galeries_default720. Comme ci-dessus, 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 seconde occurrence car la différence entre les deux ne se situe que dans leur Id : galeries_default720 remplacé par galeries_default900. (Enfin... presque... car il y a un margin:0 auto; mis en place dans le code ci-dessous pour centrer le slider)
<div id="galeries_default720" 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 default -->
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_default-a et #galeries_default-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.
adHoc
adHoc
Carousels
Slideshow de textes (quote slideshow)
adHoc
adHoc
adHoc
adHoc
adHoc
adHoc
adHoc
adHoc
Iframes responsives
Camera
Unite Gallery
Animations au survol
Autres astuces en CSS
Audio-Players
Carousels