Galleries d'image multiples sur une même page [Résolu]

Signaler
Messages postés
4
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
21 novembre 2006
-
Messages postés
224
Date d'inscription
lundi 19 décembre 2005
Statut
Membre
Dernière intervention
6 juin 2007
-
bonjour à tous

c'est mon premier post.
je suis débudébudébutant et aurais besoin de vos bons conseils.


j'ai 5 images sur ma page.A1, B1, C1, D1, et E1.
chaque image est la premiere d'une série de x images.

quand je clique sur A1, elle est remplacé par A2, puis par A3 et ainsi de suite jusqu'à la dernière image de la série et termine la boucle sur A1.

idem pour B1, C1,D1 et E1

jusque là pas de problème, j'y arrive assez simplement avec des css et autant de pages html que d'images.

sauf que lorsque je fais défiler les images, A par exemple... les autres images reviennent sur la premiere image de chaque série.

j'aimerais parvenir à visionner chaque série indépendamment des autres et pouvoir voir sur ma page, en même temps par exemple A8, B2, C5, D3 et E10.
que chaque fois que je clique sur une image, ça ne change rien au reste de la page.

J'imagine que la solution vient de php et/ou de javascript.
J'ai chercher dans les codes et tutoriaux à droite et à gauche mais j'arrive pas à trouver des pistes assez simples pour mon niveau.

si vous avez des idées
meeeerci

8 réponses

Messages postés
4
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
21 novembre 2006

un petit message en particulier pour the rubik's man
http://cucaracha.fr/rubik/index.html

et de toute façon merci à tous ceux qui contribuent à la bonne santé de ce site indispensable!


Je m'en vais avancer mon site
ça m'étonnerait que je ne rencontre pas un nouveau problème sous peu...
Sans doute à bientôt

ciao
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007

Bonjour




"autant de pages html que d'images" hum !! C'est lourd !  Il est possible de changer la propriété src d'une image par javascript :
Messages postés
224
Date d'inscription
lundi 19 décembre 2005
Statut
Membre
Dernière intervention
6 juin 2007
2
Salut

Je te conseille d'utiliser ma source a cette adresse :
http://www.javascriptfr.com/codes/SLIDESHOW_39684.aspx

Voila tout est déjà fait avec animation comparable a flash etc...

-- The Rubik's Man --
Messages postés
4
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
21 novembre 2006

débutant avais-je bien précisé...

ce qui veut dire que je ne sais pas où placer le petit bout de code javascript de Roro....
et puis pour le module of the rubik's man, je l'ai installé tel quel sur mon site et ça me donne:

"Warning: main(./SlideShow_module/require_lib/img_auto_import_lib.php) [function.main]: failed to open stream: No such file or directory in /home/cucarach/www/javascriptfr_source_39684/exemple1.php on line 26

Fatal error: main() [function.require]: Failed opening required './SlideShow_module/require_lib/img_auto_import_lib.php' (include_path='.:/usr/local/lib/php') in /home/cucarach/www/javascriptfr_source_39684/exemple1.php on line 26


débutant hé hé....
si ça ne vous fait pas trop suer de me prendre par la main...

merci déjà pour ces réponses

pour info, vous pouvez allez voir là où j'en suit à :
http://cucaracha.fr/essaisimple2/html/index.html

Youkiwoooooooouf
Messages postés
224
Date d'inscription
lundi 19 décembre 2005
Statut
Membre
Dernière intervention
6 juin 2007
2
Bon ok j'ai vu ton site et l'utilisation de ma librairie n'a pas trop d'utilité pour toi surtout si tu es un vrai débutant .

Donc j'ai fais ton code.
Cependant cela marche pour 5 images différentes dans chaque catégorie si tu veux que ca marche avec plus tu changes la variable " nbrMaxImage = le nombre que tu veux "
Mais ce qui est sûr c'est que mon code fonctionne uniquement si tu as le même nombre d'image dans chaque catégorie !!!

