Modification du script Lightbox

Bonjour à tous.

après mon dernier sujet où je cherchais des scripts de zoom, je pense avoir trouvé ce qu'il me fallait en remplacement, cependant j'ai un petit souci dans la finalisation.

je vous explique donc : j'affiche une image, lorsqu'on clique dessus cela lance le script lightbox. jusqu'ici aucun problème. cependant j'ai un deuxième script permettant de faire un zoom encore plus gros au passage de la souris. j'aimerais que ce second script se lance sur l'image affichée par la lightbox.

petites informations : j'utilise le script lightbox 2 téléchargé ici et un script trouvé sur javascriptfr.com, disponible ici


voilà, j'ai donc créé le code html dans le script lightbox, voici ce que j'ai fait :

		// Code inserts html at the bottom of the page that looks similar to this:
		//
		//	<div id="overlay"></div>
		//	<div id="lightbox">
		//		<div id="outerImageContainer">
		//			<div id="imageContainer">
		//				<img id="lightboxImage">
		//				<div style="" id="hoverNav">
		//					<a href="#" id="prevLink"></a>
		//					<a href="#" id="nextLink"></a>
		//				</div>
		//				<div id="loading">
		//					<a href="#" id="loadingLink">
		//						<img src="images/loading.gif">
		//					</a>
		//				</div>
		//			</div>
		//		</div>
		//		<div id="imageDataContainer">
		//			<div id="imageData">
		//				<div id="imageDetails">
		//					<span id="caption"></span>
		//					<span id="numberDisplay"></span>
		//				</div>
		//				<div id="bottomNav">
		//					<a href="#" id="bottomNavClose">
		//						<img src="images/close.gif">
		//					</a>
		//				</div>
		//			</div>
		//		</div>
		//	</div>


		var objBody = document.getElementsByTagName("body").item(0);
		
		var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','overlay');
		objOverlay.style.display = 'none';
		objOverlay.onclick = function() { myLightbox.end(); }
		objBody.appendChild(objOverlay);
		
		var objLightbox = document.createElement("div");
		objLightbox.setAttribute('id','lightbox');
		objLightbox.style.display = 'none';
		objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
			if (!e) var e = window.event;
			var clickObj = Event.element(e).id;
			if ( clickObj == 'lightbox') {
				myLightbox.end();
			}
		};
		objBody.appendChild(objLightbox);
		
		var objImageDataContainer = document.createElement("div");
		objImageDataContainer.setAttribute('id','imageDataContainer');
		objLightbox.appendChild(objImageDataContainer);

		var objImageData = document.createElement("div");
		objImageData.setAttribute('id','imageData');
		objImageDataContainer.appendChild(objImageData);
	
		var objImageDetails = document.createElement("div");
		objImageDetails.setAttribute('id','imageDetails');
		objImageData.appendChild(objImageDetails);
	
		var objCaption = document.createElement("span");
		objCaption.setAttribute('id','caption');
		objImageDetails.appendChild(objCaption);
	
		var objNumberDisplay = document.createElement("span");
		objNumberDisplay.setAttribute('id','numberDisplay');
		objImageDetails.appendChild(objNumberDisplay);
		
		var objBottomNav = document.createElement("div");
		objBottomNav.setAttribute('id','bottomNav');
		objImageData.appendChild(objBottomNav);
	
		var objBottomNavCloseLink = document.createElement("a");
		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
		objBottomNavCloseLink.setAttribute('href','#');
		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
		objBottomNav.appendChild(objBottomNavCloseLink);
	
		var objBottomNavCloseImage = document.createElement("img");
		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
		
		var objOuterImageContainer = document.createElement("div");
		objOuterImageContainer.setAttribute('id','outerImageContainer');
		objLightbox.appendChild(objOuterImageContainer);

		// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
		// If animations are turned off, it will be hidden as to prevent a flicker of a
		// white 250 by 250 box.
		if(animate){
			Element.setWidth('outerImageContainer', 250);
			Element.setHeight('outerImageContainer', 250);			
		} else {
			Element.setWidth('outerImageContainer', 1);
			Element.setHeight('outerImageContainer', 1);			
		}

		var objImageContainer = document.createElement("div");
		objImageContainer.setAttribute('id','imageContainer');
		objOuterImageContainer.appendChild(objImageContainer);
	
		var objLightboxImage = document.createElement("img");
		objLightboxImage.setAttribute('id','lightboxImage');
		objImageContainer.appendChild(objLightboxImage);
		
		var objzoom = document.createElement("div");
		objzoom.setAttribute('id','carrezoom');
		objzoom.setAttribute('style','width:100;height:100;overflow:hidden;position:absolute;top:0;left:0');
		objImageContainer.appendChild(objzoom);
		
		var objzoomimg = document.createElement("img"); 
		objzoomimg.setAttribute('id','carrezoomimg');  
		objzoomimg.setAttribute('style','position:absolute');
		objzoomimg.setAttribute('src','produits/PC030016_edited.JPG');
		objzoom.appendChild(objzoomimg);
	
		var objHoverNav = document.createElement("div");
		objHoverNav.setAttribute('id','hoverNav');
		objImageContainer.appendChild(objHoverNav);
	
		var objPrevLink = document.createElement("a");
		objPrevLink.setAttribute('id','prevLink');
		objPrevLink.setAttribute('href','#');
		objHoverNav.appendChild(objPrevLink);
		
		var objNextLink = document.createElement("a");
		objNextLink.setAttribute('id','nextLink');
		objNextLink.setAttribute('href','#');
		objHoverNav.appendChild(objNextLink);
	
		var objLoading = document.createElement("div");
		objLoading.setAttribute('id','loading');
		objImageContainer.appendChild(objLoading);
	
		var objLoadingLink = document.createElement("a");
		objLoadingLink.setAttribute('id','loadingLink');
		objLoadingLink.setAttribute('href','#');
		objLoadingLink.onclick = function() { myLightbox.end(); return false; }
		objLoading.appendChild(objLoadingLink);
	
		var objLoadingImage = document.createElement("img");
		objLoadingImage.setAttribute('src', fileLoadingImage);
		objLoadingLink.appendChild(objLoadingImage);

