lightbox v2.0

[vineet]

hi everyone

i m using lightbox 2.0 and i want to shift close button from bottom position to top right corner of the image.

www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

how can i do it

vineet

[jscheuer1]

In lightbox.js find (around line 298):


var objImageDataContainer = document.createElement("div");
objImageDataContainer.setAttribute('id','imageDataContainer');
objLightbox.appendChild(objImageDataContainer);


move it to here (around line 244):


Link)/.test(clickObj)) {
myLightbox.end();
}
};
objBody.appendChild(objLightbox);

var objImageDataContainer = document.createElement("div");
objImageDataContainer.setAttribute('id','imageDataContainer');
objLightbox.appendChild(objImageDataContainer);

var objOuterImageContainer = document.createElement("div");
objOuterImageContainer.setAtt

In the lightbox css, you will want to change things to suit for the imageData stuff, but one pretty much given is for the:


#imageData #bottomNavClose{ width: 66px; float: right; padding-top: 0.7em; }

changing the padding-bottom to padding-top, as shown.

One other thing you may want to do in lightbox.js is to disable the animation, it doesn't look as good with that section on the top (starting around line 60):


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

//
// Configuration
//
var fileLoadingImage = "file://localhost/C:/webwork2/test/lightbox203/images/loading.gif";
var fileBottomNavCloseImage = "file://localhost/C:/webwork2/test/lightbox203/images/closelabel.gif";

var overlayOpacity = 0.8; // controls transparency of shadow overlay

var animate = true; // toggles resizing animations
var resizeSpeed = 7; // controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable

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

Set it to false;

[vineet]

thanks. your solution worked for me.

but if i change the animation to false then the script doesnt work and the image doesnt loads. so i m keeping it to true.

vineet

[vineet]

thanks. your solution worked for me.

but if i change the animation to false then the script doesnt work and the image doesnt loads. so i m keeping it to true.

vineet

[jscheuer1]

Works here with false. Be sure to enter the information correctly, it should look like so:


var animate = false; // toggles resizing animations