ajout du modele article_owl + paramètres

pouvoir débrayer loop et rewind (bug des images clonées avec mediabox)

content/rubrique-portfolio.html

@@ -10,12 +10,16 @@
             [(#PLUGIN{owlcarousel}|?{
                 #MODELE{rubrique_owl,
                         id_rubrique,
+                        id-carousel=microedition,
                         autoplay=true,
                         dots=false,
                         animateIn=false,
                         animateOut=fadeOut,
                         autoplayTimeout:4000,
-                        caption=non
+                        caption=non,
+                        lazyLoad=true,
+                        rewind=true,
+                        loop=false
                     }
                 ,
                 [<ul class="unstyled grid-1 has-gutter-l">

inclure/article-dernier.html

@@ -12,13 +12,16 @@
         <div class="col-6">
                 [(#PLUGIN{owlcarousel}|?{
                     #MODELE{article_owl,
-                            id_article,
-                            autoplay=true,
-                            dots=false,
-                            animateIn=false,
-                            animateOut=fadeOut,
-                            autoplayTimeout:4000,
-                            caption=non
+                        id-carousel=microedition,
+                        autoplay=true,
+                        dots=false,
+                        animateIn=false,
+                        animateOut=fadeOut,
+                        autoplayTimeout:4000,
+                        caption=non,
+                        lazyLoad=true,
+                        rewind=true,
+                        loop=false
                         }
                     ,
                     [<ul class="unstyled grid-1 has-gutter-l">

modeles/article_owl.html

@@ -0,0 +1,69 @@
+[(#REM)<!-- # OwlCarousel - Portfolio Articles
+
+Gallerie portfolio avec Owl Carousel
+Insertion du modele <articleX|owl>
+
+@param : id_article
+@param : id-carousel : id unique du carousel
+@param : tri : ordre de tri des documents (rang_lien !defaut)
+@param : caption : oui : Affiche la description de l'image.
+@param : docs : 1,2,3 : selectionne individuellement les documents
+@param : items : 2 : le nombre d'items affiches ensemble
+@param : slideBy : le nombre d'items qui defilent ensemble
+@param : dots : true par defaut : affiche les points de navigation
+@param : navigation : true par defaut : affiche les boutons précédents suivants
+@param : caption_css : ajouter des css sur la description (par exemple : invisible).
+@param : autoplay : true (false par défaut) : le carousel démarre automatiquement.
+@param : autoplayHoverPause : true (false par défaut) : pause sur le rollHover en mode autoplay
+@param : lazyLoad : true (false par défaut) : ne charge que les images visibles pour optimiser le chargement.
+@param animateIn - une animation css3 , `fadeOut` est la seul fournie par owl, sinon ajouter animate.css
+@param animateOut - une animation css3 , `fadeOut` est la seul fournie par owl, sinon ajouter animate.css
+@param : largeur : la dimension maxi des images, et donc du diaporama
+@param : left|center|right : alignement
+
+-->]
+[(#REM) <!-- Diaporama -->]
+<div id="#ENV{id-carousel,demo}" class="article_owl owl-carousel owl-theme[ spip_documents_(#ENV{align})]"[ style="max-width:(#ENV{largeur})px"]>
+    <BOUCLE_listDocs(DOCUMENTS){id_article?}{id_document==^((#ENV{docs}|replace{',',|}|sinon{.*}))$}{extension==jpg|png|gif}{par #ENV{tri, rang_lien}}>
+    <div class="owl-slide"[ (#ENV{URLhashListener}|=={true}|oui)data-hash="#ENV{id-carousel,demo}#ID_DOCUMENT"]>
+        [(#ENV{caption,oui}|=={oui}|oui)
+        <div class="caption[ (#ENV{caption_css})]">[
+            <h3 class="title">(#TITRE)</h3>][
+            <p class="hidden-phone">(#DESCRIPTIF|textebrut)</p>]</div>]
+            <a href="#FICHIER" class="mediabox"[ rel="diaporama-(#ENV{id-carousel,demo})"][ title="(#TITRE|attribut_html|couper{80})"]>
+                <img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_reduire{#ENV{largeur,650},450}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
+            </a>
+    </div>
+    </BOUCLE_listDocs>
+</div>
+<script type="text/javascript">
+jQuery(function($){
+    $("[#(#ENV{id-carousel,demo})]").owlCarousel({
+        [rewind: (#ENV{rewind,true})],[
+        loop: (#ENV{loop,true})],[
+        items: (#ENV{items, 1}),][
+        slideBy:(#ENV{slideBy}),][
+        margin:(#ENV{margin}),][
+        dots:(#ENV{dots, true}),][
+        nav:(#ENV{navigation, false}),][
+        autoplay: (#ENV{autoplay}),][
+        autoplayHoverPause: (#ENV{autoplayHoverPause}),][
+        lazyLoad: (#ENV{lazyLoad}),][
+        animateIn:'(#ENV{animateIn})',][
+        animateOut:'(#ENV{animateOut})',][
+        autoplayTimeout: (#ENV{autoplayTimeout}),][
+        autoHeight: (#ENV{autoHeight}),][
+        URLhashListener:(#ENV{URLhashListener}),
+        startPosition: 'URLHash',]
+        navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
+      	responsive:{
+      		0:{
+      		 items:1
+      		}[,
+      		  640:{
+      		   items:(#ENV{items})
+      		}]
+      	}
+    });
+});
+</script>

modeles/rubrique_owl.html

@@ -30,7 +30,7 @@ Insertion du modele <articleX|owl>
         <div class="caption[ (#ENV{caption_css})]">[
             <h3 class="title">(#TITRE)</h3>][
             <p class="hidden-phone">(#DESCRIPTIF|textebrut)</p>]</div>]
-            <a href="#FICHIER" class="mediabox"[ rel="diaporama(#ENV{id-carousel,demo})"][ title="(#TITRE|attribut_html|couper{80})"]>
+            <a href="#FICHIER" class="mediabox"[ rel="diaporama-(#ENV{id-carousel,demo})"][ title="(#TITRE|attribut_html|couper{80})"]>
                 <img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_reduire{#ENV{largeur,650},450}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
             </a>
     </div>
@@ -39,7 +39,8 @@ Insertion du modele <articleX|owl>
 <script type="text/javascript">
 jQuery(function($){
     $("[#(#ENV{id-carousel,demo})]").owlCarousel({
-        loop:true,[
+        [rewind: (#ENV{rewind,true})],[
+        loop: (#ENV{loop,true})],[
         items: (#ENV{items, 1}),][
         slideBy:(#ENV{slideBy}),][
         margin:(#ENV{margin}),][