Se connecter avec
S'enregistrer | Connectez-vous

Effet lightbox sur mes images.

Dernière réponse : dans Programmation

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 :

Spoiler
http://www.wifeo.com/sample/lightbox.php



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

Lassé par la pub ? Créez un compte
Expert Programmation

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à
Expert Programmation

Code source de la page que tu as donné :

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd" target="_blank">http://www.w3.org/TR/html4/loose.dtd</a>">
  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="<a href="http://www.wifeo.com/tool/js/mootools.js" target="_blank">http://www.wifeo.com/tool/js/mootools.js</a>"></script>		
  7. <script type="text/javascript" src="<a href="http://www.wifeo.com/tool/js/lightbox.js" target="_blank">http://www.wifeo.com/tool/js/lightbox.js</a>"></script>
  8. 	<link rel="stylesheet" href="<a href="http://www.wifeo.com/tool/css/lightbox.css" target="_blank">http://www.wifeo.com/tool/css/lightbox.css</a>" 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="<a href="http://www.wifeo.com/documentation.php?id_aide=8" target="_blank">http://www.wifeo.com/documentation.php?id_aide=8</a>">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.

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
Expert Programmation 

  1. <script type="text/javascript" src="<a href="http://www.wifeo.com/tool/js/mootools.js" target="_blank">http://www.wifeo.com/tool/js/mootools.js</a>"></script>
    

  2. <script type="text/javascript" src="<a href="http://www.wifeo.com/tool/js/lightbox.js" target="_blank">http://www.wifeo.com/tool/js/lightbox.js</a>"></script>
    

  3.     <link rel="stylesheet" href="<a href="http://www.wifeo.com/tool/css/lightbox.css" target="_blank">http://www.wifeo.com/tool/css/lightbox.css</a>" type="text/css" />


En remplaçant les URLs...

C'est même plus être débutant là... c'est tenir par la main :) 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde