Browse Source

prefixer les selecteurs css, les classes étaient un peut trop générique donc on limite la cascade ^^

svn/root/tags/v1.0.21
arnaud.berard@mister-graphx.com 4 years ago
parent
commit
bb0cd07d00
  1. 16
      css/owl.modeles.css
  2. 58
      noisettes/owl-video-player.html

16
css/owl.modeles.css

@ -18,22 +18,28 @@
padding: 5px;
}
/* Owl VideoPlayer */
.owl-video-player .owl-main_player,
.owl-video-player .owl-video_thumbs {
max-width: 960px;
margin: 0 auto;
}
.owl-video-player .owl-slide {
display: block;
width: 100%;
width: 100%; /* 1 */
margin: 0 auto;
}
.owl-video-player .video_thumbs .owl-slide {
.owl-video-player .owl-video_thumbs .owl-slide {
display: inline-block;
width: auto; /* 1- laisse de l'espace entre les vignettes */
padding:.5em;
border: 1px solid black;
border-radius: 3px;
margin-right: .5em;
}
.owl-video-player .video_thumbs .owl-slide:hover,
.owl-video-player .video_thumbs .owl-slide.active {
.owl-video-player .owl-video_thumbs .owl-slide:hover,
.owl-video-player .owl-video_thumbs .owl-slide.active {
border: 1px solid silver;
}
.owl-video-player .video_thumbs .owl-slide > a {
.owl-video-player .owl-video_thumbs .owl-slide > a {
display: block;
}

58
noisettes/owl-video-player.html

@ -20,36 +20,36 @@ VideoPlayer avec Owl Carousel et oembed
#SET{id-carousel, #ENV{id-carousel,owlvideoplayer} }
[(#REM) <!-- Active item -->]
<div class="owl-video-player">
<div id="#GET{id-carousel}" class="owl-carousel owl-theme">
<BOUCLE_listDocs(DOCUMENTS spip_documents_liens){objet ?}{id_objet ?}{id_document ?}
{media=video}
{mode=document}
{par rang_lien,num titre, date}>
<div class="owl-slide" data-hash="#GET{id-carousel}_#ID_DOCUMENT">
[(#OEMBED|oembed{})]
</div>
</BOUCLE_listDocs>
</div>
[(#REM)<!-- Video thumbnails -->]
<B_docs>
<div class="video_thumbs">
<div id="[(#GET{id-carousel})_video-thumbnails]" class="diapo_thumbnails owl-carousel">
<BOUCLE_docs(DOCUMENTS spip_documents_liens){objet ?}{id_objet ?}
{id_document ?}
{si #ENV{afficher_thumbnails}|=={oui} }
{mode=document}{media=video}
<div id="#GET{id-carousel}" class="owl-main_player owl-carousel owl-theme">
<BOUCLE_listDocs(DOCUMENTS spip_documents_liens){objet ?}{id_objet ?}{id_document ?}
{media=video}
{mode=document}
{par rang_lien,num titre, date}>
[<div class="owl-slide">
<a class="video_thumbnail[ (#ENV{doc}|=={#GET{id-carousel}_#ID_DOCUMENT}|oui)active]"
href="#[(#GET{id-carousel})_#ID_DOCUMENT]"
[ title="(#TITRE|couper{80}|texte_backend)"]>
(#LOGO_DOCUMENT|image_recadre{16:9,'center','transparent'}|image_reduire{200,0}|inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})
</a>
</div>]
</BOUCLE_docs>
</div>
</div>
</B_docs>
<div class="owl-slide" data-hash="#GET{id-carousel}_#ID_DOCUMENT">
[(#OEMBED|oembed{})]
</div>
</BOUCLE_listDocs>
</div>
[(#REM)<!-- Video thumbnails -->]
<B_docs>
<div class="owl-video_thumbs">
<div id="[(#GET{id-carousel})_video-thumbnails]" class="diapo_thumbnails owl-carousel">
<BOUCLE_docs(DOCUMENTS spip_documents_liens){objet ?}{id_objet ?}
{id_document ?}
{si #ENV{afficher_thumbnails}|=={oui} }
{mode=document}{media=video}
{par rang_lien,num titre, date}>
[<div class="owl-slide">
<a class="video_thumbnail[ (#ENV{doc}|=={#GET{id-carousel}_#ID_DOCUMENT}|oui)active]"
href="#[(#GET{id-carousel})_#ID_DOCUMENT]"
[ title="(#TITRE|couper{80}|texte_backend)"]>
(#LOGO_DOCUMENT|image_recadre{16:9,'center','transparent'}|image_reduire{200,0}|inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})
</a>
</div>]
</BOUCLE_docs>
</div>
</div>
</B_docs>
</div>
<script>
jQuery(function($){

Loading…
Cancel
Save