popup pour ouvrir des photos

popup pour ouvrir des photos - HTML/CSS - Programmation

Marsh Posté le 24-11-2008 à 17:51:44    

Bonjour,
 
Sur mon site j'ai mis quelques photos en ligne. J'aimerais, en cliquant dessus, qu'un popup s'ouvre à la taille de l'image, plutôt que de mettre un lien direct vers l'image et de cliquer sur le bouton retour pour revenir à la page précédente.
Comment puis-je faire ?

Reply

Marsh Posté le 24-11-2008 à 17:51:44   

Reply

Marsh Posté le 24-11-2008 à 18:15:53    

Reply

Marsh Posté le 24-11-2008 à 19:17:28    

Merci, j'aime beaucoup les exemples. Le problème, c'est que je ne sais pas où coller ces codes. J'ai peur de faire n'importe quoi.

Reply

Marsh Posté le 24-11-2008 à 21:34:21    

tu ne voudrais pas récupérer mes fichier et c/c ce qu'il faut dans chaque ? J'ai vraiment du mal à comprendre.

Message cité 1 fois
Reply

Marsh Posté le 26-11-2008 à 16:10:43    

up : vraiment besoin d'aide, je suis bloquée

Reply

Marsh Posté le 26-11-2008 à 16:25:07    

yyou a écrit :

tu ne voudrais pas récupérer mes fichier et c/c ce qu'il faut dans chaque ? J'ai vraiment du mal à comprendre.


 
Il est contre la politique du forum de livrer un travail tout fait aux intervenants (cf. règles).
En revanche, nous sommes prêts à t'aider dans ta tache. Essaie de coller le code sur une page de test pour voir ce que ça donne, et si ça ne colle pas, n'hésite pas à venir chercher des précisions ici.

Reply

Marsh Posté le 26-11-2008 à 16:28:25    

La démarche est donnée ici :
http://www.lokeshdhakar.com/projects/lightbox2/#how
Et les fichiers à télécharger sont accessibles
http://www.lokeshdhakar.com/projec [...] /#download

Reply

Marsh Posté le 26-11-2008 à 17:16:28    

Merci mais y'a 36 fichiers, je ne sais pas quoi copier dans les quels. Donc je vais laisser tomber.
Y'a pas possibilité de faire simplement un popup, moins joli mais certainement plus facile ?

Reply

Marsh Posté le 26-11-2008 à 17:20:05    

Si tu sais pas même pas quel fichier modifier, ça va pas t'avancer plus de vouloir faire un truc plus simple.

Message cité 1 fois
Message édité par Alisteroid le 26-11-2008 à 17:22:49
Reply

Marsh Posté le 26-11-2008 à 17:23:36    

ne laisse pas tomber !
upload les dossiers js, images, et css dans le dossier ou se trouve ta page.
Puis,  
dans l'entete (les balises <head> et </head> ), tu mets :
 
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
 
et  
 
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 
Puis, pour chaque image dont tu veux afficher le popup lors du clic, utilise le code suivant :
 
<a href="url_de_limage.jpg" rel="lightbox" title="my caption">image #1</a>

Reply

Marsh Posté le 26-11-2008 à 17:23:36   

Reply

Marsh Posté le 27-11-2008 à 11:02:20    

Alisteroid a écrit :

Si tu sais pas même pas quel fichier modifier, ça va pas t'avancer plus de vouloir faire un truc plus simple.


Je veux que ce soit appliqué sur toutes les pages où j'ai des photos cliquables. Mais je pensais que la modif devait être faite directement dans la feuille de style.
 
Pour que les photos soient proprement alignées et à la même dimension, je les ai mises dans un tableau :
 
<table style="text-align: left; width: 442px; height: 73px;"
 border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td><a href="img/chaton8.JPG"><img
 style="border: 0px solid ; width: 84px; height: 63px;" alt=""
 src="img/chaton8.JPG"></a> </td>
      <td> <a href="img/chaton11.jpg"><img
 style="border: 0px solid ; width: 84px; height: 63px;" alt=""
 src="img/chaton11.jpg"></a></td>
      <td><a href="img/chaton15.JPG"><img
 style="border: 0px solid ; width: 84px; height: 63px;" alt=""
 src="img/chaton15.jpg"></a><br>
      </td>
      <td><br>
      </td>
      <td><br>
      </td>
    </tr>
    <tr>
      <td><a href="img/chaton9.JPG"><img
 style="border: 0px solid ; width: 84px; height: 105px;" alt=""
 src="img/chaton9.JPG"></a></td>
      <td><a href="img/chaton10.jpg"><img
 style="border: 0px solid ; width: 84px; height: 105px;" alt=""
 src="img/chaton10.jpg"></a></td>
      <td><a href="img/chaton12.jpg"><img
 style="border: 0px solid ; width: 84px; height: 105px;" alt=""
 src="img/chaton12.jpg"></a></td>
      <td><a href="img/chaton13.jpg"><img
 style="border: 0px solid ; width: 84px; height: 105px;" alt=""
 src="img/chaton13.jpg"></a></td>
      <td><a href="img/chaton14.jpg"><img
 style="border: 0px solid ; width: 84px; height: 105px;" alt=""
 src="img/chaton14.jpg"></a></td>
    </tr>
  </tbody>
</table>
 
Comment dois-je faire pour inclure ce code pour que ça reste joli ? : <a href="url_de_limage.jpg" rel="lightbox" title="my caption">image #1</a>

Reply

Marsh Posté le 27-11-2008 à 11:58:29    

Tu places à la racine de ton site dans un dossier "js" les fichiers :
"prototype.js", "scriptaculous.js", "effects.js", "builder.js" et "lightbox.js"

 

Tu places à la racine de ton site dans un dossier "css" le fichier :
"lightbox.css"

 

Entre les balises "<head>" de ta page du places :

 
Code :
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>
  4. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 

Et tu remplaces ton code au dessus par celui ci :

Code :
  1. <table style="text-align: left; width: 442px; height: 73px;" border="0"    cellpadding="2" cellspacing="2">
  2.     <tbody>
  3.         <tr>
  4.             <td>
  5.                 <a rel="lightbox" href="img/chaton8.JPG">
  6.                     <img style="border: 0px solid; width: 84px; height: 63px;" alt="" src="img/chaton8.JPG">
  7.                 </a>
  8.             </td>
  9.             <td>
  10.                 <a rel="lightbox" href="img/chaton11.jpg">
  11.                     <img style="border: 0px solid; width: 84px; height: 63px;" alt="" src="img/chaton11.jpg">
  12.                 </a>
  13.             </td>
  14.             <td>
  15.                 <a rel="lightbox" href="img/chaton15.JPG">
  16.                     <img style="border: 0px solid; width: 84px; height: 63px;" alt="" src="img/chaton15.jpg">
  17.                 </a>
  18.                 <br>
  19.             </td>
  20.             <td>
  21.                 <br>
  22.             </td>
  23.             <td>
  24.                 <br>
  25.             </td>
  26.         </tr>
  27.         <tr>
  28.             <td>
  29.                 <a rel="lightbox" href="img/chaton9.JPG">
  30.                     <img style="border: 0px solid; width: 84px; height: 105px;" alt="" src="img/chaton9.JPG">
  31.                 </a>
  32.             </td>
  33.             <td>
  34.                 <a rel="lightbox" href="img/chaton10.jpg">
  35.                     <img style="border: 0px solid; width: 84px; height: 105px;" alt="" src="img/chaton10.jpg">
  36.                 </a>
  37.             </td>
  38.             <td>
  39.                 <a rel="lightbox" href="img/chaton12.jpg">
  40.                     <img style="border: 0px solid; width: 84px; height: 105px;" alt="" src="img/chaton12.jpg">
  41.                 </a>
  42.             </td>
  43.             <td>
  44.                 <a rel="lightbox" href="img/chaton13.jpg">
  45.                     <img style="border: 0px solid; width: 84px; height: 105px;" alt="" src="img/chaton13.jpg">
  46.                 </a>
  47.             </td>
  48.             <td>
  49.                 <a rel="lightbox" href="img/chaton14.jpg">
  50.                     <img style="border: 0px solid; width: 84px; height: 105px;"    alt="" src="img/chaton14.jpg">
  51.                 </a>
  52.             </td>
  53.         </tr>
  54.     </tbody>
  55. </table>
 

Le site est bloqué à mon taf, donc je peux pas en dire plus ...


Message édité par Alisteroid le 27-11-2008 à 12:06:37
Reply

Marsh Posté le 27-11-2008 à 12:22:00    

Tu vas dire que je ne comprends rien à rien, mais j'ai fait ça, et ça ne change rien :
 
<a href="img/chaton8.JPG" rel="lightbox">
      <img style="border: 0px solid ; width: 84px; height: 63px;"
 alt="" src="img/chaton8.JPG"> </a></td>


