source: spip-zone/_plugins_/sjcycle2/modeles/sjcycle.html @ 43675

Last change on this file since 43675 was 43675, checked in by yffic@…, 10 years ago

Ajout de la possibilité de légender le diaporama avec un texte libre, le titre des images ou à partir d'un modèle

File size: 6.4 KB
Line 
1[(#REM)  L'appel depuis un article se fait par < sjcycleXX >, alors id_sjcycle=XX
2        ou par un modele  CROCHET(# MODELE{sjcycle}{id_article=XX})CROCHET , alors id_article=XX
3        (A noter que CROCHET(# MODELE{sjcycle}{id=XX})CROCHET ne fonctionne pas si le modele se trouve
4   dans une boucle, id prenant l'id de l'objet de la boucle. Donc on evite cette ecriture)
5]
6[(#SET{id_objet,       [(#ENV{id_sjcycle,     0})]})]
7[(#SET{id_diapo,          [(#ENV{id_diapo,       0})]})]
8[(#SET{img_width,      [(#ENV{width,                     #CONFIG{sjcycle/img_width}})]})]
9[(#SET{img_height,     [(#ENV{height,                    #CONFIG{sjcycle/img_height}})]})]
10[(#SET{img_position,   [(#ENV{position,                  #CONFIG{sjcycle/img_position}})]})]
11[(#SET{img_background, [(#ENV{background,                #CONFIG{sjcycle/img_background}})]})]
12[(#SET{div_background, [(#ENV{border_color,   #CONFIG{sjcycle/div_background}})]})]
13[(#SET{div_margin,     [(#ENV{div_margin,        #CONFIG{sjcycle/div_margin}})]})]
14[(#SET{img_bordure,    [(#ENV{border_width,   #CONFIG{sjcycle/img_bordure}})]})]
15[(#SET{legende,        [(#ENV{legende,        0})]})]
16[(#REM) largeur div = largeur image + 2*bordure ]
17[(#SET{div_width,  #GET{img_bordure}|mult{2}|plus{#GET{img_width}} })]
18[(#SET{div_height, #GET{img_bordure}|mult{2}|plus{#GET{img_height}} })]
19
20[(#SET{cssbox,  [(#EVAL{8}|randomString)]})]
21
22<B_img>
23        <script type="text/javascript">
24        $(document).ready(function() {
25                [(#CONFIG{sjcycle/tooltip}|=={on}|oui)
26                        $('.infobulle').tooltip({
27                                        bodyHandler: function() {
28                                                return $($(this).children(".textinfobulle")).html();
29                                        },
30                                        track: true,
31                                        delay: 0,
32                                        showURL: false,
33                                        opacity: 1,
34                                        fixPNG: true,
35                                        extraClass: "pretty",
36                                        top: -15,
37                                        left: 5
38                        });
39                ]
40                [(#CONFIG{sjcycle/fancy}|=={on}|oui)
41                        $("a.#GET{cssbox}").fancybox({
42                                'hideOnContentClick': false
43                        });
44                ]
45                [(#CONFIG{sjcycle/mediabox}|=={on}|oui)
46                        $("a.#GET{cssbox}").mediabox(box_settings);
47                ]
48                $("#dsjcycle_#GET{id_diapo}").cycle({
49                         fx:                    "#CONFIG{sjcycle/fx}",
50                         timeout:       "#CONFIG{sjcycle/timeout}",
51                         speed:         "#CONFIG{sjcycle/speed}",
52                         sync:          "#CONFIG{sjcycle/sync}",
53                         pause:         "#CONFIG{sjcycle/pause}",
54                         cleartype: 1
55                         [,(#ENV{opt}|html_entity_decode)]
56                         });
57        });
58
59
60        </script>
61        [(#REM) diaporama documents images conteneur jquery cycle ]
62        [(#SET{style,[float:(#ENV{align}|match{left|right});margin:[(#GET{div_margin})]px;][width:(#GET{div_width})px;][height:(#GET{div_height}|>{0}|oui)px;][background:(#GET{div_background})]})]
63   
64        <div class="#CONFIG{sjcycle/div_class}" id="dsjcycle_#GET{id_diapo}" style='#GET{style}'>
65
66        [(#REM) Solution de denisb pour eviter de dupliquer le code Cf http://article.gmane.org/gmane.comp.web.spip.zone/18622 ]
67
68        <BOUCLE_img(DOCUMENTS){id_article=#GET{id_objet}}{extension==jpg|png|gif}{id_document==^((#ENV{docs}|replace{',',|}|sinon{.*}))$}{par num titre, date}{doublons}>
69        <div>
70                [(#REM) Les effets de type turnLeft ne fonctionnent pas si ce div est en place. En attendant de corriger
71         rajout dans la doc de l'incompatibilité entre infobulles et ces effets. Du coup la bordure autour de l'image
72         ne se met pas en place non plus ]
73         
74         [(#CONFIG{sjcycle/tooltip}|=={on}|oui)
75                        <div class="infobulle" style="width:#GET{img_width}px;
76                                                                                [(#GET{img_height}|>{0}|oui)height:#GET{img_height}px;]
77                                    padding:0px;
78                                    margin:[(#GET{img_bordure})]px;">
79         ]
80         [(#CONFIG{sjcycle/fancy}|=={on}|ou{#CONFIG{sjcycle/mediabox}|=={on}}|oui)
81            <a href="[(#URL_DOCUMENT)]" type="#MIME_TYPE"
82                                         class="#GET{cssbox}"
83                                         rel="#GET{cssbox}"
84                                         [(#CONFIG{sjcycle/tooltip}|=={on}|non) title="[(#TITRE|supprimer_numero|attribut_html)]"]
85                                         style="display:block;padding:0px;margin:0px;">
86         ]
87         [(#GET{img_background}|=={'transparent'}|oui)
88            [(#FICHIER|image_reduire{ #GET{img_width},
89                                      #GET{img_height}}
90                      |image_alpha{0}
91                      |image_recadre{ #GET{img_width},
92                                      #GET{img_height},
93                                      #GET{img_position},
94                                      #GET{img_background}}
95                      |inserer_attribut{alt,[(#TITRE|supprimer_numero|attribut_html)]}
96                      |inserer_attribut{style,"display:block;"})]
97         ]
98         [(#GET{img_background}|=={'transparent'}|non)
99            [(#FICHIER|image_reduire{ #GET{img_width},
100                                      #GET{img_height}}
101                      |image_recadre{ #GET{img_width},
102                                      #GET{img_height},
103                                      #GET{img_position},
104                                      #GET{img_background}}
105                      |inserer_attribut{alt,[(#TITRE|supprimer_numero|attribut_html)]}
106                      |inserer_attribut{style,"display:block;"})]
107         ]
108         [(#CONFIG{sjcycle/fancy}|=={on}|ou{#CONFIG{sjcycle/mediabox}|=={on}}|oui)
109                </a>
110         ]
111         [(#CONFIG{sjcycle/tooltip}|=={on}|oui)
112            <div class="textinfobulle" style="display:none;text-align:left;">
113               [<h4>(#TITRE|supprimer_numero)</h4>]
114               [(#DESCRIPTIF)<br />]
115               [(#CONFIG{sjcycle/tooltip_carac}|=={on}|oui)
116                <strong>Original :</strong> l. #LARGEUR x L. #HAUTEUR pixels, [(#TAILLE|taille_en_octets)]
117               ]
118            </div>
119         </div> <!-- .infobulle -->
120         ]
121         [(#GET{legende}|oui|et{#GET{legende}|=={1}|oui})
122            [(#REM) La legende est cree a partir du titre de chaque image ]
123            [<div class="sjcycle_legende">(#TITRE)</div>]
124         ]
125                </div>
126        </BOUCLE_img>
127        </div><!-- sjcycle-->
128
129   [(#GET{legende}|oui|et{#GET{legende}|=={modele}|oui})
130         [(#REM) La legende est cree a partir du modele sjcycle_legende ]
131         [<div class="sjcycle_legende"  style='#GET{style}'>(#MODELE{sjcycle_legende}{id_article=#GET{id_objet}})</div>]
132   ]
133
134   [(#GET{legende}|oui|et{#GET{legende}|=={1}|non}|et{#GET{legende}|=={modele}|non})
135         [(#REM) La legende est cree a partir du texte fourni ]
136         [<div class="sjcycle_legende"  style='#GET{style}'>(#GET{legende})</div>]
137   ]
138
139</B_img>
Note: See TracBrowser for help on using the repository browser.