IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> [résolu] Effet visuel sympa sur image, Comment faire ?
Options
Ju's
posté 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)

Go to the top of the page
 
+Quote Post
No6
posté 31 Jul 2009, 16:03
Message #2


Oui ?
*****

Groupe : Membres
Messages : 3 859
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)
Go to the top of the page
 
+Quote Post
Ju's
posté 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)

Go to the top of the page
 
+Quote Post
No6
posté 31 Jul 2009, 17:08
Message #4


Oui ?
*****

Groupe : Membres
Messages : 3 859
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 wink.gif ==> 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)
Go to the top of the page
 
+Quote Post
No6
posté 31 Jul 2009, 17:29
Message #5


Oui ?
*****

Groupe : Membres
Messages : 3 859
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/

cool.gif


--------------------
"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)
Go to the top of the page
 
+Quote Post
Ju's
posté 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)

Go to the top of the page
 
+Quote Post
yaourtofruits
posté 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, smile.gif

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 smile.gif

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
Go to the top of the page
 
+Quote Post
Tafù
posté 1 Aug 2009, 11:15
Message #8


Macbidouilleuse inclassable !
****

Groupe : Membres
Messages : 1 193
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 nana2.gif (astuce Pinkette) tongue.gif


--------------------
Léo 10.5.8 sur MacBook C2D 2 GHz, 2,5 Go, DD 74 Go. Firefox 5.0.1 (ou Safari 5.0.4) (ou Chrome 8.0.552...) (ou...). Souris Canyon à molette led bleu fluo. Epson Stylus DX 7450 TOUJOURS en rade . Aussi un iBook G3 turquoise, système Os 9.2 (voir le "nip-tuck" de la Venerupis corrugata ?)... Plus un Canon Pwshot A590. Plus un LaCie Rugged mobile HD orange 500 GB triple interface.

~~ "Mais alors, dit Alice, si le monde n'a absolument aucun sens, qui nous empêche d'en inventer un ?" ~~
Go to the top of the page
 
+Quote Post
Hyp
posté 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..
Go to the top of the page
 
+Quote Post
yaourtofruits
posté 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 smile.gif

À 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
Go to the top of the page
 
+Quote Post
Hyp
posté 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 smile.gif

À signaler tout de même : le tuto indiqué par No6 ne fonctionne pas.

Lequel ?
Go to the top of the page
 
+Quote Post
yaourtofruits
posté 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 smile.gif

À 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
Go to the top of the page
 
+Quote Post
No6
posté 1 Aug 2009, 17:08
Message #13


Oui ?
*****

Groupe : Membres
Messages : 3 859
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 smile.gif

À 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... dry.gif

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)
Go to the top of the page
 
+Quote Post
No6
posté 1 Aug 2009, 17:27
Message #14


Oui ?
*****

Groupe : Membres
Messages : 3 859
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... dry.gif

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)
Go to the top of the page
 
+Quote Post
Ju's
posté 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)

Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 21st September 2018 - 11:43