Forum Clubic

Problème ajax - lightbox - css

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 : j’ai donc un site basique dans lequel j’ai ajouté un script pour n’avoir pas à actualiser la page à chaque lien
jusque là, aucun soucis.

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

La page seule marche très bien :

wovscreens.free.fr…

Mais quand j’essaye de l’insérer dans mon site, plus rien ne marche.

J’ai beau tout essayer, rien n’y fait : je ne sais pas si ça viens des scripts ou du css.

Voilà mes 2 derniers tests :

  • test 1 : j’ai 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 : j’ai testé la lightbox sur une page appelée dans ma div.

wovscreens.free.fr…

Il faut aller dans « collection » puis « cellulos »

Là, l’image s’ouvre dans une nouvelle fenêtre
c’est à n’y 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> 

J’ai également essayé d’appeler les fonctions dans la page principale mais rien n’y 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 m’y prendre
je compte vraiment sur votre aide. Merci d’avance.
Edité le 18/03/2008 à 17:17

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

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 …

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

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

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 …