106 lines
3.9 KiB
HTML
106 lines
3.9 KiB
HTML
[(#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>
|