Fonction Web Avant/Après Post-Traitement

03/08/2012 à 16:21

Oscour

Bonjour à tous,

Je viens de découvrir une fonction géniale (à mon sens) à mettre sur un site web pour ceux qui en ont un.
Cette fonction permet de visualiser une photo avant et après PT.

Vous pouvez voir ce que ca donne sur mon site smugmug :
http://oscour.smugmug.com/PassionPhoto/BeforeAfter/24519848_TcNrtb#!i=1832239385

Au passage, j'en profite pour vous demander quelques conseils et remarques sur le site, les photos, etc.
Merci

Si vous souhaitez le mettre en oeuvre sur votre site, voici le site de l'auteur :
http://tazintosh.com
Et en plus, Edouard Puginier met ce script à disposition gratuitement !

A bientôt ;)
03/08/2012 à 16:44

minami_o

Merci Oscour, ç'a l'air effectivement très sympa, cet outil ! Et suffisamment simple pour fonctionner partout…
Pour les geeks, c'est juste quelques lignes de code en html, css et jquery, et le dev essaie de passer en simple js ou mootools.
Autant le "avant/après" est classique et très simple à coder avec deux images complètes, autant l'ajout de la baguette qui passe comme un écran magique de l'une à l'autre est novateur et s'applique effectivement assez bien au pt…  :-y
03/08/2012 à 16:54

shoube

Oh la l'idée est pas mal du tout, j'aime bien je doit dire, par contre j'avoue que j'ai déjà mal au crane rien qu'a avoir vue et lu les premières lignes de l'explication du "comment placer ca sur son site (ou blog ?)"
je suis pas dev ou autre geek à mort, j'ai deja rajouté des trucs tout fait comme ici en copier collé via des tuto, mais ca va pas plus loin, j'essayerais de bien tout lire à tête reposé avec une poche de glace dessus pour éviter la surchauffe :)
Et au passage j'irais refaire unt our sur ton site.
03/08/2012 à 17:10

minami_o

:D Rassure-toi shoube, de ce que j'ai vu il n'y a rien de plus compliqué que des copier-coller, il suffit donc de trouver le bon endroit où insérer les blocs ;)
Sinon smugmug est bloqué au taf, donc pas d'accès à ton site pour le moment, Oscour…
03/08/2012 à 17:19

Oscour

Merci d'être passé !
Ok j'attendrais pour les commentaires alors ;)

Shoube, rassure toi, je ne suis pas développeur non plus mais j'ai fait une toute simple page html :

< ! DOCTYPE html>


    Before/After
    
    < ! -- Feuille de style pour la présentation -->
    




     
 


    < ! -- jQuery -->
    
    < ! -- Script perso -->
    


Et ca marche sur n'importe quel site standard (chez Smugmug c'est différent quand même, mais ca marche aussi !)
Voilà, à plus tard !
03/08/2012 à 17:23

Kylian

C'est sympa, mais un peu gadget :)

Personnellement, j'afficherais la photo retouchée avec un petit bouton sur le côté, au clic un coup de js qui découvre la photo non retouchée en slide comme ici, mais sans devoir utiliser la souris (qui n'est pas des plus pratiques dans ce cas).

Minami_o : Essaie en passant par là ou par là ;)
Oscour : Je crois que Shoube utilise blogspot, je ne suis pas sûr que l'on puisse insérer du code…
03/08/2012 à 17:34

minami_o

;) Merci Kylian, mais je fais partie d'un grand groupe, qui utilise les services d'une société spécialisée pour gérer ses accès au web, donc les accès sont bien gérés : en clair, les premiers sites à être filtrés sont les web-proxy et les sites de traduction de pages web :D
Je n'ai vraiment pas le choix !
03/08/2012 à 17:38

Kylian

C'est bête, ça passe dans les petites boites :)
Sinon, reste TOR, mais ton employeur ne devrait pas aimer que tu installes ça…
Tant pis pour toi, tu attendras ce soir :D

EDIT : Regarde ici, c'est quasi le même effet avant/après…
03/08/2012 à 17:43

minami_o

Ah oui, tor est aussi exclus, puisque je ne suis pas sensé installer de soft non pro (déjà j'ai les droits admin sur mon poste, c'est une exception !), et que les ports sont majoritairement bloqués au niveau du proxy.
Mais en fait, j'ai bien accédé au site du developpeur, c'est le blog d'Oscour auquel je ne peux accéder, pour lui faire les retours qu'il demandait ;)
03/08/2012 à 17:51

shoube

Oui je suis sous blogspot, mais il y a moyen d’insérer du code, c'est comme cela que j'ai rajouté quelque option comme le compte à rebours pour les articles, les libellés en animation flash ou encore un écran de veille
07/08/2012 à 08:01

Oscour

Merci pour vos retours.
Kylian c est vrai que ca fait un peu gadget mais je trouve sympa le fait de pouvoir defiler entre l'avant et l'apres…

Shoube si tu as besoin d aide je peux t aider.
07/08/2012 à 09:49

shoube

Meci à toi j'y penserais le moment venu car pour le moment mon blog me sert plus pour des articles photos traditionnel plus que pour expliquer le pourquoi du comment.
07/08/2012 à 11:43

Kylian

Ce que je trouve gadget n'est pas le avant.après en lui-même, mais le fait de dévoiler la photo au passage de la souris.
Je trouve ça très intéressant de voir une photo avant la retouche, pour voir le travail du photographe dessus.