source: spip-zone/_plugins_/owlcarousel/trunk/modeles/article_owl.html

Last change on this file was 111254, checked in by arnaud.berard@…, 8 weeks ago

-ajout des transitions css3 au paramètres du modèle article_owl

  • todo acessibilité dans le readme

+z

File size: 3.5 KB
Line 
1[(#REM)<!-- # OwlCarousel - Portfolio Articles
2
3Gallerie portfolio avec Owl Carousel
4Insertion du modele <articleX|owl>
5
6@param : id_article
7@param : id-carousel : id unique du carousel
8@param : caption : oui : Affiche la description de l'image.
9@param : docs : 1,2,3 : selectionne individuellement les documents
10@param : dots : true par defaut : affiche les points de navigation
11@param : navigation : true par defaut : affiche les boutons précédents suivants
12@param : caption_css : ajouter des css sur la description (par exemple : invisible).
13@param : autoplay : true (false par défaut) : le carousel démarre automatiquement.
14@param : autoplayHoverPause : true (false par défaut) : pause sur le rollHover en mode autoplay
15@param : lazyLoad : true (false par défaut) : ne charge que les images visibles pour optimiser le chargement.
16@param animateIn - une animation css3 , `fadeOut` est la seul fournie par owl, sinon ajouter animate.css
17@param animateOut - une animation css3 , `fadeOut` est la seul fournie par owl, sinon ajouter animate.css
18
19-->]
20<style>
21    [#(#ENV{id-carousel,demo})] .owl-slide > .caption{
22        z-index: 100;
23        position: absolute;
24        left:55%;
25        width: 40%;
26        bottom:5%;
27    }
28    [#(#ENV{id-carousel,demo})] .owl-slide > .caption > .title{
29        background: #000;
30        color : #FFF;
31        padding: 5px;
32        width: auto;
33    }
34    [#(#ENV{id-carousel,demo})] .owl-slide > .caption > p {
35        background-color: rgba(88, 88, 88, 0.75) ;
36        /*float: right;*/
37        color: #FFF;
38        padding: 5px;
39    }
40</style>
41[(#REM) <!-- Diaporama -->]
42<div id="#ENV{id-carousel,demo}" class="owl-carousel owl-theme">
43            <BOUCLE_listDocs(DOCUMENTS){id_article?}{id_document==^((#ENV{docs}|replace{',',|}|sinon{.*}))$}{extension==jpg|png|gif}>
44            <div class="owl-slide"[ (#ENV{URLhashListener}|=={true}|oui)data-hash="#ENV{id-carousel,demo}#ID_DOCUMENT"]>
45                [(#ENV{caption,oui}|=={oui}|oui)
46                <div class="caption[ (#ENV{caption_css})]">[
47                    <h3 class="title">(#TITRE)</h3>][
48                    <p class="hidden-phone">(#DESCRIPTIF|textebrut)</p>]</div>]
49                    <a href="#FICHIER" class="js-colorbox"[ rel="diaporama(#ENV{id-carousel,demo})"]>
50                        <img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_reduire{650,450}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
51                    </a>
52            </div>
53            </BOUCLE_listDocs>
54</div>
55
56<script type="text/javascript">
57jQuery(function($){
58    $("[#(#ENV{id-carousel,demo})]").owlCarousel({
59        loop:true,[
60        items: (#ENV{items, 1}),][
61        margin:(#ENV{margin}),][
62        dots:(#ENV{dots, true}),][
63        nav:(#ENV{navigation, false}),][
64        autoplay: (#ENV{autoplay}),][
65        autoplayHoverPause: (#ENV{autoplayHoverPause}),][
66        lazyLoad: (#ENV{lazyLoad}),][
67        animateIn:'(#ENV{animateIn})',][
68        animateOut:'(#ENV{animateOut})',][
69        autoplayTimeout: (#ENV{autoplayTimeout}),][
70        autoHeight: (#ENV{autoHeight}),][
71        URLhashListener:(#ENV{URLhashListener}),
72        startPosition: 'URLHash',]
73        navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
74        responsive:{
75                0:{
76                 items:1
77                }[,
78                  640:{
79                   items:(#ENV{items})
80                }]
81        }
82    });
83
84    // Gallerie Colorbox
85    $("a.js-colorbox").colorbox({
86        rel:'diaporama#ENV{id-carousel,demo}',
87    });
88});
89</script>
Note: See TracBrowser for help on using the repository browser.