11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Alors, je suis novice en CSS, JS et Ajax du coup mon savoir reste plutôt limité! Voici mon problème :

dans le processus de réalisation d'un site Web, concernant la partie du XHTML intégrant du Ajax, j'ai utilisée ce script trouvé au lien suivant :

http://www.phatfusion.net/pageloader/#about:blank

En fait, en gros c'est pour charger le contenu d'une page html dans une autre page html grâce à une <div>. Mon script marche très bien, je n'ai aucun soucis à ce sujet, mais je dois vous préciser que mon contenu à charger est une image. Et cette dernière est assez spéciale du fait qu'elle est un lien et que ce lien doit ouvrir l'image en une taille plus grande, avec une galerie en javascript.

Du coup, le lien image marche dans ma div chargeant la page html, mais l'image ne s'affiche pas dans ma galerie javaScript mais dans une autre fenêtre html. Il est à noter que mon lien dans la page à charger marche très bien avec la galerie JavaScript.

Ca paraît compliqué comme ça, mais au final c'est simple.

Voici mes parties de code :

- Page Html qui contient les images avec la Lightox :


<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
</head>
<body>

<div id="content">
<h2>Content page 3</h2>
<a href="img/media-docenahombres-de-medi.jpg" rel="lightbox" title="my caption"><img src="img/th_media-docenahombres-de-medi.jpg"></a>
<img src="img/th_media-docenahombres-de-medi.jpg">
<img src="img/th_media-docenahombres-de-medi.jpg">
</div>

</body>
</html>



et Voici la partie du code de la 2ème page censée charger le contenu de la page précédente dans une div :


<head>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="history.js"></script>
<script type="text/javascript" src="pageLoader.js"></script>
</head>

<body>
<div id="dhtmlgoodies_menu">
<ul>
  <li><a href="#">Adolfo Siurana</a>
    <ul>
      <li><a href="#">curriculum vitae</a></li>
      <li><a href="content5.htm" class="loadMe">obras</a></li>
    </ul>
  </li>
  <li><a href="#">Aitor Lara</a>
    <ul>
      <li><a href="#">curriculum vitae</a></li>
      <li><a href="#">obras</a></li>
    </ul>
  </li>
</div>

<script type="text/javascript">
			
			window.addEvent('domready', function(){
				new pageLoader({loadInTo:'ajaxContent'});
				new History();
			});
		</script>

<div id="ajaxContent"></div>





Si vous avez besoin d'avoir d'autres renseignements, dites le moi!

Merci pour tout!!!!
Modifié par late_night1982 (21 Oct 2008 - 13:18)
Bonjour,

Pour faire ce que tu décris, il faut que tu declare sur ta "Page2" le script "lightbox" pour pouvoir avoir l'effet désirer.

Corrige aussi le head de ta page2, inutile de declarer 2 fois le script Mootools.js.

Il y a aussi une chose a faire pour rendre le tout plus propre, rassemble tous les scripts java dans le dossier JS et supprime les de ton dossier racine.
N'oublie pas de corriger les chemins des autres scripts dans le head de toutes les pages les utilisant pour qu'ils pointent vers le dossier JS.

voilà, j'espère t'avoir été utile