Discussion :

[cFranssen]

bonjour, je voudrais savoir la meilleur façon de gérer des images :

L'admin du site que je suis entrain de faire doit pouvoir insérer 3 photos (jusque là, pas de problème)

ensuite, dans la fiche produit, J'aimerais qu'il y ai une grande photo et 3 petite en dessous. Quand on clic sur une petite, elle s'affiche en grand.

quel est la meilleur façon de gérer cela ?

que faut-il mettre dans les champ de la base de donnée ?

bref comment feriez vous pour insérer trois photos et avoir sur la page

3 petite et 1 grande sans que ça prenne 2min a charger ?

merci d'avance cFranssen

[gene69]

C'est impossible.

Si c'est lent c'est que ton image est trop grosse. php ne fera rien contre ça. Après tu peux faire une belle interface distrayante pour que la personne n'ai pas trop l'impression d'attendre.

[larffas68]

salut,

pour ce faire il faudra procéder de cette façon :

1 - lors de l'ajout d'image tu fais un Upload des images grâce a PHP et tu stocke leurs noms dans une BDD.
2 - tu prends ces photos et tu fais un redimensionnement de ces images (librairie GD ou ImageMagick(préférence perso)) pour obtenir des miniatures que tu enregistre avec par exemple : nom_image_small.jpg sachant que cette image se nomme nom_image.jpg
3- tu utilises Javascript pour afficher tes images dans ta page avec le chargement de l'image normale en grand format et de 3 miniatures.
4- action au passage de la souris tu fait un rechargement du conteneur de l'image grand format en fonction de la valeur de l'image miniature de l'action.

Et voila pas de chargement lourd et une optimisation nickel.

Si tu souhaites un niveau d'accessibilité, il suffira de faire un paramètre sur ta page avec l'id de l'image a chargé en grand format et de mettre le lien sur chaque miniature avec un return false sur la fonction js associé pour les gens qui ont javascript ne rechargent eux pas la page.

Bonne chance

[cFranssen]

Il faut donc uploader une image, l'enregistrer en taille originale et en petite (2 fois la même image mais pas de la même taille sur mon serveur. C'est ça ?

donc 2 champ par photos dans ma bd, un "mini" et un "originale" ?

pour le javascript, savez vous ou je peu trouver un code ? car je n'y connais pas grand chose au javaScript.

merci d'avance

[larffas68]

Pour les images c'est cela.

Pour le JavaScript c'est assez simple il suffit de faire un script simple :

dans le head :

Code javascript :

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

1
2
3
4
5
6
<script type='text/javascript'>
  function modifie_image(param){
    document.getElementById('GDimage').src='img/'+param;
  }
 
</script>

dans le body : (imageGD1,imageGD3,imageGD2 = nom de l'image + extension)

Code javascript :

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

1
2
3
4
<img src='nom_imageGD1' id='GDimage'/>
<img src='nom_imagePT1' onmouseover="javascript:modifie_image('imageGD1');" />
<img src='nom_imagePT2' onmouseover="javascript:modifie_image('imageGD2');" />
<img src='nom_imagePT3' onmouseover="javascript:modifie_image('imageGD3');" />

Bon courage

[rikemSen]

Pour les images, un champs en base de données suffit.

champs "image" et champs "extension"

nom_de_limage / .jpg (exemple)

ensuite tu feras un

Code :

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

1
2
3
4
5
 
//pour l'originale
echo '<img src="url/de/limage'.$resultat['image'].$resultat['extension'].'" />';
//pour la miniature
echo '<img src="url/de/limage'.$resultat['image'].'_small'.$resultat['extension'].'" />';