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

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

sur le grand visuel, pour que ça recalcule au redimensionnement de la page, on spécifie a l'option responsive 1 items pour tout les breakpoints

  • 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:110px;
62        margin-right: .5em;
63    }
64    .diapo_vignettes .owl-slide:hover,
65    .diapo_vignettes .owl-slide.active {
66        border: 1px solid blue;
67    }
68    .diapo_vignettes .owl-slide > a {
69        display: block;
70    }
71
72</style>
73[(#REM)<!-- Visuel Grand -->]
74<div id="[(#GET{id-carousel})]" class="owl-carousel owl-theme">
75    <BOUCLE_listDocs(DOCUMENTS spip_documents_liens){objet=#ENV{objet}}{id_objet=#ENV{id_objet}}{mode=document}{extension==jpg|png|gif}>
76    <div class="owl-slide" data-hash="[(#GET{id-carousel})]_#ID_DOCUMENT">
77        [(#ENV{caption,oui}|=={oui}|oui)
78        <div class="caption[ (#ENV{caption_css})]">[<h3 class="title">(#TITRE)</h3>][<p class="hidden-phone">(#DESCRIPTIF|textebrut)</p>]</div>]
79            <a href="#FICHIER" class="js-colorbox" rel="diaporama">
80                <img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_reduire{600,400}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
81            </a>
82    </div>
83    </BOUCLE_listDocs>
84</div>
85[(#REM)<!-- Vignettes -->]
86<B_docs>
87<div class="diapo_vignettes">
88    <ul id="list-thumbnails" class="diapo_thumbnails owl-carousel">
89    <BOUCLE_docs(DOCUMENTS spip_documents_liens){objet=#ENV{objet}}{id_objet=#ENV{id_objet}}{mode=document}{extension==jpg|png|gif}>
90        [<li class="owl-slide">
91            <a class="diapo_thumbnail[ (#ENV{doc}|=={#ID_DOCUMENT}|oui)active]"
92               href="[#(#GET{id-carousel})]_[(#ID_DOCUMENT)]"
93               [ title="(#TITRE|couper{80}|texte_backend)"]>
94            (#LOGO_DOCUMENT||image_recadre{100,100,'center','transparent'}|image_reduire{100,100}|inserer_attribut{alt,[(#TITRE|couper{80}|texte_backend)]})
95            </a>
96        </li>]
97    </BOUCLE_docs>
98    </ul>
99</div>
100</B_docs>
101
102<script>
103jQuery(function($){
104    var mainCarousel = $("[#(#GET{id-carousel})]");
105    mainCarousel.owlCarousel({
106        loop:true,
107        margin:0,
108        items: 1,
109        dots: true,[
110        nav:(#ENV{navigation, false}),][
111        autoplay: (#ENV{autoplay}),][
112        autoplayHoverPause: (#ENV{autoplayHoverPause}),][
113        lazyLoad: (#ENV{lazyLoad}),][
114        animateIn:'(#ENV{animateIn})',][
115        animateOut:'(#ENV{animateOut})',]
116        responsive:{
117                                        0:{
118                                                items:1
119                                        }
120                                },
121        URLhashListener:true,
122        startPosition: 'URLHash'
123    });
124
125    mainCarousel.on('changed.owl.carousel', function(event) {
126        //console.log(event.target);
127    });
128
129    $("#list-thumbnails").owlCarousel({
130        items: 6,
131        navigation:false,
132        navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
133        pagination:true,
134        paginationNumbers:true,
135        responsive: #ENV*{thumbnails_responsive, false}
136    });
137
138    // Gallerie Colorbox
139    $("a.js-colorbox").colorbox({
140        rel:'diaporama',
141    });
142});
143</script>
Note: See TracBrowser for help on using the repository browser.