adHoc.71site.fr Unite Gallery

Unite Gallery - Thème Slider

→ Galerie Thème Slider

Ce thème, s'apparente à Camera. 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.

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


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

Le premier fichier ug-theme-slider.js est celui du pack : indispensable... Le deuxième, galeries_slider.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 un exemple de mise en place de ce type de galerie-slider :

Ci-dessous, le contenu du fichier galeries_slider.js : vous pouvez le copier, vous en inspirer largement. D'autres options sont possibles. Voir ici : https://unitegallery.net/index.php?page=slider-options. Contactez-moi si cette page n'est plus à disposition. Il est possible de placer précisément chacun des boutons de réglage du slider. Je n'ai pas tout sélectionné dans le fichier ci-dessous...


jQuery(document).ready(function(){
jQuery("#galeries_slider").unitegallery({
	gallery_width:900, //Largeur galerie
	gallery_height:500, //Hauteur galerie
	gallery_autoplay:true, //Démarrage automatique : true false
	gallery_pause_on_mouseover: true, //Pause au survol : true false
	gallery_play_interval: 3000, //Durée d'affichage d'une image en millisecondes
	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:"#000000", //Couleur de fond
	slider_background_opacity:.8, //Opacité fond
	slider_image_border:false, //Bordure : true false (Peut ne pas convenir si scale mode : fill)
	slider_image_border_width:3, //Epaisseur bordure
	slider_image_border_color:"#ffffff", //Couleur bordure
	slider_image_border_radius:6, //Arrondis bordure
	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_links_newpage: true, //lien éventuel vers nouvel onglet : true false
	slider_controls_always_on:true, //Contrôles toujours affichés : true false (>> visibles au survol)
	slider_enable_text_panel:true, //Légende : true false
	slider_textpanel_always_on: true, //Légende toujours visible : true false (>> visibles au survol)
	slider_controls_appear_ontap:true, //Contrôle apparaissant touche écran tactile
	slider_enable_bullets:true, //Pagination "bullets" : true false
	slider_enable_arrows:true, //Navigation "arrows" : true false (Navigation toujours possible au cliqué-glissé)
	slider_arrow_left_align_vert:"bottom", //Flèche G : top, middle, bottom
	slider_arrow_left_offset_hor:20, //Flèche G : marge hor
	slider_arrow_left_offset_vert:70, //Flèche G : marge vert
	slider_arrow_right_align_vert:"bottom", //Flèche D : top, middle, bottom
	slider_arrow_right_offset_hor:20, //Flèche D : marge hor
	slider_arrow_right_offset_vert:70, //Flèche D : marge vert
	slider_enable_play_button:false, //Bouton pause/play : true false (Pause éventuellement possible au survol)
	slider_enable_fullscreen_button:true, //Bouton plein écran : true false
	slider_fullscreen_button_align_hor:"left", //Bouton plein écran : left, center, right
	slider_fullscreen_button_align_vert:"top", //Bouton plein écran : top, middle, bottom
	slider_fullscreen_button_offset_hor:50, //Bouton plein écran : marge hor
	slider_fullscreen_button_offset_vert:20, //Bouton plein écran : marge vert
	slider_control_zoom:true, //Zoom possible : true false
	slider_zoom_mousewheel: true, //Zoom possible à la molette de la souris : true false
	slider_enable_zoom_panel:true, //Boutons zoom : true false
	slider_zoompanel_align_hor:"left", //Boutons zoom : left, center, right
	slider_zoompanel_align_vert:"top", //Boutons zoom : top, middle, bottom
	slider_zoompanel_offset_hor:15, //Boutons zoom : marge hor
	slider_zoompanel_offset_vert:17, //Boutons zoom : marge vert
});
});

Vous pouvez créer autant de types de réglage souhaités à condition de les différencier avec leur Id : ici #galeries_slider.

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 le slider, où vous le souhaitez dans la page, ou la boîte...


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

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

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

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

<a>
<img alt="Rouille : vue 5" data-image="images/UG/grandes/UG05.jpg" style="display:none" />
</a>
</div><!-- fin slider-->

Les contraintes sont, en partie, 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_slider-a et #galeries_slider-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...

Dans cet exemple, il n'y a pas de vignettes (thumbs), mais, 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.

Index |Info | Imprimer | Permalien

adHoc.71site.fr

Unite Gallery - Thème Slider

→ Galerie Thème Slider

Les 10 derniers articles