Problème ajax - lightbox - css

nownow · Mars 18, 2008, 5:15

Bonjour à tous,

Je me permets décrire ce message pour vous demander votre aide car je suis perdu. Cela fait 2 jours que je suis sur ce problème et je ne trouve aucune solution

Je vais essayer de vous expliquer : jai donc un site basique dans lequel jai ajouté un script pour navoir pas à actualiser la page à chaque lien
jusque là, aucun soucis.

Les problèmes sont arrivés lorsque jai décidé de mettre une lightbox pour afficher mes images.

La page seule marche très bien :

wovscreens.free.fr…

Mais quand jessaye de linsérer dans mon site, plus rien ne marche.

Jai beau tout essayer, rien ny fait : je ne sais pas si ça viens des scripts ou du css.

Voilà mes 2 derniers tests :

test 1 : jai enlevé le « onload » sur la page index pour voir si la lightbox marcherait. Là, ça marche mais les images de ma page principale restent en premier plan, la lightbox, elle, est au second
bref, pas top.

Voilà la page : wovscreens.free.fr…

Et le code :

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

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	
	<meta name="author" content="Nownow" />
	
	<meta name="keywords" content="Nownow, Collection, Saint Seiya, cels, cellulos, cellulos, pvc, figures, figure">
	
	<meta name="description" content="The website of my several collections" />
	
	<meta name="robots" content="all" />
	
	<title>Nownow Collection</title>

	<link rel="Shortcut Icon" type="image/x-icon" href="collec" />	
	
	<link rel="alternate" type="application/rss+xml" title="RSS" href="collec.xml" />
	
	<script src="js/load.js" type="text/javascript"></script>
	
	<link href="images/collec2.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" src="js/mootools.v1.1.js"></script>
	<script type="text/javascript" src="js/slimbox.js"></script>

	<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

	
</head>

<body id="nownow">

<div id="container">

  <div id="intro">
  
		<div id="pageHeader">
			<h1><span>Nownow Collection</span></h1>
			<h2><span>Le plaisir de collectionner</span></h2>
		</div>

		<div id="quickSummary">
			<p align="justify" class="p1"><span>Bienvenue sur ce site.<br />
			  Vous</span> y trouverez l'ensemble de mes diverses collections.</p>
			<p align="justify" class="p2"><span>En esp&eacute;rant que vous appr&eacute;cierez votre visite.</span></p>
	  </div>

  </div>
  
	<div id="supportingText">
		<div id="explanation">
			  <a href="pages/images/persos/ss1.jpg" rel="lightbox[setName]"><img src="pages/images/persos/thb_ss1.jpg"></a>
<a href="pages/images/persos/ss2.jpg" rel="lightbox[setName]"><img src="pages/images/persos/thb_ss2.jpg"></a>
		  
				</div>

		<div id="footer">
			
		</div>

	</div>

	
	<div id="linkList">
		<div id="linkList2">
			<div id="lselect">
				<h3 class="select"><span>Select a Design:</span></h3>
				<ul>
					<li><a href="javascript:ajaxpage('pages/news.html', 'explanation');" title="News" accesskey="c">News</a></li>
					<li><a href="javascript:ajaxpage('pages/collec.html', 'explanation');", title="Collection" accesskey="d">Collection</a></li>
					<li><a href="javascript:ajaxpage('pages/rech.html', 'explanation');" title="Recherches" accesskey="e">Recherches</a></li>
					<li><a href="javascript:ajaxpage('pages/ventes.html', 'explanation');" title="Ventes" accesskey="f">Ventes</a></li>
					<li><a href="javascript:ajaxpage('pages/contact.html', 'explanation');" title="Contact" accesskey="g">Contact</a></li>
				    <li><a href="javascript:ajaxpage('pages/plan.html', 'explanation');" title="Contact" accesskey="h">Plan du site </a></li>
				</ul>
			</div>

			<div id="larchives">
				<h3 class="archives"><span>Archives:</span></h3>
				<ul>
					<li><a href="#" title="" >Ignis the Black </a></li>
					<li><a href="#" title=""> Kusugawa Sasara - To Heart 2 </a></li>
					<li><a href="#" title="">Clare - Claymore  </a></li>
				</ul>
			</div>
			
			<div id="lresources">
				<h3 class="resources"><span>Resources:</span></h3>
				<ul>
					<li><a href="#" title=""> Fran&ccedil;ais</a></li>					
					<li><a href="pages/english/english.html" title="">English</a></li>
					<li><a href="pages/japanese/japanese.html">日本の</a></li>
			  </ul>
			</div>
		</div>
	</div>


</div>

<div id="extraDiv1"><span></span></div>
<div id="extraDiv2"><span></span></div>

</body>

</html>

test 2 : jai testé la lightbox sur une page appelée dans ma div.

wovscreens.free.fr…

Il faut aller dans « collection » puis « cellulos »

Là, limage souvre dans une nouvelle fenêtre
cest à ny rien comprendre

Voilà le code des différentes pages :

Index :

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

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	
	<meta name="author" content="Nownow" />
	
	<meta name="keywords" content="Nownow, Collection, Saint Seiya, cels, cellulos, cellulos, pvc, figures, figure">
	
	<meta name="description" content="The website of my several collections" />
	
	<meta name="robots" content="all" />
	
	<title>Nownow Collection</title>

	<link rel="Shortcut Icon" type="image/x-icon" href="collec" />	
	
	<link rel="alternate" type="application/rss+xml" title="RSS" href="collec.xml" />
	
	<script src="js/load.js" type="text/javascript"></script>
	
	<link href="images/collec2.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" src="js/mootools.v1.1.js"></script>
	<script type="text/javascript" src="js/slimbox.js"></script>

	<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

</head>

<body id="nownow" onload="javascript:ajaxpage('pages/news.html', 'explanation');">

<div id="container">

  <div id="intro">
  
		<div id="pageHeader">
			<h1><span>Nownow Collection</span></h1>
			<h2><span>Le plaisir de collectionner</span></h2>
		</div>

		<div id="quickSummary">
			<p align="justify" class="p1"><span>Bienvenue sur ce site.<br />
			  Vous</span> y trouverez l'ensemble de mes diverses collections.</p>
			<p align="justify" class="p2"><span>En esp&eacute;rant que vous appr&eacute;cierez votre visite.</span></p>
	  </div>

  </div>
  
	<div id="supportingText">
		<div id="explanation">
			  
		  
				</div>

		<div id="footer">
			
		</div>

	</div>

	
	<div id="linkList">
		<div id="linkList2">
			<div id="lselect">
				<h3 class="select"><span>Select a Design:</span></h3>
				<ul>
					<li><a href="javascript:ajaxpage('pages/news.html', 'explanation');" title="News" accesskey="c">News</a></li>
					<li><a href="javascript:ajaxpage('pages/collec.html', 'explanation');", title="Collection" accesskey="d">Collection</a></li>
					<li><a href="javascript:ajaxpage('pages/rech.html', 'explanation');" title="Recherches" accesskey="e">Recherches</a></li>
					<li><a href="javascript:ajaxpage('pages/ventes.html', 'explanation');" title="Ventes" accesskey="f">Ventes</a></li>
					<li><a href="javascript:ajaxpage('pages/contact.html', 'explanation');" title="Contact" accesskey="g">Contact</a></li>
				    <li><a href="javascript:ajaxpage('pages/plan.html', 'explanation');" title="Contact" accesskey="h">Plan du site </a></li>
				</ul>
			</div>

			<div id="larchives">
				<h3 class="archives"><span>Archives:</span></h3>
				<ul>
					<li><a href="#" title="" >Ignis the Black </a></li>
					<li><a href="#" title=""> Kusugawa Sasara - To Heart 2 </a></li>
					<li><a href="#" title="">Clare - Claymore  </a></li>
				</ul>
			</div>
			
			<div id="lresources">
				<h3 class="resources"><span>Resources:</span></h3>
				<ul>
					<li><a href="#" title=""> Fran&ccedil;ais</a></li>					
					<li><a href="pages/english/english.html" title="">English</a></li>
					<li><a href="pages/japanese/japanese.html">日本の</a></li>
			  </ul>
			</div>
		</div>
	</div>


</div>

<div id="extraDiv1"><span></span></div>
<div id="extraDiv2"><span></span></div>

</body>

</html>

Page essai2a.html :

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

</head>

<body>

<a href="pages/image/plant1.jpg" rel="lightbox[setName]"><img src="pages/image/plant1_t.jpg"></a>
<a href="pages/image/plant2.jpg" rel="lightbox[setName]"><img src="pages/image/plant2_t.jpg"></a>
<a href="pages/image/plant3.jpg" rel="lightbox[setName]"><img src="pages/image/plant3_t.jpg"></a>
<a href="pages/image/plant4.jpg" rel="lightbox[setName]"><img src="pages/image/plant4_t.jpg"></a>

</body>
</html>

Jai également essayé dappeler les fonctions dans la page principale mais rien ny fait

Vous trouverez mes différents fichiers js et css ici :

JS : wovscreens.free.fr…
CSS :
Page index : wovscreens.free.fr…
Lightbox : wovscreens.free.fr…

(un autre soucis : je ne peux pas déplacer mon css dans un autre dossier, la page principale ne retrouve pas les images après
même si les liens sont corrects
encore une chose incompréhensible
)

Je ne sais vraiment pas comment my prendre
je compte vraiment sur votre aide. Merci davance.
Edité le 18/03/2008 à 17:17

oximini · Mars 18, 2008, 6:58

Dans ton test 1, ce ne serait pas un problème de z-index plus élevé que la lightbox (qui du coup affiche tes images en premier plan)

Essais de leur ajouter un z-index:0; dans ton CSS

nownow · Mars 18, 2008, 7:15

Oui ^^

Bien joué pour le z-index !!! C’est déjà ça de gagner … Merci à toi !!

J’espère qu’on trouvera la solution pour la suite …

oximini · Mars 18, 2008, 7:19

C’est quoi la suite ?
Profite de ton topic pour tout y mettre

nownow · Mars 18, 2008, 7:48

Ben la suite, c’est le soucis dans le test 2 malheureusement …

Je ne sais pas comment faire que la lightbox s’ouvre dans la page appelée dans la div : rien ne s’affiche et une nouvelle fenêtre s’ouvre avec l’image à la place d’ouvrir la lightbox :(

nownow · Mars 19, 2008, 12:56

Serait-il possible que le lien entre les 2 pages html (la page index et celle appelée dans la div) ne fonctionne pas ?

Je m’explique : la page index appelle les fonctions js mais ces dernières n’ont pas d’effet sur les pages affichées dans la div. Cependant, même en les appelant dans chaque page, ça ne marche pas …