Affichage en taille normale avec fond transparent après clic sur images provenant d'une bd

**wallash** · 06/05/2011, 10h17

Salut à vous, j'affiche dans une page web les images réduites dont les noms sont stockés dans une base de donnée et j'aimerais que lorsqu'on clique sur le lien de ces images, elles s'affichent avec leurs tailles normales sur la même page avec un fond transparent.
J'ai donc essayer d'utiliser le plugin lightbox http://leandrovieira.com/projects/jquery/lightbox/pour le faire mais le problème qui se pose c'est que seule la première image s'affiche comme je veux c'est à dire avec fond transparent, les autres images s'affichent mais sans fond transparent, vous pouvez le voir ici http://catalogue.joanescom.com. Aidez moi à faire en sorte que toutes les images puissent s'afficher en taille normale lorsqu'on clique dessus.
voici le code

Code php :

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

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<?php 
include("fonctions/fonctions.php");
connexion();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bienvenu dans le Catalogue de Joanes Equipement !</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript"> 
    $(document).ready(function() 
	{
        $(function() {
             $('#gallery a').lightBox();
         });
    });
 
</script>
<link rel="stylesheet" type="text/css" href="css/catalogue.css"></link>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /></link>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<?php 
// $NbrCol : le nombre de colonnes
// $NbrLigne : calcul automatique a la FIN
// -------------------------------------------------------
// (exemple)
$NbrCol = 2;
// La requete (exemple) :
// toutes les "CHOSE" commençant par un "b", classées par ordre alphabétique.
$query = "SELECT * FROM  section ORDER BY nomsection";
$result = mysql_query($query);
// -------------------------------------------------------
// nombre de cellules a remplir
$NbreData = mysql_num_rows($result);
// -------------------------------------------------------
// affichage
$NbrLigne = 0;
if ($NbreData != 0) {
   $j = 1;
   echo '<table border="0" cellspacing="20px" cellpadding="10px" width="700" style="position: absolute; left:50%; margin-left:-350px; height:auto; margin-top: 80px; ">';
   echo '<tr>';
   echo '<td colspan="4" height="100" class="titre">Catalogue Joanes Equipement</td>';
   echo '</tr>';
   while ($val = mysql_fetch_array($result)) {
      if ($j%$NbrCol == 1) {
         $NbrLigne++;
         echo "<tr>";
         $fintr = 0;
      }
      echo '<td><div id="gallery">';
      // -------------------------
      // DONNEES A AFFICHER dans la cellule
      echo '<a href="img/sections/'.$val['img'].'"><img src="img/sections/'.$val['img'].'" width="70" style="border: 1px solid #CCCCCC;" title="Cliquez pour agrandir l\'image svp ! "></a>';
      echo '</div></td>';
      echo '<td>';
      echo '<a href="categories.php?section='.$val['idsection'].'" style="font-size:12px;">'.$val['nomsection'].'</a>';
      // -------------------------
      echo '</td>';
      if ($j%$NbrCol == 0) {
         echo "</tr>"; 
         $fintr = 1;
      }
      $j++;
   }
   // derniere balise /tr
   if ($fintr!=1) { echo '</tr>'; }
   echo '<tr>';
   echo '<td colspan="4" height="100" class="footer">Copyright &copy; Joanes Sarl 2011</td>';
   echo '</tr>';
   echo '</table>';
} else {
   echo 'pas de données à afficher';
}?>
<?php 
$connecte = connexion();
mysql_close($connecte);
?>
</body>
</html>

**Bovino** · 06/05/2011, 13h20

Déjà, merci de lire Important : Les règles incontournables d'utilisation de ce forum et de poster le code HTML généré et non le PHP !

Sinon, un id doit être unique dans la page.

**wallash** · 06/05/2011, 18h35

Bovino merci pour la précision, ça veut dire que l'id serait une variable php qui contiendrait les valeurs issues de la bd, et comment spécifier cela dans la fonction javascript ? pour qu'elle puisse être dynamique ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bienvenu dans le Catalogue de Joanes Equipement !</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript"> 
    $(document).ready(function() 
	{
        $(function() {
             $('#gallery a').lightBox();
         });
    });
 
</script>
<link rel="stylesheet" type="text/css" href="css/catalogue.css"></link>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /></link>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table border="0" cellspacing="20px" cellpadding="10px" width="700" style="position: absolute; left:50%; margin-left:-350px; height:auto; margin-top: 80px; "><tr><td colspan="4" height="100" class="titre">Catalogue Joanes Equipement</td></tr><tr><td><div id="gallery"><a href="img/sections/Appareil_Serigraphier.png"><img src="img/sections/Appareil_Serigraphier.png" width="70" style="border: 1px solid #CCCCCC;" title="Cliquez pour agrandir l'image svp ! "></a></div></td><td><a href="categories.php?section=5" style="font-size:12px;">Autres Equipements</a></td><td><div id="gallery"><a href="img/sections/Four_rotatif_a_convection_RCO_30.gif"><img src="img/sections/Four_rotatif_a_convection_RCO_30.gif" width="70" style="border: 1px solid #CCCCCC;" title="Cliquez pour agrandir l'image svp ! "></a></div></td><td><a href="categories.php?section=1" style="font-size:12px;">Equipements de Boulangerie & Pâtisserie</a></td></tr><tr><td><div id="gallery"><a href="img/sections/Pondeuse_NBL.png"><img src="img/sections/Pondeuse_NBL.png" width="70" style="border: 1px solid #CCCCCC;" title="Cliquez pour agrandir l'image svp ! "></a></div></td><td><a href="categories.php?section=2" style="font-size:12px;">Equipements de restauration</a></td><td><div id="gallery"><a href="img/sections/BD_398_S.jpg"><img src="img/sections/BD_398_S.jpg" width="70" style="border: 1px solid #CCCCCC;" title="Cliquez pour agrandir l'image svp ! "></a></div></td><td><a href="categories.php?section=3" style="font-size:12px;">Equipements Electroménager</a></td></tr><tr><td colspan="4" height="100" class="footer">Copyright &copy; Joanes Sarl 2011</td></tr></table></body>
 
</html>

**Bovino** · 09/05/2011, 08h15

Inutile de passer par un id. Transforme tes id="gallery" par des class="gallery" et fais l'appel avec :

Code :

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

1
2
3
4
5
$(document).ready(function() {
    $(function() {
         $('.gallery a').lightBox();
    });
});

**wallash** · 18/05/2011, 17h46

Merci Bovino ça marche mais seulement sur l'image agrandi il n'ya pas de bouton pour fermer l'image et je sais pas comment permettre que l'utilisateur puisse fermer l'image agrandi une fois l'avoir vu.