 [résolu] Effet visuel sympa sur image, Comment faire ? |
 |
Bienvenue invité ( Connexion | Inscription )
  |
 31 Jul 2009, 14:06
Message
#1
|
|
 Macbidouilleur de vermeil !  Groupe : Membres Messages : 1 446 Inscrit : 11 Apr 2005 Lieu : Chaponost, france Membre no 36 935  |
Bonjour,
je suis débutant (et encore) en langage Web. Je suis en train de monter un petit site et j'ai souvent remarqué un effet visuel sympa : lorsque l'on clique sur une image elle s'agrandit par une effet de zoom en ne masquant pas le reste de la page... Je voudrais intégrer ça à ma page. Voici une page avec 2 exemples. Merci pour votre aide, Ju PS : je me doute que cette question a dû être posée à peu près 800 000 fois mais je ne même pas quoi chercher, désolé pour les doublons ! Ce message a été modifié par Ju's - 21 Aug 2009, 17:21. -------------------- MacBook Air 13" (mid 2012) Core i5 1,8Ghz, 8 Go RAM (Mac OS X 10.10.4)
iMac G4 17" 800Mhz (Mac OS X 10.4.11) iMac G3 233Mhz Bondi Blue (Mac OS X 9.2.2) iPhone 6 64Go noir (iOS 8.4)  |
 |
 
|
|
31 Jul 2009, 16:03
Message
#2
|
|
 Oui ? Groupe : Membres Messages : 3 889 Inscrit : 24 Jun 2003 Lieu : BZH Membre no 8 224 |
tu la veux en javascript ou en css ?
-------------------- "Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan) |
|
|
|
|
31 Jul 2009, 16:13
Message
#3
|
|
|
Macbidouilleur de vermeil ! Groupe : Membres Messages : 1 446 Inscrit : 11 Apr 2005 Lieu : Chaponost, france Membre no 36 935 |
Peu importe, le plus simple à utiliser sera le meilleur pour moi.
Je voudrais aussi éventuellement m'en servir pour un autre site que j'ai fait avec RapidWeaver donc je pense que l'un ou l'autre sera bon. -------------------- MacBook Air 13" (mid 2012) Core i5 1,8Ghz, 8 Go RAM (Mac OS X 10.10.4)
iMac G4 17" 800Mhz (Mac OS X 10.4.11) iMac G3 233Mhz Bondi Blue (Mac OS X 9.2.2) iPhone 6 64Go noir (iOS 8.4) |
|
|
|
|
31 Jul 2009, 17:08
Message
#4
|
|
|
Oui ? Groupe : Membres Messages : 3 889 Inscrit : 24 Jun 2003 Lieu : BZH Membre no 8 224 |
Le mot clé pour ce que tu recherche c'est " Light Box "
il y à mille méthodes pour milles solutions différentes : la liste : http://planetozh.com/projects/lightbox-clones/ un tuto: http://www.xul.fr/ecmascript/lightbox.html Sujets : http://1loup.net/index.php/2008/05/08/1202...nt-de-lightbox2 http://blog.bouctoubou.com/13-javascripts-...aleries-videos/ Sinon si tu veux faire " standard " il existe un module jQuery de Lightbox tu n'échappera pas au CSS de stu: http://www.cssplay.co.uk/menu/image_magnifier2.html http://www.cssplay.co.uk/menu/solar_map.html enfin, Pour avoir le même que celui de MAcBidouille, il faut soit débugger la page, soit demander à Innovagency.ch le mode d'emploi... (la derniere ligne de ta page est claire  ==> Tous droits réservés à MacBidouille / HardMac, © MacBidouille / HardMac 2001 - 2009. Contactez-nous. Designed by Innovagency.ch )
-------------------- "Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan) |
|
|
|
|
31 Jul 2009, 17:29
Message
#5
|
|
|
Oui ? Groupe : Membres Messages : 3 889 Inscrit : 24 Jun 2003 Lieu : BZH Membre no 8 224 |
J'ai aussi trouvé :
http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm http://www.c6software.com/Products/PopBox/ 
-------------------- "Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan) |
|
|
|
|
31 Jul 2009, 17:30
Message
#6
|
|
|
Macbidouilleur de vermeil ! Groupe : Membres Messages : 1 446 Inscrit : 11 Apr 2005 Lieu : Chaponost, france Membre no 36 935 |
Je vais potasser tout ça...
Merci pour ton aide! Ju edit : et merci encore pour les 2 nouveaux liens ! Ce message a été modifié par Ju's - 31 Jul 2009, 17:30. -------------------- MacBook Air 13" (mid 2012) Core i5 1,8Ghz, 8 Go RAM (Mac OS X 10.10.4)
iMac G4 17" 800Mhz (Mac OS X 10.4.11) iMac G3 233Mhz Bondi Blue (Mac OS X 9.2.2) iPhone 6 64Go noir (iOS 8.4) |
|
|
|
|
1 Aug 2009, 09:33
Message
#7
|
|
 Macbidouilleur de bronze ! Groupe : Membres Messages : 547 Inscrit : 17 Jul 2009 Lieu : Seine-et-Marne (Est) Membre no 139 306 |
