Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1070 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  popup pour ouvrir des photos

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

popup pour ouvrir des photos

n°1816009
yyou
Posté le 24-11-2008 à 17:51:44  profilanswer
 

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 ?

mood
Publicité
Posté le 24-11-2008 à 17:51:44  profilanswer
 

n°1816031
Alisteroid
Posté le 24-11-2008 à 18:15:53  profilanswer
 
n°1816063
yyou
Posté le 24-11-2008 à 19:17:28  profilanswer
 

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.

n°1816128
yyou
Posté le 24-11-2008 à 21:34:21  profilanswer
 

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
n°1817144
yyou
Posté le 26-11-2008 à 16:10:43  profilanswer
 

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

n°1817156
Modération
Posté le 26-11-2008 à 16:25:07  answer
 

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.

n°1817160
Profil sup​primé
Posté le 26-11-2008 à 16:28:25  answer
 

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

n°1817190
yyou
Posté le 26-11-2008 à 17:16:28  profilanswer
 

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 ?

n°1817195
Alisteroid
Posté le 26-11-2008 à 17:20:05  profilanswer
 

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
n°1817199
Profil sup​primé
Posté le 26-11-2008 à 17:23:36  answer
 

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>

mood
Publicité
Posté le 26-11-2008 à 17:23:36  profilanswer
 

n°1817491
yyou
Posté le 27-11-2008 à 11:02:20  profilanswer
 

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>

n°1817555
Alisteroid
Posté le 27-11-2008 à 11:58:29  profilanswer
 

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
n°1817582
yyou
Posté le 27-11-2008 à 12:22:00  profilanswer
 

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
n°1818281
Alisteroid
Posté le 28-11-2008 à 11:21:30  profilanswer
 

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
n°1818306
yyou
Posté le 28-11-2008 à 12:21:10  profilanswer
 

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
n°1818478
Alisteroid
Posté le 28-11-2008 à 15:56:00  profilanswer
 

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
n°1818695
Profil sup​primé
Posté le 28-11-2008 à 18:11:55  answer
 

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)

n°1819254
yyou
Posté le 29-11-2008 à 21:15:08  profilanswer
 

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>

n°1819264
Profil sup​primé
Posté le 29-11-2008 à 21:41:01  answer
 

ah alors zut...


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  popup pour ouvrir des photos

 

Sujets relatifs
Ouvrir un userform d'un autre fichier ExcelOuvrir 1 page dans 1 cadre avec bouton Flash
Ouvrir une nouvelle page de facon aléatoirerenvoyer le resultat d un .bat dans fichier txt puis l ouvrir
renvoyer un resultat .bat dans fichier .txt puis l ouvrirOuvrir un fichier excel et le modifier en php
Macro sous Word insertion photos[VBA] Ouvrir un fichier Excel qui commence par...
Apparition popup sur page d'accueil se fermant au bout de 3ou 4 secRecherche script gallerie photos !
Plus de sujets relatifs à : popup pour ouvrir des photos

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.103 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR