adHoc.71site.fr

→ Galeries Thème Vidéo

Ces galeries, très proches les unes des autres permettent de présenter des vidéos "embed" issues de Youtube, de Vimeo.

Le fichier ug-theme-video.js devrait permettre l'appel à des fichiers .ogv .mp4 .webm installés sur votre serveur... Mais hélas, malgré mes différentes tentatives, je n'y suis jamais arrivé... Alors que mes fichiers sont lus normalement via un simple code html5... De plus, il n'est pas prévu dans ce fichier ug-theme-video.js l'intégration de vidéo "embed" issues de Dailymotion. C'est donc un système assez incomplet. Je le présente ici tout de même dans ses apparences de base.

Notez, cependant que d'autres thèmes d'Unite Gallery permettent d'afficher des vidéos : les Thèmes Tiles (tuiles), Tiles Grid (grille de tuiles), Carousel par exemple. Je vous invite à vous pencher sur les différentes options de ces thèmes : les appels aux vidéos se font exactement dans les mêmes conditions que ci-dessous.

Ici, ont été déclarés au début du code source, 7 fichiers :

<script charset="utf-8" type="text/javascript" src="skin/unitegallery/themes/video/ug-theme-video.js"></script>
<script charset="utf-8" type="text/javascript" src="skin/unitegallery/themes/video/galeries_video.js"></script> 
 <link charset="utf-8" href="skin/unitegallery/themes/video/skin-right-thumb.css" rel="stylesheet" />
 <link charset="utf-8" href="skin/unitegallery/themes/video/skin-right-no-thumb.css" rel="stylesheet" />
 <link charset="utf-8" href="skin/unitegallery/themes/video/skin-right-title-only.css" rel="stylesheet" />
 <link charset="utf-8" href="skin/unitegallery/themes/video/skin-bottom-text.css" rel="stylesheet" />
 <link charset="utf-8" href="skin/unitegallery/css/UG_styleplus.css" rel="stylesheet" /> 

Le premier fichier ug-theme-video.js est celui du pack : indispensable... Le deuxième, galeries_video.js est celui qui contiendra les réglages de vos galeries pour ce thème. Pour les 4 suivants qui sont issus du pack, il vous suffira de ne déclarer que celui, indispensable, qui vous convient : Ce sont les fichiers de style de chacun des exemples ci-dessous (sur lesquels vous pouvez apporter des modifications directement ou, de préférence, dans le fichier UG_styleplus.css déclaré en dernier si nécessaire).

→ Présentation avec vignettes à droite (skin-right-thumb.css)

→ Présentation sans vignettes à droite (skin-right-no-thumb.css)

→ Présentation à droite, titres seulement (skin-right-title-only.css)

→ Présentation avec textes en bas (skin-bottom-text.css)

Ci-dessous, le contenu du fichier galeries_video.js : vous pouvez le copier, vous en inspirer. Les 4 scripts y sont, sans modifications importantes. Les options possibles peuvent être trouvées, entre autres, dans le fichier ug-theme-video.js lignes 21 à 50.

jQuery(document).ready(function(){
jQuery("#galeries_video_right-thumb").unitegallery({
	gallery_theme: "video",
	theme_skin: "right-thumb", //Thème skin : right-thumb right-title-only right-no-thumb bottom-text
	gallery_width: 1000, //Largeur galerie
	theme_autoplay: false, //Démarrage auto : true false. Ne fonctionne pas sur mobile.
	theme_next_video_onend: false, //Enchainement auto : true false
});
});


jQuery(document).ready(function(){
jQuery("#galeries_video_right-no-thumb").unitegallery({
	theme_skin: "right-no-thumb", //Thème skin : right-thumb right-title-only right-no-thumb bottom-text
	gallery_width: 1000, //Largeur galerie
	theme_autoplay: false, //Démarrage auto : true / false. Ne fonctionne pas sur mobile.
	theme_next_video_onend: false, //Enchainement auto : true false
});
});


jQuery(document).ready(function(){
jQuery("#galeries_video_right-title").unitegallery({
	theme_skin: "right-title-only", //Thème skin : right-thumb right-title-only right-no-thumb bottom-text
	gallery_width: 1000, //Largeur galerie
	theme_autoplay: false, //Démarrage auto : true / false. Ne fonctionne pas sur mobile.
	theme_next_video_onend: false, //Enchainement auto : true false
});
});


jQuery(document).ready(function(){
jQuery("#galeries_video_bottom-text").unitegallery({
	theme_skin: "bottom-text", //Thème skin : right-thumb right-title-only right-no-thumb bottom-text
	gallery_width: 800, //Largeur galerie
	theme_autoplay: false, //Démarrage auto : true / false. Ne fonctionne pas sur mobile.
	theme_next_video_onend: true,  //Enchainement auto : true false
});
});

Vous pouvez créer autant de types de réglage souhaités à condition de les différencier avec leur Id : ici #galeries_video_right-thumb, #galeries_video_right-no-thumb, #galeries_video_right-title et #galeries_video_bottom-text. Vous pouvez utiliser plusieurs galeries dans la même page... à condition de déclarer au préalable les fichiers de style correspondants

Et enfin, ci-dessous le code à entrer afin d'afficher les vidéos, 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 quatre ne se situe que dans leur Id (notez dans [div id="galeries_video_XXX" style="display:none;margin:0 auto;"] un margin:0 auto; dans le code afin de centrer les sliders).

<div id="galeries_video_right-thumb" style="display:none;margin:0 auto;"> 

<div data-type="youtube" data-description="Babyclay" data-title="Baby Elephant" data-thumb="https://i.ytimg.com/vi/ubKDQ4N3g4U/mqdefault.jpg" data-videoid="ubKDQ4N3g4U">
</div>

<div data-type="vimeo" data-description="Michael Price" data-title="Stop-motion lip sync animation" data-thumb="https://i.vimeocdn.com/video/376953730-dda5136e18239d690307761a82c2456bb77defc0ccfe7e97a01f6a6aa6d328eb-d_130x73.jpg" data-videoid="54513465">
</div>

<div data-type="youtube" data-description=" Make•Film•Play" data-title="Ripping Paper Stop Motion" data-thumb="https://i.ytimg.com/vi/6sdqWDnFjk8/mqdefault.jpg" data-videoid="6sdqWDnFjk8">
</div>

<div data-type="vimeo" data-description="Margaret Scrinkl" data-title="Pop corn" data-thumb="https://i.vimeocdn.com/video/678290788-a8fa7945600cb612cd249334542bdeef9012c5087ac0d827ce026257dea26eac-d_130x73.jpg" data-videoid="251819313">
</div>

<div data-type="youtube" data-description="École Courcy 2011" data-title="Le Ballet des poussins dans leur coquille" data-thumb="https://i.ytimg.com/vi/m1vxVhvkHtM/mqdefault.jpg" data-videoid="m1vxVhvkHtM">
</div>

<div data-type="vimeo" data-description="Diogo Camacho" data-title="Stop Motion animation" data-thumb="https://i.vimeocdn.com/video/436757354-a6bd1f2f9ad788dba82d3af9adcae5091c6d39fa00f5fa7f6b2298d5b4bb419f-d_130x73.jpg" data-videoid="65606724">
</div>

<div data-type="youtube" data-description="École Courcy 2016" data-title="Le lièvre et le paresseux" data-thumb="https://i.ytimg.com/vi/QkV2WQUfdfs/mqdefault.jpg" data-videoid="QkV2WQUfdfs">
</div>

<div data-type="vimeo" data-description="Kare Kutu Studio" data-title="11 - stop motion short animation" data-thumb="https://i.vimeocdn.com/video/307393307-ed430f5e7f626d374a36a64cf7d57c2825092fe0b3bb10a04ede382b196af3ae-d_130x73.jpg" data-videoid="6132161">
</div>

<div data-type="youtube" data-description="Guldies" data-title="Stop Motion First Try" data-thumb="https://i.ytimg.com/vi/kA2XrXeHSRg/mqdefault.jpg" data-videoid="kA2XrXeHSRg">
</div>

<div data-type="vimeo" data-description="Terrence McCarthy" data-title="Stop-Motion Animation" data-thumb="https://i.vimeocdn.com/video/54378700-419a7f0a4e3f291d16ac0346e31d14e9ada0a2e86b89c5f0af5a3390e1934dc0-d_130x73.jpg" data-videoid="984497">
</div>


</div><!-- fin galerie video -->

Les contraintes sont à peu près 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_video_bottom-text-a et #galeries_video_bottom-text-b.

Notez data-type="youtube" ou data-type="vimeo" pour l'origine de la vidéo "embed". Notez, ici data-description="..." pour l'auteur et data-title="..." pour le titre. Notez data-videoid="..." pour l'identifiant de la vidéo "embed" et data-thumb="..." pour sa vignette (à récupérer assez facilement sur les sites Youtube ou Vimeo).

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