Bonjour,
 Je me permets de m'immiscer dans ce fil parce que je souhaite réaliser le même genre d'effet dans mon portfolio en ligne qui est actuellement en construction (non hebergé pour le moment, je suis au tout début des travaux). J'ai la solution de mettre des PopUp en JS via DreamWeaver mais cette solution me déplaît quelque peu car elle utilise des fenêtres surgissantes qui sont bloquées par défaut dans certains browsers et que je n'aime pas forcer les visiteurs à ouvrir une nouvelle fenêtre, c'est pas cool à mon sens. Ce serait plus esthétique avec une lightbox, en effet. Seul problème, le PHP associé aux CSS, même si ça permet une maintenance plus simple qu'avec Gallerie ou Dream, ça me paraît quand même un peu lourd niveau codage. En plus, du PHP pour un site statique ? Est-ce vraiment nécessaire ? Je me demandais si avec l'appli Gallerie, on pouvait obtenir une lightbox images semblable à celle qu'on voit dans le tuto mis en lien par No6 ? L'idéal pour moi, ce serait le JavaScript, et uniquement en JS, parce que je compte apprendre ce langage avant le PHP, ça me permettrait de montrer dans mon site des choses qui relèvent ou qui vont relever dans un avenir proche de mes compétences réelles (c'est un book en ligne, quand même). Y a-t-il moyen de faire une lightbox uniquement en JavaScript (je veux dire : même les vignettes et tous les autres effets, uniquement en JS) ? Merci yaourt [EDIT] P.S. : je me demandais également ce que signifiait le terme "thumbnail" ? Je vais regarder sur Wikip' mais je pose la question quand même au cas où. Merci. Ce message a été modifié par yaourtofruits - 1 Aug 2009, 09:37. -------------------- iMac 24" Core 2 duo, 2,66 Ghz, 4 Go, OS X 10.6.8
_____________________________________________________________________ Visitez mon site web Mon blog |
|
|
|
|
1 Aug 2009, 11:15
Message
#8
|
|
 Macbidouilleuse inclassable Groupe : Membres Messages : 1 269 Inscrit : 20 Feb 2008 Lieu : L'été à Poil, l'hiver à Plumes... Membre no 108 225 |
Citation (yaourtofruits @ 1 Aug 2009, 10:33)  [EDIT] P.S. : je me demandais également ce que signifiait le terme "thumbnail" ? Je vais regarder sur Wikip' mais je pose la question quand même au cas où. Merci. Dico informatique, dans la barre perso du navigateur... Rapide et utile, pour comprendre de quoi on parle dans les topics informatiques  (astuce Pinkette) 
-------------------- High Sierra 10.13.6 sur MBP 13" mi-2010 C2D 2,4 GHz, 8Go, SSDk. Firefox 95.0.2 (ou Safari 13.1.2). Souris Wild Mulotte. Imprim : Epson XP2100 wifi bouffeuse d'encre au prix du caviar. Aussi un iBook G3 turquoise, système Os 9.2 (voir le "lifting" de la Venerupis corrugata ?)... (mais plus en activité). Plus un LaCie Rugged mobile HD orange 500 GB triple interface. Et enfin, une Pépette de compétition avec qui je suis in love.
~~ "Mais alors, dit Alice, si le monde n'a absolument aucun sens, qui nous empêche d'en inventer un ?" ~~ |
|
|
|
|
1 Aug 2009, 12:56
Message
#9
|
|
 Macbidouilleur d'Or ! Groupe : Membres Messages : 6 172 Inscrit : 7 May 2005 Membre no 38 651 |
