Bonjour a tous, c'est la première fois que je poste sur ce forum,
Je réalise un site perso avec SPIP, je connais le html le css et la logique de spip,
mais je connais très mal le javascript, et je parviens à faire ce que je veux au gré des codes trouvés dans les tutos sur les forums etc.

J'ai d'ailleurs trouvé un diaporama en javascript qui me convient parfaitement: le ResponsivesSlides.js.

Bon ok ça marche sur mon site, le seul problème est que je veux plusieurs diaporamas sur ma page et le nombre est indeterminé. (chaque fois que je publie un article dans une boucle spip).

Dons je suis bloqué car l'id du diaporama est unique.
J'ai cherché sur le net est je vois que le problème est connue mais je suis pas parvenu à le résoudre...
Donc pour l'instant je le fais en dur, j'ai répéter mon code dans ma page avec un id différent à chaque fois et un css different.

Par contre j'ai trouvé un code javascript, pour faire apparaitre / disparaitre mes textes plusieurs fois sur la meme page, sans répéter le code.
donc je me dit qu'il doit y avoir une combine pour faire marcher mon diaporama de la même manière.

On peut le voir en ligne ici en page test

Voila, si quelqu'un comprend comment faire cela serait vraiment bien de m'aider


Voici mon code Javascript du diaporama

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function () {
      // Slideshow 2
      $("#slider").responsiveSlides({
        auto: false,pager:false,
        nav: true,speed: 700,maxwidth: 800,
        namespace: "transparent"
      });
      $("#slider2").responsiveSlides({
        auto: false,pager: false,
        nav: true,speed: 500,maxwidth: 800,
        namespace: "transparent_2"
      });
        $("#slider3").responsiveSlides({
        auto: false,pager: false,nav: true,
        speed: 500,maxwidth: 800,
        namespace: "transparent_3"
      });
});



Mon Html ( c'est du spip #LOGO_DOCUMENT = mes images
chaque boucle id_article=30 , id_article=29, id_article=16 = un article)


Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<BOUCLE_rubrique (RUBRIQUES){id_rubrique=1}>
<div class="content">
 
<BOUCLE_slider (ARTICLES){id_article=30}{par date}{inverse}>
<div class="rslides_container">
<h1>&#x25BA; #TITRE</h1>
<ul class="rslides" id="slider">		
<BOUCLE_s (DOCUMENTS){id_article}>
<li>
[(#LOGO_DOCUMENT)]
</li>
</BOUCLE_s>
</ul>
</div>
<div class="contenu_text">
<a href='#' class="toggle">╋</a>
<span class="test">#TEXTE</span>
</div>
</BOUCLE_slider>
 
<BOUCLE_slider2 (ARTICLES){id_article=29}{par date}{inverse}>
<div class="rslides_container">
<h1>&#x25BA; #TITRE</h1>
<ul class="rslides" id="slider2">		
<BOUCLE_s2 (DOCUMENTS){id_article}>
<li>
[(#LOGO_DOCUMENT)]
</li>
</BOUCLE_s2>
</ul>
</div>
<div class="contenu_text">
<a href='#' class="toggle">╋</a>
<span class="test">#TEXTE</span>
 
</div>
</BOUCLE_slider2>
 
<BOUCLE_slider3 (ARTICLES){id_article=16}{par date}{inverse}>
<div class="rslides_container">
<h1>&#x25BA; #TITRE</h1>
<ul class="rslides" id="slider3">		
<BOUCLE_s3 (DOCUMENTS){id_article}>
<li>
[(#LOGO_DOCUMENT)]
</li>
</BOUCLE_s3>
</ul>
</div>
<div class="contenu_text">
<a href='#' class="toggle">╋</a>
<span class="test">#TEXTE</span>
 
</div>
</BOUCLE_slider3>

Et mon css

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
/* ****! diaporama colonne gauche **** */
.rslides_container {position: relative;float: left;width: 100%;}
.rslides {position: relative;list-style: none;overflow: hidden;
  width: 100%;padding: 0;margin: 0;}
.rslides li {-webkit-backface-visibility: hidden;
  position: absolute;display: none;width: 100%;left: 0;top: 0;}
.rslides li:first-child {position: relative;display: block;float: left;}
.rslides img {display: block;text-align:center;height: auto;width: 75%;
  border: 0;margin:0 auto;}
 /*  *******************************
   Projet 1
*********************************** */
.transparent_nav {
  z-index: 3;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 0;
  left: 0;
  display: block;
  background: #fff; /* Fix for IE6-9 */
  opacity: 0;
  filter: alpha(opacity=1);
  width: 50%;
  text-indent: -9999px;
  overflow: hidden;
  height:100%;
cursor:w-resize;
  }
.transparent_nav.next {
  left: auto;
  right: 0;
    cursor:e-resize;
  }
.transparent_tabs li
 {
  display: inline;
  float: none;
  _float:right;
  *float:right;
  margin-left: 10px;
  }
 /*  *******************************
   Projet 2
*********************************** */
.transparent_2_nav {
  z-index: 3;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 0;
  left: 0;
  display: block;
  background: #fff; /* Fix for IE6-9 */
  opacity: 0;
  filter: alpha(opacity=1);
  width: 50%;
  text-indent: -9999px;
  overflow: hidden;
  height:100%;
  cursor:w-resize;}
 
.transparent_2_nav.next {
  left: auto;
  right: 0; 
     cursor:e-resize;}
 
 /*  *******************************
Projet 3
*********************************** */
 
.transparent_3_nav {
  z-index: 3;
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 0;
  left: 0;
  display: block;
  background: #fff; /* Fix for IE6-9 */
  opacity: 0;
  filter: alpha(opacity=1);
  width: 50%;
  text-indent: -9999px;
  overflow: hidden;
  height:100%;
  cursor:w-resize;
  }
 
.transparent_3_nav.next {
  left: auto;
  right: 0;
     cursor:e-resize;}




Et enfin le javascript de ma div afficher cacher pour mon texte:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
$(document).ready(function(){
      $('.test').hide();
 
      $('.toggle').click(function(){ 
           $(this).next('.test').toggle();
           return false;
      });
});</script>