La bibliothèque lightbox

Version imprimable

Voir 40 message(s) de cette discussion en une page

tes chemins ne sotn pas bon :
Code:

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 ;)

03/04/2009, 17h14
gaya102

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
03/04/2009, 17h22
Walterbelo

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).
03/04/2009, 17h32
le_chomeur

Il s'agissait d'une version de démo ultra beta ( normalement pour certaines personne ;) ) la version finale sera mise en ligner vers 18h :)

voila mon code modifié

Code:

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>

03/04/2009, 17h36
le_chomeur
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:

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

Ok

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

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

donc a priori il ne reste que l'id en double :)
03/04/2009, 17h40
gaya102

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
03/04/2009, 17h51
gaya102

je comprend pas je n'arrive plus a balancer mes pages sur le serveur il garde l'ancienne
03/04/2009, 17h54
gaya102

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

http://julienetemeline.free.fr/toffe.php
03/04/2009, 18h11
le_chomeur

tu as due supprimer ton css principal ^^
ps : tu as une erreur avec un autre script ( celui de menu )
03/04/2009, 18h15
gaya102

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

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

Code:

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>

03/04/2009, 18h30
le_chomeur

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 ;) )
03/04/2009, 18h33
gaya102

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?
03/04/2009, 18h35
le_chomeur

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 :)
03/04/2009, 18h44
gaya102

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?
03/04/2009, 19h07
le_chomeur
pour l'mage en grand :

Code:

<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:

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 :)
03/04/2009, 19h12
gaya102

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?

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

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:

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

03/04/2009, 19h20
gaya102

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

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

Voir 40 message(s) de cette discussion en une page