Message édité par yyou le 27-11-2008 à 12:22:23
Reply

Marsh Posté le 28-11-2008 à 11:21:30    

Alisteroid a écrit :

Tu places à la racine de ton site dans un dossier "js" les fichiers :
"prototype.js", "scriptaculous.js", "effects.js", "builder.js" et "lightbox.js"

 

Tu places à la racine de ton site dans un dossier "css" le fichier :
"lightbox.css"

 

Entre les balises "<head>" de ta page du places :

 
Code :
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>
  4. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />




 [:cerveau julian33]


Message édité par Alisteroid le 28-11-2008 à 11:21:48
Reply

Marsh Posté le 28-11-2008 à 12:21:10    

J'ai fait exactement ça sur cette page, sur là, sur la 1ère série de photos (chatons à 1 mois) : http://adelaurie.neuf.fr/photoschatons.html mais toujours même problème : rien ne change.
La seule modification que j'ai apporté à ton code c'est src="LB/js/prototype.js"> au lieu de src="js/prototype.js"> (pour les 4 lignes bien sûr) car avant de venir demander de l'aide ici j'avais trouvé un tuto en français sur le net qui demandait de mettre tous les dossiers dans un seul nommé LB. Plutôt que de modifier tous les fichiers je pense qu'il a été plus simple de faire ainsi.

Message cité 1 fois
Reply

Marsh Posté le 28-11-2008 à 15:56:00    

Ah oui j'ai regardé la librairie est bien intégrée si ton site, je regarde en rentrant car le site de lightbox est bloqué à mon taf ;)


Message édité par Alisteroid le 28-11-2008 à 15:56:12
Reply

Marsh Posté le 28-11-2008 à 18:11:55    

yyou a écrit :

J'ai fait exactement ça sur cette page, sur là, sur la 1ère série de photos (chatons à 1 mois) : http://adelaurie.neuf.fr/photoschatons.html mais toujours même problème : rien ne change.
La seule modification que j'ai apporté à ton code c'est src="LB/js/prototype.js"> au lieu de src="js/prototype.js"> (pour les 4 lignes bien sûr) car avant de venir demander de l'aide ici j'avais trouvé un tuto en français sur le net qui demandait de mettre tous les dossiers dans un seul nommé LB. Plutôt que de modifier tous les fichiers je pense qu'il a été plus simple de faire ainsi.


 
Tu as oublié d'ajouter l'attribut  
rel="lightbox"
à tous les éléments "a" (liens)

Reply

Marsh Posté le 29-11-2008 à 21:15:08    

Si je les ai mis :
 
 
<tbody>
 
    <tr>
 
      <td>
      <a rel="lightbox" href="img/chaton8.JPG"><img style="border: 0px solid ; width: 84px; height: 63px;" alt="" src="img/chaton8.JPG"></a></td>
 
      <td>
      <a rel="lightbox" href="img/chaton11.jpg"><img style="border: 0px solid ; width: 84px; height: 63px;" alt="" src="img/chaton11.jpg"></a></td>
 
      <td>
      <a rel="lightbox" href="img/chaton15.JPG"><img style="border: 0px solid ; width: 84px; height: 63px;" alt="" src="img/chaton15.jpg"></a><br>
 
      </td>
 
      <td>
      <br>
 
      </td>
 
      <td>
      <br>
 
      </td>
 
    </tr>
 
    <tr>
 
      <td>
      <a rel="lightbox" href="img/chaton9.JPG"><img style="border: 0px solid ; width: 84px; height: 105px;" alt="" src="img/chaton9.JPG"></a></td>
 
      <td>
      <a rel="lightbox" href="img/chaton10.jpg"><img style="border: 0px solid ; width: 84px; height: 105px;" alt="" src="img/chaton10.jpg"></a></td>
 
      <td>
      <a rel="lightbox" href="img/chaton12.jpg"><img style="border: 0px solid ; width: 84px; height: 105px;" alt="" src="img/chaton12.jpg"></a></td>
 
      <td>
      <a rel="lightbox" href="img/chaton13.jpg"><img style="border: 0px solid ; width: 84px; height: 105px;" alt="" src="img/chaton13.jpg"></a></td>
 
      <td>
      <a rel="lightbox" href="img/chaton14.jpg"><img style="border: 0px solid ; width: 84px; height: 105px;" alt="" src="img/chaton14.jpg"></a></td>
 
    </tr>
 
  </tbody>
</table>

Reply

Marsh Posté le 29-11-2008 à 21:41:01    

ah alors zut...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed