Sujet Précédent Sujet Suivant

Probleme avec lightbox

Fermé
gaya_102 - 2 avril 2009 à 15:21
 gaya_102 - 2 avril 2009 à 16:24
bonjour
Je ne sais pas si je suis au bon endroit

voila je viens d'installer toute se qu'il faut pour le lightbox mais ca ne marche pas
La photo a disparu de la page par contre le lien renvoie sur une autre page et la il y a ma photo.

Le problème vient d'ou?
Merci par avance de votre aide 
<!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" />

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


<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" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

	   
	   </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">toffe</a>

</div>
 <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>
A voir également:

4 réponses

Réponse 1 / 4
gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
2 avril 2009 à 15:37
Salut,

cela peut venir de l'ordre d'appel de tes fichiers JS.
Je vois que tu as bien déclaré Prototype avant Scriptaculous (important) mais pour les 2 autres, je ne sais pas trop, essaye et dis !

Sinon, optimise un peu ton code, notament ici : 

<script type="text/javascript">
    initMenu();
</script>
		   
		   	<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');


ça ne sert à rien de fermer et ré-ouvrir la balise script ! (enfin je crois lol)
Laisse là ouverte !

Puis, je pense qu'il y a une erreur ici : 

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 = '';
				}


Moi, j'aurai pas fait comme ça ! mdr
Nan mais je pense plutôt que ça soit un truc de ce genre : 

if (imgs[i].className == 'rollOver'){
	imgs[i].onmouseover = function() { this.src = this.alt; var a = this.src; this.alt = a;};
	imgs[i].onmouseout = function() { this.src = this.alt; var a = this.src; this.alt = a;};
	imgs[i].className = '';
}


Bon après, c'est sûr, je peux pas m'affirmer expert en Lightbox mais je l'est déjà utilisé quelque fois et ... quand un lien pointe sur l'image et sur une nouvelle page (un lien normal quoi), ben généralement, c'est une petite erreur à la con !lol

En espérant t'avoir aidé..

A+

Gaerebut
0
gaya_102
2 avril 2009 à 15:41
en fait la tu me parle du rollover mais lui il marche très bien.

En ce qui concerne l'ordre je l'ai pris sur le site de lightboss donc je pense que c'est le bon
0
Réponse 2 / 4
gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
2 avril 2009 à 15:46
Re,

je viens de re-lire ton code, et je crois que lorsque tu appelle des images qui sont incluses via un fichier PHP, ça bug.
Essaye de mettre un img avec un lien sur ta page (pas dans l'include).Si ça marche, tu sera fixé et n'aura plus qu'a faire de l'ajax ;p

A+

Gaerebut
0
gaya_102
2 avril 2009 à 15:52
Je comrpend pas mes images ne sont pas dans un iclude. Je debute donc je ne vois peut etre pas bien les choses. En fait l'include c'est juste mon menu
0
Réponse 3 / 4
gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
2 avril 2009 à 16:01
Re,

ha oui pardon, j'avais pas vu !

Donc dans ton Javascript tu dis que tu prend les elements dont le TagName est img MAIS il n'y a pas de balise img dans ton code;

je pense plutôt que ça serai un truc de ce genre (pour ton lien) 

<a href="image/toffe.jpg" rel="lightbox" title="toffe">toffe</a>


à remplacer par : 

<a href="image/toffe.jpg" rel="lightbox" title="toffe"><img src="image/toffe.jpg" alt="tofee" /></a>


Et si ça ne marche toujours pas, change la ligne suivante : 

var imgs = document.getElementsByTagName('img');


par la suivante : 

var imgs = document.getElementsByTagName('href');


Après, je ne peux plus rien pour toi ! lol
C'est ton code et tu dois mieux le connaitre que moi .

Comme tout bon informaticiens dirais : Google is your best Friend ;)

A+

Gaerebut
0
gaya_102
2 avril 2009 à 16:13
C'est beaucoup mieux. J'ai l'image dans ma page. Par contre quand je clique dessus ca m'envoie sur une autre page avec ma photo. Je me demande si je ne me suis pas trompé. En fait je voulais que quand on clique dessus le fond devient noir et il y la photo en plus grand avec un bouton pour fermé. Je sais pas si j'ai était claire.
0
Réponse 4 / 4
gaerebut Messages postés 1017 Date d'inscription mardi 30 octobre 2007 Statut Membre Dernière intervention 22 novembre 2013 171
2 avril 2009 à 16:23
Oui donc en gros, la bibliothèque ne marche pas et ça réagit comme un navigateur normal, ton lien t'emmène sur l'image (normal car tu mets l'image dans ton href).

Cherche un peu sur Google je connais pas assez cette bibliothèque pour t'aider d'avantage désolé.
A moins que des spécialiste de Prototype viennent te sauver ... cela serai plus vite de faire quelque petite recherche sur Google tu sais ! ^^

A+

Gaerebut
0
gaya_102
2 avril 2009 à 16:24
je cherche sur google. En tout cas je te remercie de ton aide.
0

Discussions similaires

Arnaque du site light in the box
paoupet -
brucine -

40 réponses
LightBox et Blogspot
endive -
jean -

4 réponses