Camera et vidéos page 4
Aller plus loin... En utilisant des vidéos, page 4.
Dans cette partie, on intègre les vidéos embed.
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...)
Il faut récupérer les codes d'intégration et les intégrer dans des iframes comme dans le code exemple ci-dessous
La partie <style> </style> est la même que pour les pages précédentes (sauf border mis à 0px)
Il faut adapter la partie <script> </script> à ce que l'on souhaite
ATTENTION, la class utilisée n'est pas la même... : class="camera_wrap camera_emboss"
Dans ce script, les miniatures remplacent les boutons de pagination.
<script>
jQuery(function(){ /* initialisation camera_wrap_1 */
jQuery('#camera_wrap_1').camera({
fx: 'simpleFade', /* différentes transitions possibles */
thumbnails: true, /* true / false : présence de vignettes */
height: '56.25%', /* ratio des images : H / L exprimé en % */
pagination: false /* true / false : présence des boutons de pagination */
time: 5000, /* millisecondes entre la fin d'une transition et le début de la suivante : durée d'affichage */
transPeriod: 1000 /* durée de la transition en millisecondes */
});
});
</script>
<div class="fluid_container">
<div class="camera_wrap camera_emboss" id="camera_wrap_1">
<div data-src="photo/test_camera/Image0029.jpg" data-thumb="photo/test_camera/vgnt/Image0029.jpg">
<iframe allowfullscreen="" frameborder="0" height="100%" mozallowfullscreen="" src="https://www.youtube.com/embed/Nak-j7f6dfE?rel=0" webkitallowfullscreen="" width="100%"></iframe>
</div>
<div data-src="photo/test_camera/Image0030.jpg" data-thumb="photo/test_camera/vgnt/Image0030.jpg">
<iframe allowfullscreen="" frameborder="0" height="100%" mozallowfullscreen="" src="https://www.youtube.com/embed/RGfppHHpf2Q?rel=0" webkitallowfullscreen="" width="100%"></iframe>
</div>
<div data-src="photo/test_camera/Image0031.jpg" data-thumb="photo/test_camera/vgnt/Image0031.jpg">
<iframe allowfullscreen="" frameborder="0" height="100%" mozallowfullscreen="" src="https://www.youtube.com/embed/hWHVIaIWz_Q?rel=0" webkitallowfullscreen="" width="100%"></iframe>
</div>
<div data-src="photo/test_camera/Image0032.jpg" data-thumb="photo/test_camera/vgnt/Image0032.jpg">
<iframe allowfullscreen="" frameborder="0" height="100%" mozallowfullscreen="" src="https://www.youtube.com/embed/exBxDTc9FmA?rel=0" webkitallowfullscreen="" width="100%"></iframe>
</div>
</div>
</div>
Catégorie : Astuces - Camera
Page lue 69137 fois
