Your IP : 216.73.216.236

Current Path : /home/siteany/www/squelettes/modeles/
Upload File :
Current File : /home/siteany/www/squelettes/modeles/article_owl.html

[(#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 hasard}>
    <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="spip.php?rubrique62" >
                <img[(#ENV{lazyLoad}|=={true}|oui) class="owl-lazy"] data-src="[(#FICHIER|image_reduire{#ENV{largeur,650}}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
            </a>
    </div>
    </BOUCLE_listDocs>
</div>
<script type="text/javascript">
jQuery(function($){
    $("[#(#ENV{id-carousel,demo})]").owlCarousel({
        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>