Browse Source

ajout du modele article_owl + paramètres

pouvoir débrayer loop et rewind (bug des images clonées avec mediabox)
master
Fa_b 1 year ago
parent
commit
58099d8238
4 changed files with 87 additions and 10 deletions
  1. +5
    -1
      content/rubrique-portfolio.html
  2. +10
    -7
      inclure/article-dernier.html
  3. +69
    -0
      modeles/article_owl.html
  4. +3
    -2
      modeles/rubrique_owl.html

+ 5
- 1
content/rubrique-portfolio.html View File

@ -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">


+ 10
- 7
inclure/article-dernier.html View File

@ -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">


+ 69
- 0
modeles/article_owl.html View File

@ -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>

+ 3
- 2
modeles/rubrique_owl.html View File

@ -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}),][


Loading…
Cancel
Save