voila le code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>essai avec css externe</title>
  <meta name="generator" content="BBEdit 7.0">
  <script type="text/javascript">
   var nbrMaxImage = 5;
   
   var A = 1;
   var B = 1;
   var C = 1;
   var D = 1;
   var E = 1;
   
   function nextImage(whichCat,imgElement) {    eval(whichCat+" "+whichCat+" "+nbrMaxImage+" ? 1 : "+whichCat+" + 1;");
    var newIndex = eval(whichCat);
    eval("imgElement.src="../images/"+whichCat+newIndex+".jpg"");
    return false;
   }
  </script>
  <LINK rel="StyleSheet" type="text/css" href="style.css"> 
 </head>
 
  
[#

  
]

  
[#

  
]

  

 
 
</html>

voila bonne prog

@+

-- The Rubik's Man --
Messages postés
4
Date d'inscription
samedi 18 novembre 2006
Statut
Membre
Dernière intervention
21 novembre 2006

Merci the rubik's man!!!!
c'est vraiment gentil de t'être donné cette peine.

un truc que je ne comprend pas...
Sur mon ordi, ça fonctionne pas mais une fois chargé sur le serveur ça fonctionne impec
en tout cas avec firefox, mon préféré
http://cucaracha.fr/essaisimple3/html/index.html

sinon j'ai quand même quelques problèmes.
Sur Safari, il y a un petit trait bleu qui apparait en haut à gauche.
pas de quoi fouetter un chat. mais si tu sais d'ou ça vient...
et sur explorer mac, ça n'a pas l'air de fonctionner du tout.

et puis une dernière chose...tant que j'y suis;
c'est difficile de rendre chaque serie d'images indépendante?
pasque evidemment, j'ai des series qui n'ont pas vraiment le même nombre d'image.
(sinon, la solution, serait de répéter certaines images)


Allez ciao à tous


Youkiwooooouf
Messages postés
224
Date d'inscription
lundi 19 décembre 2005
Statut
Membre
Dernière intervention
6 juin 2007
2
Bon donc voila j'ai refais le code pour que le nombre d'images par séries soit indépendant et j'ai aussi réglé le problème de la ligne bleue... en fait c'était car tu as oublié de fermer la balise de l'ancre c'est à dire qu'il manque les ""
Tu indique le nombre d'images dans chaque série en affectant la variable de maximum qui lui correspond. enfin je pense que tu vas comprendre en voyant le code

Donc voici le code :

<html>
 <head>
  <title>essai avec css externe</title>
  <meta name="generator" content="BBEdit 7.0">
  <script type="text/javascript">
   var nbrMaxImageA = 5;
   var nbrMaxImageB = 5;
   var nbrMaxImageC = 5;
   var nbrMaxImageD = 5;
   var nbrMaxImageE = 5;
   
   var A = 1;
   var B = 1;
   var C = 1;
   var D = 1;
   var E = 1;
   
   function nextImage(whichCat,imgElement) {
    var currentMax = eval('nbrMaxImage'+whichCat);    eval(whichCat+" "+whichCat+" "+currentMax+" ? 1 : "+whichCat+" + 1;");
    var newIndex = eval(whichCat);
    eval("imgElement.src="../images/"+whichCat+newIndex+".jpg"");
    return false;
   }
  </script>
  <LINK rel="StyleSheet" type="text/css" href="style.css"> 
 </head>
 
  
[# ]

  
[# ]

  
[# ]

  
[# ]

  
[# ]
 
 
</html>

-- The Rubik's Man --
Messages postés
224
Date d'inscription
lundi 19 décembre 2005
Statut
Membre
Dernière intervention
6 juin 2007
2
Franchement un grand merci à toi.... je ne sais pa quoi te dire.... c'est franchement cool de voir des personnes comme toi et pas des personnes qui dès qu'elles ont ce qu'elles veulent ne disent meme pas merci et dont on a jamais de nouvelles...

Voilà ben bonne continuation et encore merci

@+

-- The Rubik's Man --