Se connecter / S'enregistrer
Votre question

Effet lightbox sur mes images.

Tags :
  • Programme
  • Programmation
Dernière réponse : dans Programmation
24 Décembre 2010 13:12:56

Bonjour a tous et a toutes!

Je cherche a creer un effet lightbox sur mes images depuis quelques jours, mais je n'est toujours pas réussi.
:( 


L'effet consisterais en quelque sorte a faire apparaitre une image au centre de ma page tout en grisant les alentours, je ne sais pas si je me fait comprendre .. alors voici un exemple :




Pouvez m'aider? Me donner des informations ( exemple : programme utiliser, codage utiliser.. ) ?

Je ne cherche pas a creer un site compliquer avec un logiciel, mais juste a partir de mon bloc note. Ceci serrais la seule dificulter de mon site web, pour le reste, il n'y a aucun probleme.

Merci d'avance. Wally_D

Autres pages sur : effet lightbox images

a c 232 L Programmation
24 Décembre 2010 14:42:19

Salut,

Il te suffit d'afficher la source de la page, de télécharger les JS mootools et lightbox, ainsi que le CSS lightbox.

Tu les ajoutes dans ta page HTML, et tu fais un lien de ce type:
  1. <a href="lienGrosseImage" rel="lightbox"><img border="0" src="lienPetiteImage"></a>


Et voilà
m
0
l
24 Décembre 2010 14:53:08

Pourrais tu m'expliquer de fason plus détaillé? Merci
m
0
l
Contenus similaires
a c 232 L Programmation
24 Décembre 2010 15:46:18

Code source de la page que tu as donné :

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Exemple LightBox</title>
  6. <script type="text/javascript" src="http://www.wifeo.com/tool/js/mootools.js"></script>
  7. <script type="text/javascript" src="http://www.wifeo.com/tool/js/lightbox.js"></script>
  8. <link rel="stylesheet" href="http://www.wifeo.com/tool/css/lightbox.css" type="text/css" />
  9. </head>
  10.  
  11. <body>
  12.  
  13. <font size="2" face="Arial">Cliquez sur le logo Wifeo pour voir l'ouverture d'une image avec un effet Lightbox :<br> <br>
  14.  
  15. <br>
  16. <br>
  17. <a href="images/gros-logo.gif" rel="lightbox"><img border="0" src="images/mini-logo.png"></a><br> <br>
  18. <br>
  19. <br>
  20. <br>
  21.  
  22. <a href="http://www.wifeo.com/documentation.php?id_aide=8">Explication pour appliquer cet effet...</a>
  23. </font>
  24.  
  25. </body>
  26. </html>


Tu télécharges les fichiers javascript et CSS (mootools.js, lightbox.js et lightbox.css) pour les mettre sur ton serveur, plutôt que d'utiliser ceux de ce serveur.
Et ensuite tu fais comme lui.
m
0
l
24 Décembre 2010 16:48:37

Re ;
Il faut donc que j'envoi tout les fichier que tu m'a dis de télécharger sur mon serveur FTP?

Pourrais tu me donner les liens?


Merci!
m
0
l
a c 232 L Programmation
24 Décembre 2010 17:34:08

Tout à fait.
Tu as les liens dans le message déjà... Suffit de lire les 10 lignes de code HTML...
m
0
l
24 Décembre 2010 18:02:40

Donc, si j'ai bien compris, il me suffit de telecharger et d'uploader sur mon FTP ces 3 composant : mootools.js, lightbox.js et lightbox.css

Ensuite il me suffit de rentrer ta ligne de code en remplaçant par mes données pour finir cet effet?

Merci beaucoup
m
0
l
24 Décembre 2010 19:30:13

J'aimmerais aussi que au lieu qu'il y est une grosse et une petite image, il y est un texte, et que l'image en effet s'ouvre en cliquant sur ce texte.
Merci!
m
0
l
24 Décembre 2010 21:20:38

<a href="lienGrosseImage" rel="lightbox">TON TEXTE</a>
m
0
l
26 Décembre 2010 21:02:11

Serrais t-il possible de faire apparaitre une immage qui n'est pas publier sur internet. Par exemple, une photo qui se situe dans Mes Images..

Pourrais tu me donner le code? Merci beaucoup d'avance!
m
0
l
a c 232 L Programmation
26 Décembre 2010 23:07:22

non c'est pas possible.
Enfin sauf si tu ne mets pas le site en ligne et que tu ne le regardes qu'en local.
Et il suffit de mettre le chemin vers le fichier, tout simplement
m
0
l
a c 232 L Programmation
27 Décembre 2010 12:15:03

Tu n'as pas ajouté les scripts et le fichier CSS à ta page web.
Regarde comment c'est fait sur l'autre page, il faut que tu fasses la même chose (<script> et <style>)
m
0
l
27 Décembre 2010 12:17:11

Pourrais tu me donner le code a mettre, correspondant a ma propre page web?
Sa serrais extremmement simpa..
Je suis un débutant en codage.
m
0
l
a c 232 L Programmation
27 Décembre 2010 13:03:46

  1. <script type="text/javascript" src="http://www.wifeo.com/tool/js/mootools.js"></script>
  2. <script type="text/javascript" src="http://www.wifeo.com/tool/js/lightbox.js"></script>
  3. <link rel="stylesheet" href="http://www.wifeo.com/tool/css/lightbox.css" type="text/css" />


En remplaçant les URLs...

C'est même plus être débutant là... c'est tenir par la main :) 
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS