adHoc.71site.fr

→ Aller plus loin en utilisant des vidéos embed

Pour cet exemple, on intègre les vidéos issues de youtube ou tout autre serveur de vidéo en streaming pour lequel vous connaissez le code d'intégration embed.

■ NB : Sur mon autre site 71site.fr j'ai proposé l'intégration de vidéos que l'on possède sur son propre hébergement... Ce n'est pas une solution très aisée... Je ne la proposerai pas, ici, sous adHoc. Des solutions plus faciles seront utilisables, notamment avec Unite Gallery... Mais le modèle proposé peut être adapté...

Il faut créer des images (saisie d'écran par exemple de l'image d'accueil de la vidéo) de même ratio que les vidéos (ci-dessous 800x450px c'est à dire 16/9).

On a donc ici 450/800 = 0.5625 d'où (dans le script) height: '56.25%'

Éventuellement des miniatures de même ratio (à mettre dans le dossier vgnt au même niveau que les images et en leur donnant le même nom pour simplifier...). Ce sont les vignettes qui servent dans cet exemple de boutons de pagination.

Il faut récupérer les codes d'intégration et les intégrer dans des iframes comme dans le code exemple ci-dessous

Attention ! Dans le cas du style et/ou du script au début du code source utiliser exclusivement l'éditeur de texte Whizziwig et éviter l'éditeur Popline.

La première partie entre les balises [style type="text/css"] et [/style] est commentée pour vous aider à régler le style.

<style type="text/css">
.camera_wrap { /* bordure : epaisseur, nature, couleur, arrondi */
    border: 0px solid rgb(255, 85, 0);
    border-radius: 0px;    
}
.camera_command_wrap { /* meme valeur que border pour ajuster les vignettes */
	top: 0px;	
}
.camera_caption { /* couleur du texte */
    color: rgb(0, 0, 0);
}
.camera_caption > div { /* couleur du fond de texte et transparence */
    background: rgba(255, 255, 255, 0.8);
}
.camera_wrap .camera_pag .camera_pag_ul { /* position des boutons de pagination */
	text-align: left;
}
.camera_thumbs_cont {	/* couleur du fond des vignettes et transparence */
	background: rgba(216, 216, 216, 0.0);
}
.camera_prevThumbs, .camera_nextThumbs { /* boutons de navigation des vignettes */
	top: 15px;
    bottom: 15px;
	visibility: visible;	/* hidden pour masquer */
}
.camera_prevThumbs, .camera_nextThumbs, .camera_prev, .camera_next, .camera_commands { /* couleur de fond des boutons de navigation */
    background: rgba(245, 245, 245, 0.6);
}
.fluid_container { /* reglage max en largeur et % d'occupation */
    margin: 0 auto;
    max-width: 800px;
    width: 80%;
}
</style>

La seconde partie entre les balises [script] et [/script] tient compte de la mise en place des vignettes (thumbnails) avec la variable false pour les boutons de pagination.

<script>
jQuery(function(){ /* initialisation camera_wrap_1 */
            jQuery('#camera_wrap_1').camera({
                fx: 'simpleFade',
                thumbnails: true,
                height: '56.25%',                
                pagination: false,
                time: 5000,
                transPeriod: 1000
            });
        });
</script>

Et enfin, le code où vous souhaitez que le slider s'affiche :

NB : Toutes les images et les vignettes de ces tutoriels sont ici : test_camera.zip. Le dossier décompressé est à placer dans le dossier images d'adHoc... Ce n'est évidemment pas une obligation... ce sont juste des tests...

<div class="fluid_container">
<div class="camera_wrap camera_emboss" id="camera_wrap_1">

<div src="images/test_camera/Image0029.jpg" data-thumb="images/test_camera/vgnt/Image0029.jpg">
<iframe allowfullscreen="" mozallowfullscreen="" src="https://www.youtube.com/embed/Nak-j7f6dfE?rel=0" webkitallowfullscreen="" width="100%" height="100%" frameborder="0"></iframe>
</div>

<div src="images/test_camera/Image0030.jpg" data-thumb="images/test_camera/vgnt/Image0030.jpg">
<iframe allowfullscreen="" mozallowfullscreen="" src="https://www.youtube.com/embed/RGfppHHpf2Q?rel=0" webkitallowfullscreen="" width="100%" height="100%" frameborder="0"></iframe>
</div>

<div src="images/test_camera/Image0031.jpg" data-thumb="images/test_camera/vgnt/Image0031.jpg">
<iframe allowfullscreen="" mozallowfullscreen="" src="https://www.youtube.com/embed/hWHVIaIWz_Q?rel=0" webkitallowfullscreen="" width="100%" height="100%" frameborder="0"></iframe>
</div>

<div src="images/test_camera/Image0032.jpg" data-thumb="images/test_camera/vgnt/Image0032.jpg">
<iframe allowfullscreen="" mozallowfullscreen="" src="https://www.youtube.com/embed/exBxDTc9FmA?rel=0" webkitallowfullscreen="" width="100%" height="100%" frameborder="0"></iframe>
</div>

</div>
</div>

Attention ! La classe utilisée est différente des pages précédentes : class="camera_wrap camera_emboss"

Notez la façon dont les vignettes (thumbnails) sont appelées : data-thumb=''...''

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 vignettes 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 vignettes). C'est une vraie contrainte... j'en suis hélas, bien conscient...

Voir ci-dessous le rendu :

-----=====+++++=====-----

Me contacter pour toute aide ou information supplémentaire.