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

Last change on this file was 110327, checked in by arnaud.berard@…, 2 months ago

suite a https://contrib.spip.net/Owl-Carousel-2?id_article=4936&id_objet=4936&id_forum=497021#forum497021
ajout de l'option navText dans les modèles et noisettes, en place d'exemple d'utilisation => les chaines de langue étant déjà surchargeables

au passage mise a jour de owl en 2.3.4

+z

File size: 3.2 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
17-->]
18<style>
19    [#(#ENV{id-carousel,demo})] .owl-slide > .caption{
20        z-index: 100;
21        position: absolute;
22        left:55%;
23        width: 40%;
24        bottom:5%;
25    }
26    [#(#ENV{id-carousel,demo})] .owl-slide > .caption > .title{
27        background: #000;
28        color : #FFF;
29        padding: 5px;
30        width: auto;
31    }
32    [#(#ENV{id-carousel,demo})] .owl-slide > .caption > p {
33        background-color: rgba(88, 88, 88, 0.75) ;
34        /*float: right;*/
35        color: #FFF;
36        padding: 5px;
37    }
38</style>
39[(#REM) <!-- Diaporama -->]
40<div id="#ENV{id-carousel,demo}" class="owl-carousel owl-theme">
41            <BOUCLE_listDocs(DOCUMENTS){id_article?}{id_document==^((#ENV{docs}|replace{',',|}|sinon{.*}))$}{extension==jpg|png|gif}>
42            <div class="owl-slide"[ (#ENV{URLhashListener}|=={true}|oui)data-hash="#ENV{id-carousel,demo}#ID_DOCUMENT"]>
43                [(#ENV{caption,oui}|=={oui}|oui)
44                <div class="caption[ (#ENV{caption_css})]">[
45                    <h3 class="title">(#TITRE)</h3>][
46                    <p class="hidden-phone">(#DESCRIPTIF|textebrut)</p>]</div>]
47                    <a href="#FICHIER" class="js-colorbox"[ rel="diaporama(#ENV{id-carousel,demo})"]>
48                        <img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_reduire{650,450}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
49                    </a>
50            </div>
51            </BOUCLE_listDocs>
52</div>
53
54<script type="text/javascript">
55jQuery(function($){
56    $("[#(#ENV{id-carousel,demo})]").owlCarousel({
57        loop:true,[
58        items: (#ENV{items, 1}),][
59        margin:(#ENV{margin}),][
60        dots:(#ENV{dots, true}),][
61        nav:(#ENV{navigation, false}),][
62        autoplay: (#ENV{autoplay}),][
63        autoplayHoverPause: (#ENV{autoplayHoverPause}),][
64        lazyLoad: (#ENV{lazyLoad}),][
65        autoplayTimeout: (#ENV{autoplayTimeout}),][
66        autoHeight: (#ENV{autoHeight}),][
67        URLhashListener:(#ENV{URLhashListener}),
68        startPosition: 'URLHash',]
69        navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
70        responsive:{
71                0:{
72                 items:1
73                }[,
74                  640:{
75                   items:(#ENV{items})
76                }]
77        }
78    });
79
80    // Gallerie Colorbox
81    $("a.js-colorbox").colorbox({
82        rel:'diaporama#ENV{id-carousel,demo}',
83    });
84});
85</script>
Note: See TracBrowser for help on using the repository browser.