Galerie d'images avec style donné

[OJAL]

Bonjour,

J'aimerais pouvoir donner un look spécifique à une galerie d'images.
Le rendu souhaité devrait se rapprocher de ça :

Comment faire pour que les vignettes soient entourées d'un encadrement donnant l'apparence d'une photo? Cet encadrement sera à priori construit avec des fichiers images. Aussi, est-ce uniquement un traitement avec bibliothèque GD qui puisse me donner ce résultat ou un peu de javascript + du CSS sur une base de framework type prototype pourrait-il me donner ce résultat :?:

L'aspect dynamique de cette galerie fait que le traitement ne peut pas être fait au préalable sur PHOTOSHOP...

Merci par avance ;-)

 

[OJAL]

Je vais essayer de mettre en place une fonction du type imagecopymerge de la bibliothèque GD lors de la création des vignettes.
Avec cette fonction je rajouterai finalement un cadre en mergeant 2 images et en jouant sur la transparence locale du cadre...

Qu'en pensez-vous?

 

[Rod la Kox]

Tu insert ton image et par dessus, tu met ton cadre au format png.
Le tout dans un display:box pour le linker vers l'image "normale"

 

[SpeedAirMan]

Y'a pleins de façons de faire différentes, alors pas facile de choisir...

Perso, devant cette problématique, j'opterai peut être pour la solution suivante : tout faire en HTML + CSS + JavaScript (JavaScript uniquement présent pour les navigateurs ne prenant pas en charge CSS3).
Tu mets tes images dans une liste et/ou un div, avec une taille déterminée (en supposant que toutes tes miniatures auront la même taille). Tu styles ton li et/ou ton div de la manière suivante : border-radius: 5px, box-shadow: 3px, et padding:10px (tout ça = à compléter bien sûr !).

Le JavaScript servira à émuler les propriétés CSS3 pour les "vieux navigateurs" (IE(toutes versions sauf version 9...), Firefox 2, Chrome 3, etc.)

Cette solution a pour avantage d'être assez "light", rapide à charger, et sans faire appel à des images ou les modifier.


Une solution bcp plus simple, avec seulement une image et un peu de CSS : si tu sais que toutes tes miniatures feront la même taille, tu crées donc l'image d'arrière plan (blanche). Tu prends un conteneur (liste ou div), tu spécifies la taille (width & height), et tu mets l'image "neutre" (blanche avec les bords arrondis et l'effet d'ombre) en arrière plan. Tu places ensuite l'image à l'intérieur de ce conteneur, en veillant à spécifier à chaque fois la taille précise de l'image (ça sert pour la suite). Tu positionnes ensuite cette image (via CSS) exactement au centre de ton conteneur.
Cette solution a pour avantage d'être assez light et compatible avec un max de navigateurs (même les vieux navigateurs).