source: spip-zone/_plugins_/nivoslider/trunk/modeles/nivoslider_base.html @ 85378

Last change on this file since 85378 was 85378, checked in by cedric@…, 6 years ago

Refactoring du JS et chargement async des photos dans le slider :

  • chargement du JS par getScript insere dans le modele et pas par affichage_final (plus robuste aux chargements ajax de slider)
  • JS encapsule dans un workspace, renommage raccourci des fonctions
  • le chargement de l'image suivante repere l'image active et veririe l'image courante et l'image suivante, il est appele avant/apres changement, ce qui rend robuste a la navigation non sequentielle par les pastilles de navigation
File size: 4.8 KB
Line 
1[(#REM) modele Nivoslider generique, utilise par les autres modeles
2        Parametres :
3        Selection des documents
4                id_objet
5          objet
6          id_document
7          vu
8          limite
9        Affichage du slider
10                width:                  hauteur
11                height:                 largeur
12                effect: random, sliceDownRight, sliceDownLeft, sliceUpRight, sliceUpLeft, sliceUpDown,
13            sliceUpDownLeft, fold, fade, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse
14                slices:
15                animSpeed:
16                pauseTime:
17                directionNav:
18                directionNavHide:
19                controlNav:
20                keyboardNav:
21                pauseOnHover:
22                captionOpacity:
23                imageAlign:
24                imageBackcolor:
25                controlNavThumbs:
26                controlNavThumbsWidth:
27                controlNavThumbsHeight:
28    manualAdvance:
29]
30
31[(#SET{resize,[(#ENV{resize,oui})]})]
32[(#SET{width,[(#ENV{width, #CONFIG{nivoslider/width, 500} })]} )]
33[(#SET{height,[(#ENV{height, #CONFIG{nivoslider/height, 240} })]} )]
34[(#SET{effect,[(#ENV{effect, #CONFIG{nivoslider/effect, random} })]} )]
35[(#SET{slices,[(#ENV{slices, #CONFIG{nivoslider/slices,15} })]} )]
36[(#SET{animSpeed,[(#ENV{animSpeed, #CONFIG{nivoslider/animSpeed,500} })]} )]
37[(#SET{pauseTime,[(#ENV{pauseTime, #CONFIG{nivoslider/pauseTime,3000} })]} )]
38[(#SET{directionNav,[(#ENV{directionNav, #CONFIG{nivoslider/directionNav,true} })]} )]
39[(#SET{manualAdvance,[(#ENV{manualAdvance, #CONFIG{nivoslider/manualAdvance,false} })]} )]
40[(#SET{controlNav,[(#ENV{controlNav, #CONFIG{nivoslider/controlNav,true} })]} )]
41[(#SET{keyboardNav,[(#ENV{keyboardNav, #CONFIG{nivoslider/keyboardNav,false} })]} )]
42[(#SET{pauseOnHover,[(#ENV{pauseOnHover, #CONFIG{nivoslider/pauseOnHover,true} })]} )]
43[(#SET{imageAlign,[(#ENV{imageAlign, #CONFIG{nivoslider/imageAlign,'center'} })]} )]
44[(#SET{imageBackcolor,[(#ENV{imageBackcolor, #CONFIG{nivoslider/imageBackcolor,'transparent'} })]} )]
45[(#SET{controlNavThumbs,[(#ENV{controlNavThumbs, #CONFIG{nivoslider/controlNavThumbs,false} })]} )]
46[(#SET{controlNavThumbsWidth,[(#ENV{controlNavThumbsWidth, #CONFIG{nivoslider/controlNavThumbsWidth,50} })]} )]
47[(#SET{controlNavThumbsHeight,[(#ENV{controlNavThumbsHeight, #CONFIG{nivoslider/controlNavThumbsHeight,50} })]} )]
48
49[(#SET{uniqid,#ENV|md5|substr{0,8}})]
50#SET{nolazy,#ENV{nolazy,#GET{controlNavThumbs}|=={'true'}|oui}}
51<B_doc>
52<div class='nivoSlider-wrap[ nav-(#GET{controlNavThumbs}|=={'true'}|?{thumb,bullet})]'
53        [(#GET{resize}|=={oui}|oui)style="[max-width:(#GET{width})px;][max-height:(#GET{height})px]"]>
54        <div id="slider_#GET{uniqid}"
55             class="nivoSlider"
56                   data-slider="{
57                                effect:'[(#GET{effect})]',
58                                slices:[(#GET{slices}|intval)],
59                                boxCols: 8,
60                                boxRows: 4,
61                                animSpeed:[(#GET{animSpeed}|intval)],
62                                pauseTime:[(#GET{pauseTime}|intval)],
63                                startSlide: 0,
64                                directionNav:[(#GET{directionNav}|=={true}|?{true,false})],
65                                [(#GET{controlNavThumbs}|=={'true'}|oui)
66                                controlNav:true,
67                                controlNavThumbs:true,
68                                ]
69                                [(#GET{controlNavThumbs}|=={'true'}|non)
70                                controlNav:[(#GET{controlNav}|=={true}|?{true,false})],
71                                ]
72                                pauseOnHover: [(#GET{pauseOnHover}|=={true}|?{true,false})],
73                                manualAdvance: [(#GET{manualAdvance}|=={true}|?{true,false})],
74                                prevText: '<:precedent|ucfirst|attribut_html|texte_script:>',
75                                nextText: '<:suivant|ucfirst|attribut_html|texte_script:>',
76                                randomStart: false
77                   }">
78        <BOUCLE_doc(DOCUMENTS)
79                {id_objet?}{objet?}
80                {id_document?}
81                {mode?}
82                {extension IN png,jpg,gif}
83                {par num titre,titre}
84                {doublons}
85                {vu?}
86                {0,#ENV{limite,1000}}>
87
88                #SET{lien,''}
89                [(#DESCRIPTIF|oui)
90                        [(#SET{lien,#VAL{'spip.php?'#DESCRIPTIF}|attribut_html|replace{' ',''}})]
91                        [(#SET{fancyornot,''})]
92                        [(#DESCRIPTIF|match{doc}|=={doc}|?{
93                                [(#PLUGIN{FANCYBOX}|oui)
94                                        [(#SET{fancyornot, [(#CONFIG{fancybox/selecteur_commun,'.fancybox'}|replace{'\.',''})]})]
95                                ]
96                                [(#SET{lien, #URL_DOCUMENT})]
97                        })]
98                        [(#DESCRIPTIF|match{http}|=={http}|?{
99                                [(#SET{lien, [(#DESCRIPTIF|textebrut)]})]
100                        })]
101                ][
102                <a href="(#GET{lien})" [class="(#GET{fancyornot})"]>
103                ][(#SET{img,[(#GET{resize}|=={oui}|?{
104                                [(#FICHIER
105                                                |image_passe_partout{#GET{width},#GET{height}}
106                                                |image_recadre{#GET{width},#GET{height}})]
107                                ,
108                                [(#FICHIER|balise_img)]
109                                })]
110                                })][(#SET{img,[(#GET{img}
111                                |inserer_attribut{title,#TITRE}
112                    |nivoslider_img_display_first_only{#COMPTEUR_BOUCLE,#GET{nolazy}}
113                    |inserer_attribut{class,'no_image_filtrer no-adapt-img'})]
114                })][(#GET{controlNavThumbs}|=={'true'}|?{
115                        [(#GET{img}|inserer_attribut{data-thumb,#FICHIER|image_passe_partout{#GET{controlNavThumbsWidth},#GET{controlNavThumbsHeight}}|image_recadre{#GET{controlNavThumbsWidth},#GET{controlNavThumbsHeight},center,ffffff}|extraire_attribut{src}})]
116                ,
117                        [(#GET{img})]
118                })][</a>(#GET{lien}|oui)
119        ]</BOUCLE_doc>
120        </div>
121        [<script>/*<!\[CDATA\[*/var nivosliderpath = '[(#CHEMIN{javascript/jquery.nivo.slider.pack.js}|timestamp)]';
122        (#INCLURE{javascript/nivoslider.init.js}|compacte{js})/*\]\]>*/</script>]
123</div>
124</B_doc>
Note: See TracBrowser for help on using the repository browser.