par rapport à l'original, j'ai juste ajouté les deux objets carrezoom et carrezoomimg.

quant au second script, je l'ai modifié pour qu'il donne ceci :

var zoom, largeur, hauteur,carre;
function reglages(){

//-- Facteur de zoom ---
zoom=3;
//-- Taille de l'image initiale --
largeur=620;
hauteur=826;
//-- taille du carré de la loupe EN PIXELS--
carre=100;

//------------------------------------------
document.getElementById("lightboxImage").width=largeur;
document.getElementById("lightboxImage").height=hauteur;
document.getElementById("carrezoom").style.width=carre;
document.getElementById("carrezoom").style.height=carre;
document.getElementById("carrezoomimg").height=zoom*hauteur;
document.getElementById("carrezoomimg").width=zoom*largeur;
}
function document_onmousemove(event) 
{
var ie = false; /*@cc_on ie = true; @*/
if (ie) {
         x=event.x+document.body.scrollLeft;
         y=event.y+document.body.scrollTop;
             }
else    {
x=event.pageX;
         y=event.pageY;
             }
document.getElementById("carrezoom").style.left=x-(carre/2);
document.getElementById("carrezoom").style.top=y-(carre/2);
document.getElementById("carrezoomimg").style.top=(-(y)*zoom)+(carre/2);
document.getElementById("carrezoomimg").style.left=(-(x)*zoom)+(carre/2);
}

voilà, et malheureusement, malgré tout ceci, rien ne fonctionne, mon deuxième script ne semble même pas s'initialiser (pas de div "carrezoom" sous la souris, alors qu'avec webdevelopper et l'outil "entourer l'élément survolé", il est affiché où que je sois avec la souris.)


alors comme je ne m'y connais pas du tout en javascript, je me dis que j'ai certainnement fait quelque chose de mal, mais je ne vois pas quoi, pouvez-vous m'aider ?



Merci beaucoup à tous !
Modifié par disklad (20 Jan 2008 - 17:58)