parent
3ec8ecbd65
commit
4d3ed007c0
@ -0,0 +1,4 @@
|
||||
/*! Flickity v2.2.2
|
||||
https://flickity.metafizzy.co
|
||||
---------------------------------------------- */
|
||||
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:hsla(0,0%,100%,.75);border:none;color:#333}.flickity-button:hover{background:#fff;cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}
|
||||
@ -0,0 +1,21 @@
|
||||
body
|
||||
{
|
||||
text-align:center;
|
||||
background-color:#C0D6D2;
|
||||
}
|
||||
#videos
|
||||
{
|
||||
border:1px solid;
|
||||
width:800px;
|
||||
margin:auto;
|
||||
padding:1em;
|
||||
text-align:center;
|
||||
}
|
||||
#video figure
|
||||
{
|
||||
padding-top:2em;
|
||||
}
|
||||
#videos video
|
||||
{
|
||||
width:600px;
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Page d'exemple pour le script vCarousel avec un menu utilisant Flickity.">
|
||||
<meta name="robots" content="noindex">
|
||||
<link rel="stylesheet" href="CSS/vcarousel.css" media="screen">
|
||||
<link rel="stylesheet" href="CSS/flickity.min.css" media="screen">
|
||||
<script src="JS/exampleFlickity.app.js" defer></script>
|
||||
<title>vCarousel (démo avec Flickity)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="videos">
|
||||
<h1 id="title">vCarousel</h1>
|
||||
<p>Dans cet exemple vCarousel est associé à un carrousel d'images plus classique gèré via <a href="https://flickity.metafizzy.co/" target="_blank" rel="noopener">flickity</a> servant de menu pour choisir la première vidéo à visionner. Ensuite vCarousel enchaîne les vidéos et synchronise l'affichage de flickity.</p>
|
||||
|
||||
<figure id="vFunanbule">
|
||||
<video controls preload="metadata">
|
||||
<source src="videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v" type="video/mp4"></source>
|
||||
<p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p>
|
||||
</video>
|
||||
<figcaption>Un clown funanbule !</figcaption>
|
||||
</figure>
|
||||
<figure id="vForgeron">
|
||||
<video controls preload="metadata">
|
||||
<source src="videos/Lizio-Poete-Ferrailleur-forgeron.m4v" type="video/mp4"></source>
|
||||
<p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p>
|
||||
</video>
|
||||
<figcaption>Il faut forger pour devenir forgeron !</figcaption>
|
||||
</figure>
|
||||
<figure id="vCircuit">
|
||||
<video controls preload="metadata">
|
||||
<source src="videos/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v" type="video/mp4"></source>
|
||||
<p>Votre navigateur ne prend pas en charge les vidéos HTML5.</p>
|
||||
</video>
|
||||
<figcaption>Drôle de circuit !</figcaption>
|
||||
</figure>
|
||||
<nav class="img-carousel">
|
||||
<div class="carousel-cell"><a href="#vFunanbule" class="selectVideo"><img src="img/clownfunanbule.png" alt="Le funanbule"></a></div>
|
||||
<div class="carousel-cell"><a href="#vForgeron" class="selectVideo"><img src="img/forgeron.png" alt="Le forgeron"></a></div>
|
||||
<div class="carousel-cell"><a href="#vCircuit" class="selectVideo"><img src="img/drole-de-circuit.png" alt="Le drôle de circuit"></a></div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<aside><p>Les courtes vidéos de cette page d'exemple ont été enregistrées le 11 août 2016 au <a href="https://www.poeteferrailleur.com/" target="_blank">Poète ferrailleur</a> à Lizio dans le Morbihan.</p></aside>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 92 KiB |
@ -0,0 +1,76 @@
|
||||
/// Exemple d'utilisation de vCarousel avec 3 vidéos, proposées via un carrousel d'images Flickity
|
||||
const Flickity = require("flickity");
|
||||
import { vCarousel } from "./vCarousel";
|
||||
|
||||
// Cette fonction sert à synchroniser si besoin l'image sélectionnée dans le carrousel Flickity avec le hash de l'url.
|
||||
const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
|
||||
{
|
||||
let nb=0, find=false;
|
||||
// On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash.
|
||||
for(let cel of flickityCarousel.cells)
|
||||
{
|
||||
let childrens = cel.element.childNodes;
|
||||
for (let i = 0, c = childrens.length; i < c; i++)
|
||||
{
|
||||
if (childrens[i].nodeType === Node.ELEMENT_NODE)
|
||||
{
|
||||
if(childrens[i].hash!=undefined && childrens[i].hash===urlHash)
|
||||
{
|
||||
flickityCarousel.select(nb);// API Flickity : https://flickity.metafizzy.co/api.html
|
||||
find=true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
nb++;
|
||||
}
|
||||
if(find===false)
|
||||
console.error("L'ancre fournie par l'url n'a pas été trouvée dans le carrousel Flickity.");
|
||||
}
|
||||
|
||||
try
|
||||
{
|
||||
// Carrousel Flickity :
|
||||
const imgCarousel = document.querySelector(".img-carousel");
|
||||
const flktyCarousel = new Flickity(imgCarousel,
|
||||
{
|
||||
// options : https://flickity.metafizzy.co/options.html
|
||||
accessibility: true,
|
||||
cellAlign: "center",
|
||||
contain: true,
|
||||
rightToLeft: true,
|
||||
wrapAround: true,
|
||||
});
|
||||
|
||||
// Liste des id des contenants des vidéos à faire tourner :
|
||||
const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
|
||||
// Si un id est fourni par l'url, on affiche cette vidéo en premier :
|
||||
if(window.location.hash!==undefined && window.location.hash!=="")
|
||||
{
|
||||
vCarousel(videosContainers, window.location.hash.replace("#",""));
|
||||
selectFlickityForHash(flktyCarousel, location.hash);
|
||||
}
|
||||
else
|
||||
vCarousel(videosContainers, ""); // dans cet exemple, on cache toutes les vidéos avant que l'utilisateur ne fasse son choix dans le carrousel d'images.
|
||||
|
||||
// Lorsque l'utilisateur clique sur une des images pour sélectionner une vidéo à afficher, on actualise l'affichage :
|
||||
let selectLinks=document.querySelectorAll(".selectVideo");
|
||||
for (let i = 0; i < selectLinks.length; i++)
|
||||
{
|
||||
let link=<HTMLAnchorElement>selectLinks[i];
|
||||
link.addEventListener("click", function(e)
|
||||
{
|
||||
vCarousel(videosContainers, link.hash.replace("#",""));
|
||||
});
|
||||
}
|
||||
// De même quand le hash change, on adapte l'item sélectionné de flickity
|
||||
// Ceci permet de suivre le parcours des vidéos par vCarousel
|
||||
window.addEventListener('hashchange', function()
|
||||
{
|
||||
selectFlickityForHash(flktyCarousel, location.hash);
|
||||
});
|
||||
}
|
||||
catch(e)
|
||||
{
|
||||
console.error(e);
|
||||
}
|
||||
Loading…
Reference in new issue