En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
Vous êtes ici :   Accueil » Camera et vidéos page 4
 
Prévisualiser...  Imprimer...  Imprimer la page...
Prévisualiser...  Imprimer...  Imprimer la section...
Recherche
 
Fermer

Calendrier

Astuces

 

Camera et vidéos page 4

rss Cet article est disponible en format standard RSS pour publication sur votre site web :
http://www.71site.fr/data/fr-articles.xml

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: tru
e, /* true / false : présence de vignettes */
                height: '56.25%', /* ratio des images : H / L exprimé en % */
                pagination: fals
e /* 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>


Date de création : 12/02/2016
Catégorie : Astuces - Camera
Page lue 8103 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !

Vous êtes ici :   Accueil » Camera et vidéos page 4

Préférences


Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
<O>


  Nombre de membres 48 membres
Connectés :
( personne )
Snif !!!

Lettre d'information

Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.

Avant de soumettre ce formulaire, veuillez lire et accepter les Mentions légales.

J'accepte :
Recopier le code :
16 Abonnés