Discussion :

[Balthazar117]

Bonjour à tous

Je suis devant un petit souci en JS sur un projet assez urgent (que je présente demain).

Sur mon site, créé sous SPIP, j'affiche un galerie utilisant le plugin jQuery CrossSlide.
Le problème, c'est que les images de la galerie sont définies dans le javascript, et non dans le html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$('div#slider div').crossSlide(
{
 speed: 45,
 fade: 1
},
[
 { src: 'squelettes/img/gal/img1.jpg', dir: 'up'   	},
 { src: 'squelettes/img/gal/img2.jpg', dir: 'down' 	},
 { src: 'squelettes/img/gal/img3.jpg', dir: 'up'   	},
 { src: 'squelettes/img/gal/img4.jpg', dir: 'down' 	},
 { src: 'squelettes/img/gal/img5.jpg', dir: 'up' 	}
 ]);

Du coup, sous SPIP je ne peux pas boucler dessu.
La solution : créer une liste d'image html (<ul><li><img src=....) et recréer le tableau (paramètre de la fonction crossSlide) en javascript.
Ce que j'ai donc fait, je me retrouve avec une variable JS "finalTabImg" valant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[ { src: 'squelettes/img/gal/img1.jpg', dir: 'up' },{ src: 'squelettes/img/gal/img2.jpg', dir: 'down' },{ src: 'squelettes/img/gal/img3.jpg', dir: 'up' },{ src: 'squelettes/img/gal/img4.jpg', dir: 'down' },{ src: 'squelettes/img/gal/img5.jpg', dir: 'up' } ]

Donc en toute logique, j'ai fait cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// GALERE IMAGE SLIDER
$('div#slider div').crossSlide({
  speed: 45,
  fade: 1
},
finalTabImg );

Mais ca ne marche pas (cependant aucune erreur de code, le javascript n'est pas cassé)
Voilà, donc si vous avez une solution pour faire marcher ça, je vous en serait très reconnaissant !

Merci

[danielhagnoul]

Bonsoir Balthazar117.

Je ne vois pas de problème avec un array :

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
19
20
21
22
23
24
25
 
<script type="text/javascript">
    var tab = [
        {
            src: 'sand-castle.jpeg',
            dir: 'up'
        },
        {
            src: 'sunflower.jpeg',
            dir: 'down'
        },
        {
            src: 'flip-flops.jpeg',
            dir: 'up'
        },
        {
            src: 'rubber-ring.jpeg',
            dir: 'down'
        }
    ];
 
    $(document).ready(function(){
        $('#test1').crossSlide({speed: 45, fade: 1}, tab);
    });
</script>