bonjour, je cherche à exploiter ajax pour une galerie d'images on survole une mini image et elle s'affiche en grand dans un div spécifique <div id="bigview"> qui contient lui même une image par défaut, le souci est que je cherche également à afficher d'abord une image .gif d'attente dans img/spinner.gif style loader
puis quand la grande image est completement chargée on affiche celle -ci
je vous propose le code ici html et js en extrait ou vous propose de telecharger les sources ainsi que les imageshttp://www.jeremieparmentier.com/test/test-ajax.zip
merci de votre aide!
html:
<div id="sousrub1"> <img class="imagette" src="portfolio_fichiers/imagette_logo1.gif" onmouseover="javascript:enlarge(this)" alt="/img/imagette_logo1.gif" border="0"></a> </div>
</div><div id="content"><div id="bigview"><img src="img/repere3.gif"></div>
ajax.js
Code :
- function createXHR()
- {
- var request = false;
- try {
- request = new ActiveXObject('Msxml2.XMLHTTP');
- }
- catch (err2) {
- try {
- request = new ActiveXObject('Microsoft.XMLHTTP');
- }
- catch (err3) {
- try {
- request = new XMLHttpRequest();
- }
- catch (err1)
- {
- request = false;
- }
- }
- }
- return request;
- }
|
gallery.js
Code :
- function localFilename(url) // removing path
- {
- var x = url.lastIndexOf("/" );
- url = url.slice(x + 1);
- return url;
- }
- // images are loaded asynchronously with no delay
- function preloading(url)
- {
- var xhr=createXHR();
- xhr.onreadystatechange=function()
- {
- if(xhr.readyState == 4)
- {
- var content = xhr.responseText;
- var i = new Image();
- i.src = content;
- }
- };
- xhr.open("GET", url , true);
- xhr.send(null);
- }
- function enlarge(element)
- {
- //ici
- var name = element.src;
- name = localFilename(name);
- name = name.slice(9);
- name = "./img/" + name;
- // building a string to display the image
- var str = "<img src='" + name + "' >";
- document.getElementById("bigview" ).innerHTML = str;
- }
|
