Lightbox2: Cambiar "cerrar" de sitio

[MisatoKatsuragi]

Hola, no tengo muy calro si este post iria aqui o en CSS, pero como he tocado bastante el css y no he sido capaz, he supuesto que seria cosa del javascript...

al grano

estoy intentando poner el boton de cerrar arriba en vez de abajo, como suele estar en cualquier ventana de windows, pero no veo la forma de moverlo hasta alli, porque no veo la forma de sacar ese elemento del div en que etsa metido.

alguien ha probado a moverlo de sitio??? gracias

[David]

Si le dcas posición absoluta (con la hoja de estilos) probablemente podrás colocarlo donde quiras. Coloca un enlace al lightbox que de tantos clones/semejantes que hay no sé a cuál te refieres exactamente.

[MisatoKatsuragi]

Es este:
uvedobleuvedobleuvedolbe.lokeshdhakar.com/projects/lightbox2/

las imagenes se añaden de forma dimamica (php) para crear una galeria.
Probé a ponerle un "position:absolute" pero me lo colocó de forma tan absoluta que lo ponia fuera de la imagen en una posicion fija, no se si me explico, no "seguia" a la imagen, si no que siempre quedaba en el mismo lugar de la pantalla.

Gracias por tu colaboracion David

[David]

Prueba cambiando en el archivo lightbox.js las líneas 134 a 162 por estas:

Código Javascript:

objBody.appendChild(Builder.node('div',{id:'lightbox'}, [
            Builder.node('div', {id:'imageDataContainer'},
                Builder.node('div',{id:'imageData'}, [
                    Builder.node('div',{id:'imageDetails'}, [
                        Builder.node('span',{id:'caption'}),
                        Builder.node('span',{id:'numberDisplay'})
                    ]),
                    Builder.node('div',{id:'bottomNav'},
                        Builder.node('a',{id:'bottomNavClose', href: '#' },
                            Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage })
                        )
                    )
                ])
            ),
            Builder.node('div',{id:'outerImageContainer'}, 
                Builder.node('div',{id:'imageContainer'}, [
                    Builder.node('img',{id:'lightboxImage'}), 
                    Builder.node('div',{id:'hoverNav'}, [
                        Builder.node('a',{id:'prevLink', href: '#' }),
                        Builder.node('a',{id:'nextLink', href: '#' })
                    ]),
                    Builder.node('div',{id:'loading'}, 
                        Builder.node('a',{id:'loadingLink', href: '#' }, 
                            Builder.node('img', {src: LightboxOptions.fileLoadingImage})
                        )
                    )
                ])
            )
        ]));
 

[MisatoKatsuragi]

Gracias, pero...no se donde ponerlo

en las lineas 134 a 162 tengo esto:

Código:

	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

// -----------------------------------------------------------------------------------

//
//	Extending built-in Array object
//	- array.removeDuplicates()
//	- array.empty()

y lo mas parecido a lo que me mandas es esto:

Código:

		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(); return false; }
		objBody.appendChild(objOverlay);
		
		var objLightbox = document.createElement("div");
		objLightbox.setAttribute('id','lightbox');
		objLightbox.style.display = 'none';
		objBody.appendChild(objLightbox);
	
		var objOuterImageContainer = document.createElement("div");
		objOuterImageContainer.setAttribute('id','outerImageContainer');
		objLightbox.appendChild(objOuterImageContainer);

		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 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);

		var objImageDataContainer = document.createElement("div");
		objImageDataContainer.setAttribute('id','imageDataContainer');
		objImageDataContainer.className = 'clearfix';
		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);

es lo segundo lo que hay que sustituir, no? he probado a mover de sitio donde dice "objBottomNav " a encima de donde esta el "objOuterImageContainer" pero lo unico que consigo es que deje de funcionar y me abra las fotos en la pestaña nueva...

gracias

[David]

mmm... ¿de dónde descargaste el archivo lighbox.js?

Yo lo descargué de:
http://www.lokeshdhakar.com/projects/lightbox2/js/lightbox.js

O también, desde el mismo .zip que hay en la página.

[MisatoKatsuragi]

Joder, es verdad, me lie :S ese era el primero que me habia bajado, lo siento
creo que lo baje de aqui
hachetetepe://huddletogether.com/projects/lightbox2/

aunque tampoco estoy segura (tengo un poco de kaos por aqui)
se supone que es el mismo pero con la posibilidad de quie las imagenes mas grandes que el explorador de turno se adaptan al tamaño