implémentation du Plugin Cloudcarousel.js
Bonjour.
Je suis nouveau sur ce forum, et si je viens vers vous aujourd'hui, c'est que j'ai un petit problème dans le développement du site web de mon associé (je suis graphiste indépendant.)
Ce site est un site en responsive, ou tout est en pourcentage.
Mon problème : J'utilise le plugin Jquery "Cloud Carousel" dans mon menu principal, des petits pictogrammes qui tournent en cercle donc.
http://www.professorcloud.com/mainsite/carousel.htm
Ces éléments sont contenus dans un conteneur appelé "cont_navig", dont le width et le height sont établis eux aussi en pourcentage.
Voici ma fonction faisant appel a CloudCarousel :
Code:
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>
$(document).ready(function(){
// This initialises carousels on the container elements specified, in this case, carousel1.
$(".cont_navig").CloudCarousel(
{
xPos:100,
yPos:80,
minScale:0.2,
xRadius:100,
yRadius:60,
autoRotateDelay: 1000,
speed:0.1,
FPS:30,
buttonLeft: $("#nav_l"),
buttonRight: $("#nav_r"),
altBox: $("#alt-text"),
titleBox: $("#title-text"),
autoRotate: 'left',
mouseWheel:true,
bringToFront:true
}
);
}); |
Le problème, c'est que xPos, yPos, xRdius et yRadius ne s'adapte bien sûr pas à la taille du contenaire (".cont_navig"), pour celà, il faudrais que je définisse un truc du genre :
Code:
xRadius:$(".cont_navig").width()/2,
(pour l'exemple de xRadius)
Donc j'ai essayé en faisant ça :
Code:
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
| <script>
$(document).ready(function(){
// This initialises carousels on the container elements specified, in this case, carousel1.
$(".cont_navig").CloudCarousel(
{
xPos:$(".cont_navig").width()/2,
yPos:$(".cont_navig").width()/2,
minScale:0.2,
xRadius:$(".cont_navig").width()/2,
yRadius:$(".cont_navig").height()/2,
autoRotateDelay: 1000,
speed:0.1,
FPS:30,
buttonLeft: $("#nav_l"),
buttonRight: $("#nav_r"),
altBox: $("#alt-text"),
titleBox: $("#title-text"),
autoRotate: 'left',
mouseWheel:true,
bringToFront:true
}
);
});
</script> |
Mais ça ne marche pas, je pense que c'est tout bonnement un problème de syntaxe, mais ça fait deux jours je suis dessus, et je n'y arrive pas.
