Plusieurs slides dans la page

Bonjour,
Je suis entrain de construire la page de présentation de Staff et de Joueurs d'une équipe de foot.
Sur cette page, j'ai mis deux colonnes, une à gauche et une à droite.
j'utilise exactement cette méthode, ( Pour moi c'est la démo 1) : http://www.menucool.com/javascript-image-slider
avec uniquement deux photos qui défilent pour chaque joueur. Il s'agit de javascript.
J'ai donc un fichier Html, un fichier css normal, un fichier slide.js et de nouveau un fichier CSS pour la mise en forme du slide avec deux photos qui défilent.
J'ai réussi à modifier le code de base afin que réduire les dimensions du slide et de son positionnement, mais il agit que pour les 2 photos d'un slide ( pour un seul joueur ), c'est à dire que, j'ai 25 joueurs et pour les 25 joueurs différents, je dois créer un fichier .js nommé différemment et 25 autres fichier CSS que pour le solde nommé différemment encore. Donc après mon Doctype, je me retrouve avec 25 fichiers CSS à définir au niveau du DOCTYPE, et 25 autre fichiers Js à déclarer. Le problème c'est que pour l'instant ja'i créé que 4 fichiers de chaque, et la transition des photos est sacadée, très lente, alors qu'avec un seul fichier, c'est fluide et rapide.
çà fait lourds je trouve.

y a t'il un moyen pour que les les slides fonctionnent avec une seul ou deux fcihier .Js et CSS ( un pour la colonne de gauche et l'autre pour la colonne de droite ? ( Car là c'est très très lourd et le rendu n'est pas le même avec tous ces fichiers qui sont sollicité sur une seule page HTML.)?
Pour être plus précis, voilà ce qu'il m'affiche ( une barre de recherche comme s'il ne trouvait pas les photos, alors que c'est le même code, mais par contre dès que je crée un nouveau fichier .js et Css pour chaque solide, là çà fonctionne ) :

Pièce jointe 144151

Afin d'être plus précis, je vous montre en image exactement ce que je dois faire pour que çà fonctionne ( pour que les images du slides fonctionnent, car sinon, une iage de barre de recherche apparait ).
ici, je dois créer 25 fichiers js et 25 fichiers CSS différents sinon, çà ne fonctionne pas. Et dans ces 25 fichiers, je dois modifier les noms des slides ( par exemple pour la transition de photos 2 çà sera #slides2,pour la transition de photos 3 çà sera #slides3, ect ... )

Pièce jointe 144152

Faut que je crée les 50 fichiers (25 css et 25 Js )

Pièce jointe 144153

Pièce jointe 144154

Pièce jointe 144155

Pour le fichier .js, je dois crée également 25 fichiers, en modifiant uniquement le code de la première ligne pour le chiffre e rouge en 1 puis 2 puis 3, jusqu'à 25 :
( Pour la fin du code, je n'ai pas tout mis, car trop long, mais cette partie là n'est pas à modifier )

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var sliderOptions= { sliderId: "slider1", startSlide: 0, effect: "series1", effectRandom: false, pauseTime: 2600, transitionTime: 500, slices: 12, boxes: 8, hoverPause: 1, autoAdvance: true, captionOpacity: 0.3, captionEffect: "fade", thumbnailsWrapperId: "thumbs", m: false, license: "b6t80" }; var imageSlider=new mcImgSlider(sliderOptions); /* Menucool Javascript Image Slider v2014.1.4. Copyright www.menucool.com */ function mcImgSlider(k){for(var T=function(a){return document.getElementById(a)},..................................................................................}

---

tu peux générer les fichier CSS et JS en PHP par exemple (ou dans n'importe quel autre langage côté serveur) et les appeler dans le code comme ça par exemple :

Code:

---

<script type="text/JavaScript" src="script-slider-js.php?numero=2"></script>

---

Bonjour Mathieu,
Merci de ta participation et du conseil. cependant je ne comprend pas vraiment ce que tu veux dire générer les fichiers CSS et JS en PHP :roll:
Mon soucis c'est que déja que je ne comprends pas tout encore en CSS et Html, alors e PHP c'est pour moi du chinois je dirai. C'est assez compliqué de tout assimilé en même temps.
Je ne comprends pas vraiment ce que tu me me dire et comment faire çà.
1- Il n'existe pas d'autres solution que d'utiliser du PHP pour contourner ce problème ne nombre de fichier à faire appel et ainsi alléger le chargement de ces photos slide ?
2- Dans ton exemple, je dois nommé un fichier numéro=2 ? ET les fichiers CSS auquels il doit faire appel pour chaque slide, on fait comment ? Je saisi pas tout, si tu peux m'éclairer.

Merci. ;)

pour plus d'informations sur le PHP, tu peux regarder là :
http://sylvie-vauthier.developpez.co...age=intro#LI-1

Salut mathieu.
je te remercie pour ton lieN, J'ai lu la première page et la seconde.
J'ai un petit soucis avec les codes et syntaxes en PHP. Je me perds avec le langage HTML et CSS. çà fait une passe d'information importante et c'est un peu la confusion pour moi.
Je ne comprends tout simplement pas comment mettre çà en place avec le PHP.
Je ne shématise pas du tout ce qu'il faut faire en PHP pour éviter de créer tous ces fichiers.

pour simplifier, on va dire que ton fichier script-slider-js.php contient le code suivant (à ne pas utiliser tel-quel, cela peut poser des problèmes de sécurité)

Code:

---

1 2 3 4

var sliderOptions= { sliderId: "slider<?php echo $_GET["num"];?>", };

---

quand tu l'appelleras avec "script-slider-js.php?num=2", le résultat retourné sera le suivant :

Code:

---

1 2 3 4

var sliderOptions= { sliderId: "slider2", };

---

et ainsi de suite en changeant "num=2" en "num=3", etc.

Salut Mathieu.
Merci d'essayer de m'expliquer.
En fait il y a plusieurs choses que je ne comprends pas :

1- Ce code que tu viens de me montrer, je le mets ou ? Je le mets dans le fichier un fichier PHP ? J'imagine que oui, au vu de l'extension du fichier

2- Dans ce cas je supprime donc le fichier JS ?

3- Je vois dans ton exemple les fichiers :
"script-slider-js.php",
"script-slider-js.php?num=2"
Donc ici aussi pour les 25 joueurs faut que je crée 25 fichiers ?
Je comprends pas du tout, j'ai du mal à shématiser ce qu'il faut faire.

4- La je ne cerne pas la méthode pour utiliser un seul fichier CSS et un seul fichier JS.

5- C'est quoi le lien lien avec la sécurité ? J'ai pas tout compris.

Quelqu'un m'a dit ceci mais ne parle pas de PHP:

Citation:

---

A première vue je dirais que c'est ton script de carrousel qui n'est pas adapté à ton usage.

Ta manière de procéder, en multipliant les fichiers, n'est pas bonne.
Non seulement c'est très mauvais pour les perfs, mais surtout c'est pas gérable sur le long terme
car cela signifie que tu devrais modifier le code et tes fichiers à chaque modifs/ajout/suppression d'un joueur …

Le Js n'est pas ma spécialité, mais a priori en restant sur ta solution, tu peux réduire le nombre de fichier js
car tu dois juste déclarer un new mcImgSlider(sliderOptions) pour chaque carrousels.

donc il te faut un système de variables qui prennent en compte chaque sliderID, une boucle te suffis.
Dans un premier temps ça te permettrais de limiter le nombre de fichier.

A mon avis il faut plutôt attribuer une classe commune à tes carrousels que tu puisse cibler avec un seul css et js

---