La bibliothèque lightbox

**le_chomeur** · 03/04/2009, 13h43

tes chemins ne sotn pas bon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<script type="text/javascript" src="scripts/JsonPropre.js"></script>
remplace par :
 
<script type="text/javascript" src="JsonPropre.js"></script>

je te laisse vérifier les chemins des autres fichiers

**gaya102** · 03/04/2009, 16h14

bon j'ai fait les mofis ca ne marche toujours pas.
J'ai toujours se problème d'image que je ne sais pas ou les mettre et que du coup je n'ai pas encore mis sur le serveur

**Walterbelo** · 03/04/2009, 16h22

Bonjour, sur http://mbox.tuxfamily.org/# ça semble bien intéressant, mais j'ai beau cliquer partout, rien ne se passe (FF 3.0.8).

**le_chomeur** · 03/04/2009, 16h32

Il s'agissait d'une version de démo ultra beta ( normalement pour certaines personne

) la version finale sera mise en ligner vers 18h

**gaya102** · 03/04/2009, 16h33

voila mon code modifié

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Jour J</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<link rel="stylesheet" type="text/css" href="demo1.css" />
<script type="text/javascript" src="JsonPropre.js"></script>
<script type="text/javascript" src="demo1.js"></script>
 
 
	   <script type="text/javascript">
			Objet.AddEvent(window, 'load',
			function() {
			    Galery('toffe')
			});
 
		</script>
	   </head>
 
   <body>
       <div id="rubrique">        
 
		   <?php
include("menu.php");
?> 
           <div id="texte"> 
		   <br>
<h2>Toffee</h2>
 
		   <P>La présentation de ne serait pas complète sans présenter Toffee de la race « les chats d’amour ».</P>
 
<p>Toffee a débarqué un soir de juillet 2002 dans la vie d’Emeline : elle est arrivée du boulevard de Belleville à Paris en moto cachée dans le blouson de moto !</p>
 
<p>A l’époque elle avait à peine 5 semaine.</p>
<div id="toffe">
 
<a href="image/toffe.jpg" rel="lightbox" title="toffe"><img src="image/toffe.jpg" alt="tofee" /></a>
</div>
 
<p>
				<ul id="toffe">
					<li><img src="image/toffe.jpg" alt="image/toffe.jpg" /></li>
 
				</ul>
			</p>	
 
 <p>Comment ne pas craquer devant cette petite boule de poil !</p>
 
 
<p>Elle a d’abord suivi la vie étudiante de sa maîtresse à Rennes. Puis après un court passage de quelques mois chez ses grands-parents elle s’est installée à Rueil Malmaison où elle a rencontré Julien !</p>
 
<p>Elle a commencé a apprécié le balcon dans le premier appartement d’Emeline et Julien (0019) et continue aujourd’hui à Chatou sa vie de chat ou plutôt de PACHA !</p>
 
<p>Mais bon, ses maîtres lui pardonne car elle est d’une aide particulièrement active dans les préparatifs du mariage </p>
 
 
 
 
 
		   </div>
 
 
		   </div>
		   <script type="text/javascript">
    initMenu();
</script>
 
		   	<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
 
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
 
			</script>
   </body>
</html>

**le_chomeur** · 03/04/2009, 16h36

gaya as tu suivis les instructions ?
de plus tu as plusieurs fois l'id 'id="toffe"' donc que ce soit avec ma librairie ou une autre ça plantera forcément.

reprenons point par point :

une div avec id="toffe" : Ok

des images ( une ou X ) sous cette forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/petite.jpg" alt="images/grande.jpg" />

Ok

ensuite insertion des scripts avec le bon chemin ?
appel de la méthode :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
Objet.AddEvent(window, 'load',
			function() {
			    Galery('toffe')
			});

Ok

donc a priori il ne reste que l'id en double

**gaya102** · 03/04/2009, 16h40

je sais pas se qu'il c'est passé mais ma page est parti en vrille complet juste en enlevant un id

http://julienetemeline.free.fr/toffe.php

**gaya102** · 03/04/2009, 16h51

je comprend pas je n'arrive plus a balancer mes pages sur le serveur il garde l'ancienne

**gaya102** · 03/04/2009, 16h54

bon ca y est effectivement d'avoir enlevé un id c'a mis ma page en vrille. Pourquoi?

http://julienetemeline.free.fr/toffe.php

**le_chomeur** · 03/04/2009, 17h11

tu as due supprimer ton css principal ^^
ps : tu as une erreur avec un autre script ( celui de menu )

**gaya102** · 03/04/2009, 17h15

en fait on est 2 a bosser sur le site je pense que l'autre personne a touché a ma page alors que je lui avais dit de ne pas le faire lol

**gaya102** · 03/04/2009, 17h19

effectivement une ligne de code a sauté. par contre ca ne marche toujours pas
Désole je ne suis pas très doué

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Jour J</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<link rel="stylesheet" type="text/css" href="demo1.css" />
<script type="text/javascript" src="JsonPropre.js"></script>
<script type="text/javascript" src="demo1.js"></script>
 