Citation (yaourtofruits @ 1 Aug 2009, 10:33) Ce serait plus esthétique avec une lightbox, en effet. Seul problème, le PHP associé aux CSS, même si ça permet une maintenance plus simple qu'avec Gallerie ou Dream, ça me paraît quand même un peu lourd niveau codage. Citation Y a-t-il moyen de faire une lightbox uniquement en JavaScript (je veux dire : même les vignettes et tous les autres effets, uniquement en JS) ? Le principe de la lightbox n'exige pas l'utilisation de PHP. C'est juste un plus si tu veux générer automatiquement ta galerie / faire une interface d'upload avec création de vignettes automatiquement / etc.. |
|
|
|
|
1 Aug 2009, 13:55
Message
#10
|
|
|
Macbidouilleur de bronze ! Groupe : Membres Messages : 547 Inscrit : 17 Jul 2009 Lieu : Seine-et-Marne (Est) Membre no 139 306 |
Merci à vous deux
À signaler tout de même : le tuto indiqué par No6 ne fonctionne pas. Au départ, je croyais que ça venait de moi, mais en fait l'original en démo ne fonctionne pas non plus. Justement à cause du code PHP manquant, semble-t-il. Non, désolé, mais du PHP rien que pour faire des vignettes, je trouve le procédé trop lourd. Encore merci. [EDIT] : non, c'est pas le PHP qui coince, ça ne fonctionne pas. Ce message a été modifié par yaourtofruits - 1 Aug 2009, 14:02. -------------------- iMac 24" Core 2 duo, 2,66 Ghz, 4 Go, OS X 10.6.8
_____________________________________________________________________ Visitez mon site web Mon blog |
|
|
|
|
1 Aug 2009, 14:38
Message
#11
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 6 172 Inscrit : 7 May 2005 Membre no 38 651 |
Citation (yaourtofruits @ 1 Aug 2009, 14:55) Merci à vous deux À signaler tout de même : le tuto indiqué par No6 ne fonctionne pas. Lequel ? |
|
|
|
|
1 Aug 2009, 14:43
Message
#12
|
|
|
Macbidouilleur de bronze ! Groupe : Membres Messages : 547 Inscrit : 17 Jul 2009 Lieu : Seine-et-Marne (Est) Membre no 139 306 |
Citation (Hyp @ 1 Aug 2009, 15:38) Citation (yaourtofruits @ 1 Aug 2009, 14:55) Merci à vous deux À signaler tout de même : le tuto indiqué par No6 ne fonctionne pas. Lequel ? Celui-ci -------------------- iMac 24" Core 2 duo, 2,66 Ghz, 4 Go, OS X 10.6.8
_____________________________________________________________________ Visitez mon site web Mon blog |
|
|
|
|
1 Aug 2009, 17:08
Message
#13
|
|
|
Oui ? Groupe : Membres Messages : 3 889 Inscrit : 24 Jun 2003 Lieu : BZH Membre no 8 224 |
Citation (yaourtofruits @ 1 Aug 2009, 15:43) Citation (Hyp @ 1 Aug 2009, 15:38) Citation (yaourtofruits @ 1 Aug 2009, 14:55) Merci à vous deux À signaler tout de même : le tuto indiqué par No6 ne fonctionne pas. Lequel ? Celui-ci Désolé, je suis loin de les avoir testés, j'imagine qu'ils marchent sans probleme sur un ie PC... et oui, le JavaScript pour ie n'est pas forcément compatible pour FireFox ou Safari, Opéra ou Chrome...  En javascript on peut détecter sur quel navigateur le code s'exécute, et donc de rediriger vers les instructions idoines. L'autre solution est de passer par des bibliotheques toutes faites et qui s'occupent elles même de ce probleme, comme JQuery, Mootools, Prototype, Scriptaculous , ... On PHP aussi on peut détecter depuis le serveur quel est le navigateur cible et ne renvoyer que le code Javascript correspondant, et seulement le minimum pour gagner du temps lors du chargement des pajes.... LE PHP est un langage un peu plus unifié, lui.. -------------------- "Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan) |
|
|
|
|
1 Aug 2009, 17:27
Message
#14
|
|
|
Oui ? Groupe : Membres Messages : 3 889 Inscrit : 24 Jun 2003 Lieu : BZH Membre no 8 224 |
PS:
Il semblerai bien que " Innovagency.ch " se soit servi de FancyZoom, en l'arrangeant à leur sauce... ( pratique courante, j'ai moi même adapté le code de ClearBox (bonjours les Hongrois); mon seul regret de n'avoir pas encore eu vent de Cooliris à l'époque, sinon j'aurais pris soin de nommer mes classes CSS pour les rendre détectable par ce soft...
Ce message a été modifié par No6 - 1 Aug 2009, 17:29. -------------------- "Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan) |
|
|
|
|
21 Aug 2009, 17:20
Message
#15
|
|
|
Macbidouilleur de vermeil ! Groupe : Membres Messages : 1 446 Inscrit : 11 Apr 2005 Lieu : Chaponost, france Membre no 36 935 |
Merci pour tout, c'est tout bon pour moi !
-------------------- MacBook Air 13" (mid 2012) Core i5 1,8Ghz, 8 Go RAM (Mac OS X 10.10.4)
iMac G4 17" 800Mhz (Mac OS X 10.4.11) iMac G3 233Mhz Bondi Blue (Mac OS X 9.2.2) iPhone 6 64Go noir (iOS 8.4) |
|
|
|
|
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :
| Nous sommes le : 19th April 2024 - 18:34 |