Discussion :

[pasc06]

Bonjour

J'ai un petit souci:

Je réalise une page qui présentera une liste d'hôtel avec pour chaque hotel un caroussel pour les photos.

Le problème est que quand je copie le caroussel pour le 2ème hotel il ne s'affiche pas correctement...

Voici une copie d'écran:


La page est visible à cette adresse:
http://www.comeric.fr/pascal/help2/hotels.htm

Vous pouvez télécharger les fichiers en suivant ce lien:
http://www.comeric.fr/pascal/help2/help2.rar

Merci d'avance pour votre aide

[kimjoa]

salut

Code :

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

1
2
3
$(document).ready(function() {
    $('#mycarousel').jcarousel();
});

Tu sélectionnes un id, il ne peut n'en avoir qu'un ! Faut que tu passes une classe css, comme ".mycarousel", sans oublier de renseigné cette classe dans tes éléments hml !

[pasc06]

Je crains malheureusement que je ne sois pas assez doué pour ça...

[ABCIWEB]

Je crains malheureusement que je ne sois pas assez doué pour ça...

On sait si l'on est doué une fois que l'on a travaillé et visiblement il te manque la deuxième partie. Je veux dire par là qu'il te manque pas mal de notions pour te lancer dans ton projet, et que sauf à tout faire à ta place tu n'avanceras pas si tu n'apprend pas le b.a.b.a de javascript et de css.

Bon pour t'aider quand même un peu tu vois que tu n'a lancé que le caroussel pour l'id "mycarousel" avec :

Code :

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

1
2
3
 $(document).ready(function() {
    $('#mycarousel').jcarousel();
});

c'est donc normal qu'il n'y ait que celui-ci qui fonctionne. Si tu veux faire fonctionner le deuxième qui porte l'id "mycarousel2" tu pourrais peut-être tenter de faire pareil soit :

Code :

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

1
2
3
4
 $(document).ready(function() {
    $('#mycarousel').jcarousel();
    $('#mycarousel2').jcarousel();
});

Je ne connais rien au programme "jcaroussel" lui-même mais c'est le principe. Cela dit tu vois qu'avec cette méthode il faudra, pour chaque nouvel hotel que tu rentre, ajouter dans ton code javascript une nouvelle ligne correspondant à l'id html.

C'est à ce niveau que la remarque de kimjoa peut t'aider car il peut y avoir plusieurs classes identiques (contrairement au id) dans un même document. Donc si tu nomme tous tes "ul" en faisant

Code :

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

<ul class="mycarousel jcarousel-skin-tango">

si le code est bien programmé tu devrais pouvoir simplement écrire dans ton code javascript un truc dans le genre (sans rien avoir à rajouter quand tu rajoutera des caroussels dans ton html)

Code :

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

1
2
3
4
5
6
 $(document).ready(function() {
    $('.mycarousel').each(function()
    {
        $(this).jcarousel();
    })
});

[pasc06]

Merci pour ton aide..! ça marche parfaitement !