<link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />
	   <script type="text/javascript">
			Objet.AddEvent(window, 'load',
			function() {
			    Galery('toffe')
			});
 
		</script>
	   </head>
 
   <body>
       <div id="rubrique">        
 
		   <?php
include("menu.php");
?> 
           <div id="texte"> 
		   <br>
<h2>Toffee</h2>
 
		   <P>La présentation de ne serait pas complète sans présenter Toffee de la race « les chats d’amour ».</P>
 
<p>Toffee a débarqué un soir de juillet 2002 dans la vie d’Emeline : elle est arrivée du boulevard de Belleville à Paris en moto cachée dans le blouson de moto !</p>
 
<p>A l’époque elle avait à peine 5 semaine.</p>
 
<p>
				<ul id="toffe">
					<li><img src="image/toffe.jpg" alt="image/toffe.jpg" /></li>
 
				</ul>
			</p>	
 
 <p>Comment ne pas craquer devant cette petite boule de poil !</p>
 
 
<p>Elle a d’abord suivi la vie étudiante de sa maîtresse à Rennes. Puis après un court passage de quelques mois chez ses grands-parents elle s’est installée à Rueil Malmaison où elle a rencontré Julien !</p>
 
<p>Elle a commencé a apprécié le balcon dans le premier appartement d’Emeline et Julien (0019) et continue aujourd’hui à Chatou sa vie de chat ou plutôt de PACHA !</p>
 
<p>Mais bon, ses maîtres lui pardonne car elle est d’une aide particulièrement active dans les préparatifs du mariage </p>
 
 
 
 
 
		   </div>
 
 
		   </div>
		   <script type="text/javascript">
    initMenu();
</script>
 
		   	<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
 
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
 
			</script>
   </body>
</html>

**le_chomeur** · 03/04/2009, 17h30

il manque le dossier : img contenant les images de ma box

pour le reste met une image de ton chaton beaucoup plus grande ( dans la balise alt

)

**gaya102** · 03/04/2009, 17h33

c'est la question que je te demandais car je ne sais pas du tout ou les mettre tes images dans on dossier image ou a part?

**le_chomeur** · 03/04/2009, 17h35

dans un dossier nomé "img" OU dans ton dossier images, mais dans quel cas tu devras modifier le css ...

Donc, je te conseille de créer un dossier img et de les mettres dedans

**gaya102** · 03/04/2009, 17h44

ca marche presque lol
Par contre j'ai une question sur le fonctionnement. J'ai vu ou je pouvais mettre l'image petite
<li><img src="image/toffe.jpg" alt="image/toffe.jpg" /></li>

mais ou je dois mettre le lien vers la grande.

Ensuite ma photo a un cadre trop grand avec un point devant. Comment je peux l'enlever

Les personnes qui vont naviguer sur le site ne vont pas voir qu'elles peuvent cliquer sur la photo. Comment on fait pour que le curseur devienne une main?

**le_chomeur** · 03/04/2009, 18h07

pour l'mage en grand :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li><img src="image/toffe.jpg" alt="image/urlGrande.jpg" /></li>

et

pour indiquer qu'il faut cliquer sur les images , dans le fichier css ( le mien ou le tiens ) ajoute ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#toffe li img{
cursor:pointer;
}

il te restera une petite mise en forme pour tes images si tu en met plus d'une car tu as également utilisé une liste

**gaya102** · 03/04/2009, 18h12

franchement ton kit est vraiment génial.
en fait je croyais que alt c'était juste le texte qui apparassait au cas ou la photo planté.

Par contre qu'est ce que tu veux dire par "il te restera une petite mise en forme pour tes images si tu en met plus d'une car tu as également utilisé une liste"

Je peux utilisé mon id="toffe" sur toute les photos de mon site. Par exemple si j'en met une autre dans une autre page ou plus bas dans la page. D'ailleur si c'est plus bas dans la page je dois le remettre aussi? est ce que ca va pas planter?

**le_chomeur** · 03/04/2009, 18h18

en fait , tu as simplement a ajouter autant d'image que tu le souhaite dans ta liste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul id="toffe">
<li><img src="..." alt="..." /></li>
<li><img src="..." alt="..." /></li>
<li><img src="..." alt="..." /></li>
<li><img src="..." alt="..." /></li>
<li><img src="..." alt="..." /></li>
<li><img src="..." alt="..." /></li>
<ul>

n'oublie pas d'indiquer qu'il faut utiliser les flèches droite et gauche pour naviguer ( changer d'image après avoir cliquez sur l'une d'entre elle )

pour la mise en page, étant donné que tu as mis une liste , les images vont apparaitre les unes en dessous des autres

pour combler cecic :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#toffe li{
display:inline;
float:left;
}

**gaya102** · 03/04/2009, 18h20

le problème c'est que je voudrais séparé les photos de textes.

Comment je peux faire pour rajouté les flèches?

La bibliothèque lightbox

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager