bonjour,

Je crois que ce que je veux faire est très basique pour quelqu'un qui connait le PHP, mais autant j'ai bien ingurgité HTML et CSS, autant avec le PHP, je coince !

J'explique le cas:

J'ai une page de miniatures, lorsque l'on clique sur une miniature l'image s'affiche en grand sur une autre page : image, titre, année, dimensions largeur x hauteur.

Plutôt que de faire manuellement toutes ces pages, je voudrais un script PHP qui me génère cette page à partir du clic sur la miniature.

J'imagine donc qu'il va remplir les 5 variables dans le template de ma page.

$image, $titre, $an, $largeur, $hauteur

comment faire pratiquement ?

merci d'avance

Hello,

l'image qui ss'affiche sur une autre page : target="_blank" ? (auquel cas c'est de l'HTML)

à propos des données (image, titre, année, dimensions) elles sont dans une base de données (sous forme mysql ou fichier texte) ?

bonjour malcolm

c'est un simple lien de la forme :

<a href="fichestableau/imgA2.htm"><img src="images/flowers.jpg" width="133" height="200"/></a>

ça marche très bien mais je dois me taper quelques dizaines de pages qui affichent simplement:

<img src="../images/gondoles.jpg" />
<p>Gondoles - 2006 - dim. 60x50 cm<br/>

c'est pourquoi, je cherche une méthode automatique.

les données ne sont encore pour l'instant nulle part !

entretemps, je continue à étudier le php et je commence à voir à peu près comment afficher les données texte, enfin c'est encore flou car comment aller chercher telle donnée lorsque tel clic sur telle miniature est fait ?
et pour l'image je ne vois pas du tout encore...

ça va peut-être me prendre plus de temps de piger ça que de faire toutes mes pages, tu me diras ?

merci de ta réponse

merci pour ta réponse fennec

je regarde ton lien.

j'avais déjà regardé pour une fenêtre popup en javascript mais ça ne me plaisait pas trop, je préfèrais l'ouverture en pleine page, enfin, je regarde ce qu'il propose...

merci.

fennec, c'est bien ce que je pensais, c'est une popup.

1.c'est plus long à ouvrir qu'un lien vers un autre page

2.c'est Redimmensionné suivant la taille de l'image, je ne peux donc pas afficher ni les infos que je voudrais ni un fond

3.dans Firefox, c'est pas beau car il y a tous les menus qui sont affichés dans le haut de la fenêtre

donc ça ne me convient pas, mais merci quand même.

Malcolm a écrit :

J'ai un début d'idée, mais ça sous-entend que tes photos existent sous forme de vignettes (que je rendrai cliquables) et que les vignettes ont toutes la même dimension... Est-ce le cas ?

malcolm

pour l'instant je Redimensionne les images à l'état miniature en leur mettant un width et height ainsi :

<img src="images/flowers.jpg" width="133" height="200"/>

les dim sont variables car je veux garder une proportion par rapport à l'image originale (ce sont des tableaux, donc le rapport largeur/hauteur peut varier et je voudrais le respecter)

ton idée implique-t'elle le PHP ?

entretemps j'ai trouvé un javascript qui affiche non pas une fenêtre mais une <div>, ce qui me convient davantage mais il faudrait l'adapter car en fait, c'est prévu pour être une infobulle qui apparait "onmouseover" : je l'ai mis en "onclick", c'est ok mais la div ne se place pas au bon endroit et déborde de la page.

voici à quoi j'arrive, c'est presque ce que je veux :

il faudrait pour bien faire que l'image soit centrée dans la page puisque ça peut aller jusqu'à 500 px de large ou de haut.

2ème problème, la grand image se ferme lorsqu'on écarte le curseur de la miniature, là aussi il faudrait que ce soit "onclick" dans la grande image ou ailleurs.

le script est là : http://damienalexandre.fr/Info-Bulle-en-Javascript.html

est-ce modifiable comme je le souhaiterais ?

j'édite le titre car la solution pourrait être en javascript aussi...

merci

Je pense à un truc : si tu regardes cet article : http://www.php-astux.info/mysql-phpmyadmin.php

Ce n'est pas ce que tu cherches à faire ? Apres, reste plus qu'à se focaliser sur les largeurs et hauteurs...

Malcolm a écrit :

Je pense à un truc : si tu regardes cet article : http://www.php-astux.info/mysql-phpmyadmin.php

Ce n'est pas ce que tu cherches à faire ? Apres, reste plus qu'à se focaliser sur les largeurs et hauteurs...

bonsoir

excuse mon retard, j'ai eu une panne internet hier soir...

oui, c'est à peu près ça, en étudiant un peu PHP j'en étais arrivée là : je vois à peu près comment remplir une table avec des données texte mais pour les images comment fait-t'on ? on met un chemin vers l'image ?

et comment faire le lien entre l'action "cliquer sur telle miniature" et afficher la page php avec les données adhoc càd l'image correspondante en grand et mes données texte.

j'ai vu aussi qu'au lieu d'utiliser une table on pouvait aussi utiliser un fichier texte (c'est le principe du livre d'or Pifou), faisable sans doute dans mon cas, vu qu'il s'agit de quelques dizaines d'entrées.

PS je te mets l'adresse de la page : http://home.versateladsl.be/vt650992/SiteRomain/vignettes.html

ainsi tu peux voir où j'en suis :

"Bouquet" et "Soul Mates" sont deux javascripts légèrement différents mais dont le résultat est sensiblement le même"Contemplation" est un lien vers une pleine page (la présentation que j'essayais d'automatiser en PHP) et "Gondoles" est le dernier essai avec une infobulle en javascript qui affiche une DIV mais je n'arrive pas à la positionner comme il faudrait.

Mais en fait, je ne suis pas encore fixée sur ce qu'il convient de faire.

Si tu veux me donner ton avis, il est bienvenu.

Salut

Connais-tu Lightbox , lui se moque des dimensions de tes images .

Le problème sera de mettre les légendes dans la partie title .

A +

bonsoir dreamer

je suis justement tombée sur un autre (?) lightbox cette apm : http://www.cssplay.co.uk/menu/lightbox3

le problème c'est que l'emplacement pour un sous-titre n'est pas prévu je pense ?

Tu as regardé du côté des galeries d'images en css?

http://www.cssplay.co.uk/menu/

Édité : oups! J'arrive un peu tard avec mon lien... J'avais commencé mon message mais j'ai été interrompue avant de pouvoir le poster...

bonjour elle

oui, merci ... entretemps j'ai exploré cette possibilité mais ça ne me convient pas trop...

je préfererais :

1. soit afficher la grande image par-dessus les miniatures mais pas dans une fenêtre, dans une div :

voir : http://home.versateladsl.be/vt650992/SiteRomain/vignettes.html

voir: miniature : "gondoles" et dans ce cas, adapter le script pour avoir l'image au milieu.

2. soit afficher en pleine page : voir : miniature "contemplation" mais alors si possible en php pour générer les pages automatiquement

tu vois comment faire ?

merci, bonne soirée

En php, oui c'est plutôt facile, mais si les vignettes diffèrent dans leurs dimensions, alors faut y penser également ...

voici le début de code dont je parlais précédemment, il fait appel à 3 fichiers :

* vignettes.php, là où les vignettes (clicables) seront générées

* photo.php, là où on affichera la photo grandeur nature

* liste.php, la liste des images (peut être aussi remplacé par une base de données d'ailleurs)

Vignettes.php (à inclure dans une page si tu le souhaites !)

vignettes.php
<?php
  // Chemin vers le fihchier de listing des images (par défaut, même dossier)
  require('liste.php');
 
  // on génère les vignettes
  foreach($array_images as $i => $image)
  {
    echo '<a href="photo.php?photo='.$i.'" target="_blank"><img src="http://mon_site.tld/images/mini_'.$image['fichier'].'" width="'.$image['vignette_H'].'" height="'.$image['vignette_L'].'" alt="'.$image['titre'].'" /></a>';
  };
?>

photo.php (affiche la grande image)

photo.php
<?php
  // Chemin vers le fihchier de listing des images (par défaut, même dossier)
  require('liste.php');
 
  $photo = (isset($_GET['photo'])) ? abs(sprintf("%d",$_GET['photo'])) : 0;
 
  // là on affiche la grande photo
?>
<h1><?php echo $array_images[$photo]['titre']; ?> (Année : <?php echo $array_images[$photo]['annee']; ?>)</h1>
 
<p><img src="images/<?php echo $array_images[$photo]['fichier']; ?>" width="<?php echo $array_images[$photo]['image_L']; ?>" height="<?php echo $array_images[$photo]['image_H']; ?>" alt="<?php echo $array_images[$photo]['titre']; ?>" /></p>

et enfin, la liste des images (pour en ajouter, tu n'as qu'à dupliquer le bloc de lignes)

liste.php
<?php
  // listing des images
  /*
   * pour ajouter une image, copier le bloc de lignes puis compléter
   */
  $array_images = array(); $i = 0;
 
  $array_images[$i]['titre'] = "Titre de la photo 1";
  $array_images[$i]['fichier'] = 'photo1.jpg';
  $array_images[$i]['annee'] = 2007;
  $array_images[$i]['image_H'] = 800;
  $array_images[$i]['image_L'] = 600;
  $array_images[$i]['vignette_H'] = 120;
  $array_images[$i]['vignette_L'] = 100;
  $i++;
 
  $array_images[$i]['titre'] = "Titre de la photo 2";
  $array_images[$i]['fichier'] = 'noel.jpg';
  $array_images[$i]['annee'] = 2006;
  $array_images[$i]['image_H'] = 640;
  $array_images[$i]['image_L'] = 480;
  $array_images[$i]['vignette_H'] = 80;
  $array_images[$i]['vignette_L'] = 80;
  $i++;
 
  // etc.
?>

malcolm

ça a l'air Super ! je teste ça dans l'apm

tu es tout simplement génial malcolm ! ça maaarche !

j'ai juste eu à enlever un mini_ qui était de trop et empêchait l'affichage des vignettes et inverser L et H

je n'ai plus qu'à intégrer ça à la mise en page et remplir le fichier liste...

je te dois un gros gros et une à ta santé !

merci c'est Super

PS est-t'il recommandé de mettre le chemin absolu pour l'image ou ce n'est pas indispensable ?

si je n'arrive pas à maitriser la disposition des vignettes dans la page, je te demanderai ... si tu veux bien.

...suite

j'ai disposé les vignettes avec un float left mais pour que l'agencement soit plus régulier, je voudrais les disposer dans un tableau (à 3 lignes, 3 colonnes par exemple)...

est-ce possible d'adapter le script ?

Concernant les "mini_" c'est un truc que j'utilise parfois, parfois c'est juste un sous dossier "mini". Content pour toi que ça marche.

Pour les disposer dans un tableau, voici le code à utiliser (je remplace le contenu de vignettes.php) :

vignettes.php
<?php
  // Chemin vers le fichier de listing des images (par défaut, même dossier)
  require('liste.php');
 
  // modifier si besoin le nombre de colonnes - nb de lignes calculé automatiquement
  $nb_colonnes = 4;
 
  $lignes = ceil(count($array_images) / $nb_colonnes);
  $ligne = 0;
  $depart = 0;
 
  // on génère les vignettes
  echo '<table width="100%" cellpadding="0" cellspacing="0" border="0" summary="Liste des vignettes">'."\n";
  for($ligne = 0; $ligne < $lignes; $ligne++)
  {
    echo '  <tr>'."\n";
    $arrivee = $depart + $nb_colonnes;
 
    for ($ptr = $depart; $ptr < $arrivee; $ptr++)
    {
      // lecture de l'image
      $image = (isset($array_images[$ptr])) ? $array_images[$ptr] : '';
      echo (is_array($image)) ? '    <td><a href="photo.php?photo='.$ptr.'" target="_blank"><img src="http://mon_site.tld/images/'.$image['fichier'].'" width="'.$image['vignette_H'].'" height="'.$image['vignette_L'].'" alt="'.$image['titre'].'" /></a></td>'."\n" : '<td>&nbsp;</td>'."\n";
    };
    echo '  </tr>'."\n";
    $depart = $arrivee;
  };
  echo '</table>'."\n";
?>

Tu remarqueras au passage que je te laisse configurer le nombre de colonnes, là par défaut c'est "3" mais tu peux le passer à 12 si tu veux.

Pour les liens absolus ou relatifs, tu fais comme tu veux, je préfère, pour un site web, les liens relatifs, mais au cas où j'ai préféré te montrer l'eexemple "absolu" (moins de risque d'erreur)

merci ! c'est Super : les vignettes sont maintenant magnifiquement disposées ... mais petit problème ... lorsqu'on clique sur une vignette la page avec la photo agrandie ne s'affiche plus, enfin, la page s'affiche mais sans le contenu qu'elle est sensée afficher.

c'est bizarre car je n'ai rien changé ni au fichier photo.php ni à liste.php et avant ça marchait :

j'ai essayé de comparer minutieusement les deux "phrases" mais je ne vois pas d'où ça peut venir ?

un indice : lorsque je clic sur la première vignette il essaie d'afficher photo.php?photo=7 ! et pour toutes les autres de même, or il y a bien une photo 7 dans la liste, mais elle ne s'affiche quand même pas.

une idée ?

PS je ne vois pas de foreach($array_images as $i => $image) dans le nouveau code : n'est pas cela qui manque, une référence à $i ?

Oups, désolé, oui c'est le $i que j'ai renommé en $ptr ... Donc dans le href du <a> change ?photo='.$i.' par ?photo='.$ptr.'

je vais corriger au dessus.

ça marche !

si je comprends bien dans liste.php on incrémente avec $i et dans vignettes.php on incrémente avec $ptr ?

enfin , y a plein de choses qui m'échappent ! heureusement que tu es là !

c'est bon, c'est bien ça que je voulais obtenir lorsque j'ai posté ce sujet.

encore bien merci

Hello,

oui tout à fait, il ne s'agit pas de la même variable, peu importent leurs noms d'ailleurs.

Content que ça soit résolu

malcolm

je reviens vers toi pour te demander s'il y aurait moyen d'accomoder ton script pour avoir un affichage aléatoire des miniatures ?

j'explique : je voudrais faire un genre de planche contact, 5x3 par exemple,

statique, cette fois, dans le sens qu'il n'y a pas de lien vers la grande image mais dynamique dans le sens qu'à chaque actualisation de la page, php irait puiser aléatoirement dans le fichier liste.php pour montrer des miniatures différentes. (ou à la limite image 1à15 puis la fois d'après image 16à30, etc.)

c'est faisable ?

j'ai trouvé un script sensé faire ça, mais il ne fonctionne pas : http://www.script-masters.com/home/voir_script_php_mysql-42.html

merci d'avance

Hello,

bien sûr que c'est faisable. Je n'arrive pas à ouvrir le lien de démo du script que tu montres (404 page introuvable) mais on peut sans problème accomoder mon script.

Il faut que tu rajoutes cette ligne :

shuffle($array_images);

entre les lignes :

$depart = 0;

// on génère les vignettes

pour donner :

$depart = 0;

shuffle($array_images);

// on génère les vignettes

Et les vignettes seront présentées aléatoirement à chaque chargement de page.

merci une fois de plus malcolm

je viens d'essayer, ça marche bien

@+