Recadrer une image "à la volée"

Bonjour,

j'ai besoin de recadrer une image "à la volée", en CSS ou via jquery, pour une previsualisation sympa en home page.

J'ai testé le script http://joanpiedra.com/jquery/thumbs/ mais il ne fonctionne pas tres bien dans mon cas. Le recadrage fonctionne, mais je n'arrive pas à centrer le dit recadrage.

Est-ce que quelqu'un aurait une solution? (pas de php s'il vous plait, l'image est déjà redimensionnée ailleurs)

merci d'avance pour votre aide,

Cyan

Bonjour,

J'ai envie de te dire que:

1. Les vignettes, ça se fait côté serveur. D'une part parce que les compétences du client (le navigateur) pour faire des vignettes sont limitées (redimensionnement pixelisé, pas de recadrage); d'autre part parce que télécharger des images trop grandes ça fait des pages qui se chargent lentement (manque de réactivité perçu par l'utilisateur, catastrophique en bas débit ou sur connexion mobile) et une consommation de bande passante excessive.

2. Vu que le script jQuery trouvé est très simple, tu aurais plutôt intérêt à coder toi-même quelque chose d'adapté à tes besoins.

Bonjour et merci de ta réponse.

je crée déjà des vignettes sur le serveur (en deux tailles différentes d'ailleurs), mais là c'est pour un "usage unique". en effet je veux que l'on puisse voir la derniere photo sur ma home page, mais vu que ça change tout le temps, je ne pense pas qu'il soit super opportun de créer des vignettes, uniquement pour qq heures...

Au sujet du js, je n'arrive pas à savoir comment manipuler l'affichage des images (je suis super debutant en jquery). Peut-etre pourrais-tu me mettre sur une piste ?

merci, bonne journée,

Cyan

Vu tes compétences actuelles, et si tu as déjà un système de redimensionnement de tes images côté serveur, tu perdras beaucoup moins de temps à gérer ça côté serveur qu'à tenter une bidouille JavaScript + modification du DOM + CSS acrobatique.

Ce que fait le plugin jQuery que tu as trouvé c'est:
1. rajouter des éléments HTML autour de chaque image, ces éléments servant à créer une sorte de cadre (voir le code HTML généré et les styles CSS appliqués pour les détails);
2. récupérer les dimensions de l'images;
3. utiliser ces dimensions pour centrer l'image dans le cadre créé en (1), en modifiant en JavaScript les propriétés top et left de chaque image.

Tu peux faire la même chose sans JavaScript, en récupérant côté serveur (en PHP ou autre) les dimensions de l'image, et en écrivant directement dans la page le code HTML qui va bien (avec les propriétés CSS top et left en dur pour les images).