[(#REM)
	fork du modèle d'owl carousel

@param : id_article
@param : id-carousel : id unique du carousel
@param : caption : oui : Affiche la description de l'image.
@param : docs : 1,2,3 : selectionne individuellement les documents
@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.
]
<B_listDocs>
	[(#SET{plusieurs_photos, #TOTAL_BOUCLE|>{1}|?{true,false}})]
<style>
    [#(#ENV{id-carousel,demo})] .owl-slide > .caption{
        z-index: 100;
        position: absolute;
        left:55%;
        width: 40%;
        bottom:5%;
    }
    [#(#ENV{id-carousel,demo})] .owl-slide > .caption > .title{
        background: #000;
        color : #FFF;
        padding: 5px;
        width: auto;
    }
    [#(#ENV{id-carousel,demo})] .owl-slide > .caption > p {
        background-color: rgba(88, 88, 88, 0.75) ;
        /*float: right;*/
        color: #FFF;
        padding: 5px;
    }
</style>
[(#ENV{dots}|=={true}|et{#GET{plusieurs_photos}|=={true}}|oui)
	<script type="text/javascript">var Tliste_img = new Array;</script>
]
<div id="#ENV{id-carousel,demo}" class="owl-carousel owl-theme">
	<BOUCLE_listDocs(DOCUMENTS){id_article?}{extension==jpg|png|gif}{tout}{!par credits}{par id_document}>
	<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="js-colorbox boxWidth-95pc"[ rel="diaporama(#ENV{id-carousel,demo})"]>
			<img [(#ENV{lazyLoad}|=={true}|oui)class="owl-lazy" data-]src="[(#FICHIER|image_recadre{855:555,-,focus}|image_reduire{855,566}|extraire_attribut{src})]" alt="[(#TITRE|textebrut)]">
		</a>
		[(#ENV{dots}|=={true}|et{#TOTAL_BOUCLE|>{1}})
			<script type="text/javascript">Tliste_img.push('[(#FICHIER|image_recadre{105:70,-,focus}|image_reduire{105,70}|extraire_attribut{src})]');</script>
		]
	</div>
	</BOUCLE_listDocs>
</div>

<script type="text/javascript">
jQuery(function($){
    $("[#(#ENV{id-carousel,demo})]").owlCarousel({
        loop:true,[
        items: (#ENV{items, 1}),][
        margin:(#ENV{margin}),][
        dots:(#ENV{dots, false}),][
        nav:(#ENV{navigation, true}),][
        autoplay: (#ENV{autoplay}),][
        autoplayHoverPause: (#ENV{autoplayHoverPause}),][
        lazyLoad: (#ENV{lazyLoad}),][
        autoplayTimeout: (#ENV{autoplayTimeout}),][
        autoHeight: (#ENV{autoHeight}),][
        URLhashListener:(#ENV{URLhashListener}),
        startPosition: 'URLHash',]
        navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
//        navText : ["<:owlcarousel:prec:>","<:owlcarousel:suiv:>"],
      	responsive:{
      		0:{
      		 items:1
      		}[,
      		  855:{
      		   items:(#ENV{items})
      		}]
      	}
    });
    
    // Gallerie Colorbox
    $("a.js-colorbox").colorbox({
        rel:'diaporama#ENV{id-carousel,demo}',
    });
    
    // afficher les vignettes à la place des point de navigation
    if (#ENV{dots} && #GET{plusieurs_photos}) {
		$(".owl-dot span").each( function(i) {
			$(this).html('<img src="' + Tliste_img[i] + '">');
			
		});
    }
});
</script>
</B_listDocs>
	<div class="txtcenter placeholder">
		<!--<i class="fa fa-home ico_defaut"></i> -->
		<img src="[(#CHEMIN{img/logo_champslibres_placeholder.svg})]" alt="Pas de photo pour ce bien">
	</div>
<//B_listDocs>