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

Last change on this file was 111830, checked in by arnaud.berard@…, 6 weeks ago
  • A l'installation on ajoute la config header_prive qui permet d'utiliser les modeles dans l'espace privé
  • On déplace les styles css des modèles dans une feuille a part owl.modeles.css
  • correction sur les css du video player
  • correction sur l'intitulé de config pour l'export de config

+z

File size: 2.8 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[(#REM) <!-- Diaporama -->]
21<div id="#ENV{id-carousel,demo}" class="article_owl owl-carousel owl-theme">
22    <BOUCLE_listDocs(DOCUMENTS){id_article?}{id_document==^((#ENV{docs}|replace{',',|}|sinon{.*}))$}{extension==jpg|png|gif}>
23    <div class="owl-slide"[ (#ENV{URLhashListener}|=={true}|oui)data-hash="#ENV{id-carousel,demo}#ID_DOCUMENT"]>
24        [(#ENV{caption,oui}|=={oui}|oui)
25        <div class="caption[ (#ENV{caption_css})]">[
26            <h3 class="title">(#TITRE)</h3>][
27            <p class="hidden-phone">(#DESCRIPTIF|textebrut)</p>]</div>]
28            <a href="#FICHIER" class="mediabox"[ rel="diaporama(#ENV{id-carousel,demo})"][ title="(#TITRE|attribut_html|couper{80})"]>
29                <img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_reduire{650,450}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
30            </a>
31    </div>
32    </BOUCLE_listDocs>
33</div>
34<script type="text/javascript">
35jQuery(function($){
36    $("[#(#ENV{id-carousel,demo})]").owlCarousel({
37        loop:true,[
38        items: (#ENV{items, 1}),][
39        margin:(#ENV{margin}),][
40        dots:(#ENV{dots, true}),][
41        nav:(#ENV{navigation, false}),][
42        autoplay: (#ENV{autoplay}),][
43        autoplayHoverPause: (#ENV{autoplayHoverPause}),][
44        lazyLoad: (#ENV{lazyLoad}),][
45        animateIn:'(#ENV{animateIn})',][
46        animateOut:'(#ENV{animateOut})',][
47        autoplayTimeout: (#ENV{autoplayTimeout}),][
48        autoHeight: (#ENV{autoHeight}),][
49        URLhashListener:(#ENV{URLhashListener}),
50        startPosition: 'URLHash',]
51        navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
52        responsive:{
53                0:{
54                 items:1
55                }[,
56                  640:{
57                   items:(#ENV{items})
58                }]
59        }
60    });
61});
62</script>
Note: See TracBrowser for help on using the repository browser.