Discussion :

[exter666]

Bonjour à tous,

Je souhaiterais créer une navigation sympa pour ma galerie d'image. Voila ce que j'ai en tête: je souhaiterai créer une zone (en ligne) qui commence par une flèche (vers la gauche)/ 8 places pour afficher de petites images / une flèche (vers la droite).
Les flèches serviraient à afficher les 8 prochaines images (par exemple issue d'une DB).

Je souhaiterai utiliser uniquement du html/php/css; pas de javascript (si possible).

J'ai des idées mais elles me semblent toutes assez compliquées (par exemple: passer un index via l'adresse pour connaître quelles sont les images qui doivent être affichées,... ). Pourriez-vous me donner vos idées?

d'avance un grand merci.

[exter666]

j'ai continué mes recherches et j'ai trouvé un moyen assez sympa et facile de créer une "liste d'image": il s'agit de créer un élément iframe contenant toutes images disposés horizontalement.

Hélas je pense que c'est fort lourd pour le navigateur de devoir charger à chaque fois toutes ces images.

Autre chose: je pense que j'aurais peut-être dû poster dans le forum développement web....

(edit suite à la modération)

[NoSmoking]

Bonjour,

Je souhaiterai utiliser uniquement du html/php/css; pas de javascript (si possible).

cela va pas mal te limiter.

Tu peux regarder du coté du CSS3 et des transformations, regardes ce qui c'est dit dans cette discussion http://www.developpez.net/forums/d96...ol-image-zoom/

[exter666]

Je me suis laissé dire que CSS3 n'était pas opérationnel sous tous les navigateurs. Or je voudrais que ma galerie soit visible (ou lisible) par le grand nombre de surfeurs; d'où mon désir de ne pas utiliser javascript et de rester en CSS2 (voir CSS1).

Je sais cela limite beaucoup....

[NoSmoking]

Tout va dépendre de ce que tu veux réaliser comme galerie, j'entends par là le nombre d'images et leur poids par exemple.

...d'où mon désir de ne pas utiliser javascript et de rester en CSS2...

Si il est vrai que CSS3 n'est pas encore bien géré par tous les navigateurs il n'en demeure pas moins que javascript est très utilisé, donc pourquoi s'en priver. Cela dépendra bien sûr du type de galerie souhaitée.

Il existe pas mal de galerie en CSS2 sur base d'un simple hover.

Si tu pouvais nous en dire plus.

[exter666]

Ok je retiens donc CSS3 à proscrire et javascript à utiliser.

L'effet que je voudrais obtenir est lors d'un click sur la fléche de droite (cfr mon post ci-dessus) un décalage des 8 images deja affichées vers la gauche et apparition des 8 images suivantes.

Je pense gérer la rotation des 8 images par un z-index.

[NoSmoking]

Je pense gérer la rotation des 8 images par un z-index.

pas la bonne solution, il te faut jouer sur la propriété scrollLeft de la DIV, mais cela ce fait en javascript.

[exter666]

Ok pour la fonction scrollLeft mais elle nécessite d'afficher à la base toute les images (ce qui peut vite devenir lourd pour l'affichage).

[NoSmoking]

Si il y a moult images il est préférable de charger des vignettes dans la zone de sélection puis de ne charger la "grande" image qu'à la demande.

[exter666]

c'est bien mon idée.

Peut-on générer des vignettes directement avec CSS ou alors je dois les générer "à la main" et le stocker dans un dossier de mon site web?

[NoSmoking]

Peut-on générer des vignettes directement avec CSS

non tout au plus on simule la vignette en redéfinissant la largeur/hauteur.

...alors je dois les générer "à la main" et le stocker dans un dossier de mon site web?

Il existe tout plein de logiciel qui sont capables de te générer des vignettes en série.

A tout hasard jettes un œil à Fonctions de redimensionnement d'images

[exter666]

et en terme de traffic de données, quelle solution est la plus avantageuse?

Selon moi, si j'utilise un redimensionnement de l'image avant affichage, "l'image en grand" est toute de même envoyée avant d'être "redimensionné".

[NoSmoking]

tout à fait
affichage vignettes d'abord puis photos réelles si nécessaire.