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
Cette galerie présente un carousel de tuiles. Un certain nombre de ses réglages sont identiques aux réglages des tutoriels Tuiles et Grille de tuiles.
Ici, il faudra déclarer des fichiers au début du code source :
<script charset="utf-8" type="text/javascript" src="skin/unitegallery/themes/carousel/ug-theme-carousel.js"></script>
<script charset="utf-8" type="text/javascript" src="skin/unitegallery/themes/carousel/galeries_carousel.js"></script>
<link charset="utf-8" href="skin/unitegallery/css/UG_styleplus.css" rel="stylesheet" />
Le premier fichier ug-theme-carousel.js est celui du pack : indispensable... Le deuxième, galeries_carousel.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 galerie-carousel :
Ci-dessous, le contenu du fichier galeries_carousel.js : vous pouvez le copier, vous en inspirer largement. D'autres options sont possibles. Voir ici : https://unitegallery.net/index.php?page=carousel-options. Contactez-moi si cette page n'est plus à disposition.
jQuery(document).ready(function(){
jQuery("#galeries_carousel160").unitegallery({
gallery_width: "100%", //Largeur galerie
carousel_autoplay: true, //Démarrage automatique : true false
carousel_autoplay_timeout: 3000, //Durée d'affichage en millisecondes si autoplay
carousel_autoplay_direction: "right", //Direction si autoplay : left right
carousel_autoplay_pause_onhover: true, //Pause au survol si autoplay : true false
tile_width: 160, //Largeur tuile
tile_height: 120,//Hauteur tuile
carousel_space_between_tiles: 15, //Espace entre les tuiles
carousel_scroll_duration: 800, //Durée de transition en millisecondes
carousel_scroll_easing: "linear", //Type de transition : "easeInOutQuad" "linear" Voir ici : https://api.jqueryui.com/easings/
theme_enable_navigation: true, //Boutons de navigation : true false
theme_navigation_position: "bottom", //Position : "bottom" "top"
carousel_navigation_numtiles: 2, //Nombre de tuiles passées avec la navigation
tile_enable_border:true, //Bordure : true false
tile_border_width:1, //Epaisseur bordure
tile_border_color:"#CF6D17", //Couleur bordure
tile_border_radius:2, //Arrondis bordure (ne fonctionne pas pour la bordure extérieure)
tile_enable_outline: false, //Bordure extérieure : true false
tile_enable_shadow:true, //Ombre portée : true false
tile_shadow_color:"#000000", //Couleur ombre portée
tile_overlay_opacity:0.4, //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: false, //Légende toujours affichée : true false
tile_textpanel_appear_type: "fade", //Apparition légende : "slide", "fade"
tile_textpanel_position:"inside_bottom", //Position légende : "inside_bottom" "inside_top" "inside_center" (si "top" "bottom" : toujours présente)
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_carousel250").unitegallery({
gallery_width: "100%", //Largeur galerie
carousel_autoplay: false, //Démarrage automatique : true false
tile_width: 250, //Largeur tuile
tile_height: 125,//Hauteur tuile
carousel_space_between_tiles: 20, //Espace entre les tuiles
carousel_scroll_duration: 800, //Durée de transition en millisecondes
carousel_scroll_easing: "swing", //Type de transition : "easeInOutQuad" "linear" Voir ici : https://api.jqueryui.com/easings/
theme_enable_navigation: true, //Boutons de navigation : true false
theme_navigation_position: "bottom", //Position : "bottom" "top"
theme_navigation_enable_play: false, //Bouton play-pause : true false
carousel_navigation_numtiles: 1, //Nombre de tuiles passées avec la navigation
tile_enable_border:true, //Bordure : true false
tile_border_width:3, //Epaisseur bordure
tile_border_color:"#dddddd", //Couleur bordure
tile_enable_outline: true, //Bordure extérieure : true false
tile_outline_color:"#222222", //Couleur bordure extérieure
tile_border_radius:0, //Arrondis bordure (ne fonctionne pas pour la bordure extérieure)
tile_enable_shadow:true, //Ombre portée : true false
tile_shadow_color:"#452c01", //Couleur ombre portée
tile_overlay_opacity:0.2, //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: true, //Légende toujours affichée : true false
tile_textpanel_position:"inside_bottom", //Position légende : "inside_bottom" "inside_top" "inside_center" (si "top" "bottom" : toujours présente)
tile_textpanel_bg_color:"#111111", //Couleur fond légende
tile_textpanel_bg_opacity: 0.4, //Opacité fond légende
tile_textpanel_title_color:"#ffff00", ////Opacité texte légende
lightbox_type: "wide" //Type de lightbox : "compact" "wide"
});
});
Les réglages ressemblent beaucoup à ceux des tutoriels Tuiles et Grille de tuiles, 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_carousel160 et #galeries_carousel250. 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. Notez qu'ici, par exemple dans #galeries_carousel250, les légendes ont été réglées dans le script, ce qui n'est pas une obligation... mais est possible...
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_carousel160 remplacé par galeries_carousel250.
<div id="galeries_carousel160" 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>
<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 grilletuile300-->
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_carousel250-a et #galeries_carousel250-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.
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