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.

SpaceFrog · 18/05/2011, 18h51

lightbox accepte des paramètres...

lis la doc ...

https://github.com/balupton/jquery-lightbox

06/05/2011, 13h20	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 806 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 806 Points : 35 803 Points : 35 803	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. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

18/05/2011, 18h51	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	lightbox accepte des paramètres... lis la doc ... https://github.com/balupton/jquery-lightbox __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

18/05/2011, 17h46	#5
wallash Futur Membre du Club Inscription : juin 2007 Messages : 91 Détails du profil Informations forums : Inscription : juin 2007 Messages : 91 Points : 16 Points : 16	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.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email