photo miniature vers plein écran

**ojediop** · 08/08/2012, 06h16

bonjour à tous je reviens vers le forum pour trouver de l'aide. voila avec l'aide du forum j'ai réussi à uploader plusieurs photos dans une base de données. enfin j'ai uploadé les photos dans un dossier et créé des miniatures enregistré également dans un dossier. les liens vers les photos et les miniatures sont sauvegardé dans une base de données. j'arrive à afficher les miniatures comme je le souhaite mais je voudrais faire un lien sur chaque miniature pour qu'un clik sur celle ci affiche la photo d'origine en plein écran. j'ai essayé js avec lightbox2.51 mais ça marche pas ou bien c'est moi qui sais pas comment faire.
je voudrais savoir s'il n'y a pas moyen de faire ça en php. c'est à dire affiché la miniature(déjà fait) et la photo d'origine en plein écran si on clik dessus.

je joint le code de la page qui affiche les miniatures

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
25
26
27
28
29
30
31
32
33
34
 <?php
try
{
    // On se connecte à MySQL
    $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
    $bdd = new PDO('mysql:host=localhost;dbname=partners', 'root', '', $pdo_options);
 
    // On récupère tout le contenu de la table annonce
    $reponse = $bdd->query('SELECT * FROM annonce');
 
    // On affiche chaque entrée une à une
    while ($donnees = $reponse->fetch())
    {
    ?>
        <p>
        <strong>Type de bien :</strong>   <?php echo $donnees['type_bien']; ?><br />
        <strong>Type d'Opération :</strong>   <?php echo $donnees['type_ope']; ?> <br /> <strong>Ville :</strong>   <?php echo $donnees['ville']; ?> <br /> <strong>Quartier :</strong>   <?php echo $donnees['quartier']; ?><br />
        <strong>Surface :</strong>   <?php echo $donnees['surface']; ?> <br />
       <strong>Nombre de Chambre :</strong>   <?php echo $donnees['nombre_chambre']; ?> <br /><strong>Prix :</strong>   <?php echo $donnees['prix']; ?> CFA <br /><strong>Photo :</strong>   <br /><?php echo "<img src='photos/small/{$donnees['mini']}'/>" ; ?>  <tr /><?php echo "<img src='photos/small/{$donnees['mini2']}'/>" ; ?> <tr /><?php echo "<img src='photos/small/{$donnees['mini3']}'/>" ; ?> <tr /><?php echo "<img src='photos/small/{$donnees['mini4']}'/>" ; ?>
        </p>
    <?php
    }
 
    $reponse->closeCursor(); // Termine le traitement de la requête
 
}
catch(Exception $e)
{
    // En cas d'erreur précédemment, on affiche un message et on arrête tout
    die('Erreur : '.$e->getMessage());
}
 
 
?>

**patrickbaras** · 08/08/2012, 21h12

tu télécharge le package lightbox2 sur http://lokeshdhakar.com/projects/lightbox2/
tu unzip le package
tu copie les repertoires /css /images /js du repertoire unzipé vers le repertoire ou tu a ton script (mieux à la racine de ton site)
pour avoir

/ton_repertoire

/css
/images
/js
tu crée une page test.html (dans le repertoire supérieur exemple : /ton_repertoire)
en rouge le minimun a ajouter
avec le code

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
<html>
<head>
<title>test lightbox2.51</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<style>
body
{
	background-color:#483F3F;
	height:100%;
}
</style>
</head>
<body>
<a href="images/examples/image-1.jpg" rel="lightbox" title="texte de l'image 1"><img src='images/examples/thumb-1.jpg'></a>
<a href="images/examples/image-2.jpg" rel="lightbox" title="texte de l'image 2"><img src='images/examples/thumb-2.jpg'></a>
<a href="images/examples/image-3.jpg" rel="lightbox" title="texte de l'image 3"><img src='images/examples/thumb-3.jpg'></a>
<a href="images/examples/image-4.jpg" rel="lightbox" title="texte de l'image 4"><img src='images/examples/thumb-4.jpg'></a>
<br/>
test
</body>
</html>

et tu affiche test.html dans ton browser

images/examples/image-1.jpg est la grande images et images/examples/thumb-1.jpg est la petite

si tu veux pouvoir passer d'une image a l'autre en mode plein ecran tu ajoute
<a href="images/examples/image-1.jpg" rel="lightbox[groupe]" title="texte de l'image 1"><img src='images/examples/thumb-1.jpg'></a>
<a href="images/examples/image-2.jpg" rel="lightbox[groupe]" title="texte de l'image 2"><img src='images/examples/thumb-2.jpg'></a>
<a href="images/examples/image-3.jpg" rel="lightbox[groupe]" title="texte de l'image 3"><img src='images/examples/thumb-3.jpg'></a>
<a href="images/examples/image-4.jpg" rel="lightbox[groupe]" title="texte de l'image 4"><img src='images/examples/thumb-4.jpg'></a>

il ne te reste plus qu'a adapter a ton script

**ojediop** · 09/08/2012, 04h52

merci Patrick c'est encore toi qui veux bien m'aider. mais j'ai déja essayé ça avec le lightbox le problème es t que si ce sont de simple image stockées dans un répertoire je suis déjà arrivé à les affichés correctement et à avoir l'affichage en plein écran. mais comme tu vois le lien vers mes images sont sauvegardés dans une base de données (script premier post) et le script récupère le lien dans la base pour afficher la miniature mon problème c'est que j'ai essayé d'adapter lightbox pour que la miniature affiché soit celle que la base de données affiche. sur ce point j'y suis arrivé mais j'arrive pas à placer correctement le lien vers l'image original dont le chemin est aussi enregistré dans la base de données et qui doit s'afficher lors du clik sur la miniature. j'ai essayé de le placer dans le lien comme cela mais ça marche pas :

Code :

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

<a href="images/examples/image-1.jpg" rel="lightbox" title="texte de l'image 1"><?php echo "<img src='photos/small/{$donnees['mini']}'/>" ; ?></a>

avec ce code j'arrive à afficher la miniature mais je sais pas comment placer le reste pour que si on clik sur la miniature le script ailles chercher le lien dans la base de données et affiche l'image correspondante en plein écran. je dois précisé que j'ai bien essayé de placer le chemin vers l'image comme j'ai fais pour la miniature mais au clik soit j'ai plusieurs erreur ou rien ne se passe.