source: spip-zone/_plugins_/slick/trunk/modeles/article_slick.html @ 115778

Last change on this file since 115778 was 115778, checked in by real3t@…, 8 months ago

[Slick] Ajout de 2 paramètres pour afficher titres et descriptions des images : |afftitre=oui et |affdesc=oui

File size: 2.9 KB
Line 
1[(#REM)<!-- # Slick - Portfolio Articles
2
3Gallerie portfolio avec d'article avec Slick
4Insertion du modele <articleX|slick>
5N'utilise pas la configuration générale du plugin, mais les paramètres suivants :
6
7@param : id_article
8@param : id-carousel : id unique du carousel
9@param : docs : 1,2,3 : sélectionne individuellement les documents
10@param : infinite : true ou false - revient à la diapo 1 après la dernière
11@param : speed : 300 - vitesse de transition
12@param : slidesToShow : 1 - nb images à montrer à la fois
13@param : slidesToScroll : 1 - nb images à faire défiler en même temps
14@param : centerMode : false ou true - centrer sur l'image (si slidesToShow > 1)
15@param : centerPadding : espace latéraux (si centerMode = true)
16@param : dots : false ou true - afficher les points de navigation
17@param : variableWidth : false ou true - diapositives de largeurs différentes
18@param : adaptiveHeight : false ou true - adapter la hauteur du diaporama à la hauteur de la diapositive
19@param : autoplay : false ou true - démarage automatique
20@param : autoplaySpeed : 300 - temps d'exposition d'une diapositive en mode démarrage automatique
21@param : fade : false ou true - effet de transition fondu
22@param : couleurNav - red, black, green... ou un code héxadécimal de couleur - couleur des navigation (flèches et points)
23@param : agrandir=oui - pour avoir un lien sur les images et les agrandir (Mediabox activé)
24
25-->]
26[(#ENV{slidePadding}|ou{#ENV{couleurNav}}|?{' '})<style type="text/css">
27[.slick-slide > * {
28    padding: (#ENV{slidePadding});
29    display: block;
30}][
31.slick-prev:before, .slick-next:before, .slick-dots li.slick-active button:before, .slick-dots li button:before { color:(#ENV{couleurNav}); }]
32</style>]
33[(#REM) <!-- Diaporama -->]
34<div id="#ENV{id-carousel,demo}">
35        <BOUCLE_listDocs(DOCUMENTS){id_article?}{id_document==^((#ENV{docs}|replace{',',|}|sinon{.*}))$}{extension==jpg|png|gif}{vu=non}>
36        <div>[
37                (#ENV{agrandir}|oui)<a href="#FICHIER" class="mediabox"[ rel="diaporama(#ENV{id-carousel,demo})"][ title="(#TITRE|textebrut|attribut_html)"]>]
38                <img src="[(#FICHIER|image_reduire{960,*}|extraire_attribut{src})]" alt="[(#TITRE|textebrut|attribut_html)]">
39                [(#ENV{afftitre}|oui)<div class="slick-titre">#TITRE</div>]
40                [(#ENV{affdesc}|oui)[<div class="slick-descriptif">(#DESCRIPTIF|ptobr)</div>]]
41                [(#ENV{agrandir}|oui)</a>]
42        </div>
43        </BOUCLE_listDocs>
44</div>
45
46<script type="text/javascript">
47jQuery(function($){
48        $("[#(#ENV{id-carousel,demo})]").slick({[
49                infinite:       (#ENV{infinite,true})][,
50                speed:          (#ENV{speed})][,
51                slidesToShow:   (#ENV{slidesToShow})][,
52                slidesToScroll: (#ENV{slidesToScroll})][,
53                centerMode:     (#ENV{centerMode})][,
54                centerPadding:  '(#ENV{centerPadding})'][,
55                dots:           (#ENV{dots})][,
56                variableWidth:  (#ENV{variableWidth})][,
57                adaptiveHeight: (#ENV{adaptiveHeight})][,
58                autoplay:       (#ENV{autoplay})][,
59                autoplaySpeed:  (#ENV{autoplaySpeed})][,
60                fade:           (#ENV{fade})]
61        });
62});
63</script>
Note: See TracBrowser for help on using the repository browser.