source: spip-zone/_plugins_/owlcarousel/trunk/noisettes/owlcarousel-objet-portfolio.html @ 109067

Last change on this file since 109067 was 109067, checked in by arnaud.berard@…, 18 months ago

owlcarousel-objet-porfolio : correction css, commentaire sur l'exemple de gestion des events
owl-video-player : ajout des options de transition à la noisette et au modèle

  • Property svn:eol-style set to native
File size: 4.7 KB
Line 
1[(#REM)<!-- # OwlCarousel - Portfolio Objet
2
3
4Gallerie portfolio avec Owl Carousel
5@see - http://owlgraphic.com/owlcarousel/index.html#customizing
6
7Usage:
8```html
9  <INCLURE{fond=noisettes/owlcarousel-objet-portfolio,
10          objet=article,
11          id_objet=28,
12          animateOut=fadeOut, env, ajax }/>
13```
14
15@param id-carousel - id unique du carousel, si on en utilise plusieurs dans la page
16@param nb_thumbnails - nombre de vignettes
17@param caption (oui !) - Affiche la description de l'image.
18@param navigation (true !) - affiche les boutons précédents suivants
19@param caption_css (false !) - ajouter des css sur la description (par exemple : invisible).
20@param autoPlay (false !) - le carousel démarre automatiquement.
21@param stopOnHover (false !)- pause sur le rollHover
22@param lazyLoad (false !) - ne charge que les images visibles pour optimiser le chargement.
23@param animateIn - une animation css3 , `fadeOut` est la seul fournie par owl, sinon ajouter animate.css
24@param animateOut - une animation css3 , `fadeOut` est la seul fournie par owl, sinon ajouter animate.css
25
26
27-->]
28#SET{id-carousel, #ENV{id-carousel, owl-objet-portfolio}}
29<style>
30    [#(#GET{id-carousel})] .owl-slide > .caption {
31        z-index: 100;
32        position: absolute;
33        left:55%;
34        width: 40%;
35        bottom:5%;
36    }
37    [#(#GET{id-carousel})] .owl-slide > .caption > .title {
38        background: #000;
39        color : #FFF;
40        padding: 5px;
41        width: auto;
42    }
43    [#(#GET{id-carousel})] .owl-slide > .caption > p {
44        background-color: rgba(88, 88, 88, 0.75) ;
45        /*float: right;*/
46        color: #FFF;
47        padding: 5px;
48    }
49
50    [#(#GET{id-carousel})] .owl-slide img {
51        display: block;
52        width: 100%;
53        height: auto;
54        margin: 0 auto;
55    }
56
57    .diapo_vignettes .owl-slide {
58        padding:.5em;
59        border: 1px solid silver;
60        border-radius: 3px;
61        height: auto;
62        display: inline-block;
63        margin-right: .5em;
64    }
65    .diapo_vignettes .owl-slide:hover,
66    .diapo_vignettes .owl-slide.active {
67        border: 1px solid blue;
68    }
69    .diapo_vignettes .owl-slide > a {
70        display: block;
71    }
72
73</style>
74[(#REM)<!-- Visuel Grand -->]
75<div id="[(#GET{id-carousel})]" class="owl-carousel owl-theme">
76    <BOUCLE_listDocs(DOCUMENTS spip_documents_liens){objet=#ENV{objet}}{id_objet=#ENV{id_objet}}{mode=document}{extension==jpg|png|gif}>
77    <div class="owl-slide" data-hash="[(#GET{id-carousel})]_#ID_DOCUMENT">
78        [(#ENV{caption,oui}|=={oui}|oui)
79        <div class="caption[ (#ENV{caption_css})]">[<h3 class="title">(#TITRE)</h3>][<p class="hidden-phone">(#DESCRIPTIF|textebrut)</p>]</div>]
80            <a href="#FICHIER" class="js-colorbox" rel="diaporama">
81                <img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_reduire{600,400}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
82            </a>
83    </div>
84    </BOUCLE_listDocs>
85</div>
86[(#REM)<!-- Vignettes -->]
87<B_docs>
88<div class="diapo_vignettes">
89    <ul id="list-thumbnails" class="diapo_thumbnails owl-carousel">
90    <BOUCLE_docs(DOCUMENTS spip_documents_liens){objet=#ENV{objet}}{id_objet=#ENV{id_objet}}{mode=document}{extension==jpg|png|gif}>
91        [<li class="owl-slide">
92            <a class="diapo_thumbnail[ (#ENV{doc}|=={#ID_DOCUMENT}|oui)active]"
93               href="[#(#GET{id-carousel})]_[(#ID_DOCUMENT)]"
94               [ title="(#TITRE|couper{80}|texte_backend)"]>
95            (#LOGO_DOCUMENT||image_recadre{100,100,'center','transparent'}|image_reduire{100,100}|inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})
96            </a>
97        </li>]
98    </BOUCLE_docs>
99    </ul>
100</div>
101</B_docs>
102
103<script>
104jQuery(function($){
105    var mainCarousel = $("[#(#GET{id-carousel})]");
106    mainCarousel.owlCarousel({
107        loop:true,
108        margin:0,
109        items: 1,
110        dots: true,[
111        nav:(#ENV{navigation, false}),][
112        autoplay: (#ENV{autoplay}),][
113        autoplayHoverPause: (#ENV{autoplayHoverPause}),][
114        lazyLoad: (#ENV{lazyLoad}),][
115        animateIn:'(#ENV{animateIn})',][
116        animateOut:'(#ENV{animateOut})',]
117        responsive:{
118                                        0:{
119                                                items:1
120                                        }
121                                },
122        URLhashListener:true,
123        startPosition: 'URLHash'
124    });
125    [(#REM)/* exemple d'utilisation d'évenements
126
127    mainCarousel.on('changed.owl.carousel', function(event) {
128        //console.log(event.target);
129    });
130    */]
131    $("#list-thumbnails").owlCarousel({
132        items: 6,
133        navigation:false,
134        navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
135        pagination:true,
136        paginationNumbers:true,
137        responsive: #ENV*{thumbnails_responsive, false}
138    });
139
140    // Gallerie Colorbox
141    $("a.js-colorbox").colorbox({
142        rel:'diaporama',
143    });
144});
145</script>
Note: See TracBrowser for help on using the repository browser.