[AJAX] gallerie miniatures ajax
Bonjour,
Je voudrais, au lieu de l'habituel script genre lightBox, afficher la grande photo lorsque je clique sur une des miniatures, dans une zone sur ma page, sans avoir à la rafraichir (donc en AJAX je pense). C'est à dire que la grande photo ne s'affiche pas dans une popup mais sur la page.
Ma page est en php.
Voici mon code php ou j'affiche les miniatures :
Code:
1
2
|
echo '<img src="'.$grande.'" style="width:50px;height:50px;padding-right:0px;margin:0px;" class="img" />'; |
$grande correspond à un chemin déjà définit dans le code.
Et le code php qui affiche la zone ou je voudrais lors du clic de souris sur une miniature afficher la grande photo qui y correspond :
Code:
1
2
|
echo '<img src="'.$grande.'" id="cropbox" class="img" /> |
id="cropbox", ça signifie que j'utilise déjà une fonciton javaScript pour afficher ma grande photo à cet endroit là (je ne pense pas que cette dernière précision vous soit utile mais sait-on jamais).
Quelqu'un aurait-il une piste pour, récapitulons, afficher la grande photo dans la zone à partir du clic de souris sur une des miniatures ?
Edit:
Plusieurs problèmes :
1 - Je réussis à afficher une miniature, mais pas plusieurs (j'ai testé avec while ca maffiche la premiere a linfini, et sinon je n'arrive pas a afficher les miniatures dans le For ca naffiche rien)
2 - j'ai crée une fonction javascript pour afficher la grande photo quand on clique sur la miniature, mais ma grande photo ne saffiche pas sur ma page php, mais toute seule (comme quand on fait "clic droit > afficher limage")
Voici ma fonction js :
Code:
1
2
3
4
|
function ChangeImg(){
document.getElementById('#cropbox').src=<?php $grande ?>;
}; |
Voici ma boucle for ou je souhaite afficher mes miniatures tant qu'il y en a :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
|
for ($i = 1; $i<= 19; $i++){ //boucle qui permet dafficher les grandes photos tant quil en existe
if (file_exists($grande)){ //si la grande photo existe
echo '<tr><td>
<a href="'.$grande.'" ONCLICK="ChangeImg()">
<img src="'.$grande.'" style="width:50px;height:50px;padding-right:0px;margin:0px;" class="img" />
</a></td></tr><tr><td> </td></tr>';
$i = $flag_i++;
}
}
} |
indications :
$i est un compteur qui retient combien de fois on passe dans le bouton Ajouter (voir ci-dessous) ; donc qui retient le numéro de la grande photo ;
Formulaire d'ajout par lequel on enregistre une grande photo autant de fois qu'on le désire (dans ma boucle for j'ai mis 20 fois) :
Code:
1
2
3
4
5
6
|
<form action="mapage.php?id=truc'" method="POST" name="form_autre_grande" enctype="multipart/form-data" >
<input type="hidden" name="action" value="ajouterautregrande">
<tr><td> </td></tr>
<tr><td><input name="fileAutreGrande" type="file" id="file" /> <input type="submit" name="submit_autre_grande" value="Ajouter grande" class="submit" /></td></tr>
</form> |
Que manque-t-il ? Quelqu'un aurait-il une idée ?
Cordialement,
Ginger
