any idea how i would change the size of the lightbox?
i want it to be bigger to display my work better
//Image Lightbox
function startOverlay(overlayLink, title, date, id, overlay) {
//Adds the overlay layer plus the container layer, which will contain the image and text
if(overlay != 0){
$("body").append('<div class="overlay"><span class="close"></span></div><div class="container"></div>')
} else {
$("body").append('<div class="container"></div>')
}
//Animates the transparent black sheet covering the screen
$(".overlay").animate({"opacity":"0.85"}, 450, "linear");
//Puts the image, title and date into the .container depending on browser type
if($.browser.msie){
$(".container").html('<img src="'+overlayLink+'" alt="" /><div><p>'+title+'<br /><span>'+date+'</span></p></div>');
} else {
$(".container").html('<span class="nav navLeft"></span><span class="nav navRight"></span><img src="'+overlayLink+'" alt="" /><div class="caption"><p>'+title+'<br /><span>'+date+'</span></p></div>');
}
//Alows for the removal of the lightbox.
window.removeOverlay(id);
//Position the image accordingly.
$(".container img").load(function() {
var imgWidth = $(".container img").width() + 2; //Plus 2 for the border
var imgHeight = $(".container img").height() + 2; //Plus 2 for the border
$(".container").css({
"top": "50%",
"left": "50%",
"width": imgWidth,
"height": imgHeight,
"margin-top": -(imgHeight/2),
"margin-left":-(imgWidth/2) //Position the image in the middle of the screen.
}).animate({"opacity":"1"}, 550, "linear", function(){
$(".overlay").css({"background-image": "none"});
});
//Make necessary changes for IE
if($.browser.msie){
$(".overlay").css({"height": "150%"});
$(".container div").css({"padding-left": "6px"});
$(".container").css({"height": imgHeight + 50});
}
//Show the actual image and hide stuff
$(".container div").fadeTo(2000, 1).fadeTo(1000, .001); //Hide the comment after a while.
//Hover over the comment above.
$(".container div").hover(
function(){
$(this).fadeTo(300, 1).dequeue();
},
function(){
$(this).fadeTo(300, .001).dequeue();
}
);
//Hover Over Nav Links
$("span.nav").hover(
function(){
$(this).fadeTo(200, 1).dequeue();
},
function(){
$(this).fadeTo(200, .001).dequeue();
//SWF Lightbox
function startOverlaySWF(overlayLink, title, date, widthpop, heightpop) {
var imgWidth = widthpop; //Plus 2 for the border
var imgHeight = heightpop; //Plus 2 for the border
//Adds the overlay layer plus the container layer, which will contain the image and text
$("body")
.append('<div class="overlay"></div><div class="container"></div>');
//Animates the transparent black sheet covering the screen
$(".overlay").animate({"opacity":"0.85"}, 450, "linear");
//Puts the image, title and date into the .container
$(".container").html('<div><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" id="Flash" width="'+imgWidth+'" height="'+imgHeight+'"> <param name="allowScriptAccess" value="sameDomain"><param name="movie" value="'+overlayLink+'"><param name="quality" value="high"><embed src="'+overlayLink+'" quality="high" width='+imgWidth+' height='+imgHeight+' name="Flash" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></object></div><div id="titles"><p>'+title+'<span>'+date+'</span></p></div>');
//Alows for the removal of the lightbox.
window.removeOverlay();
//Position the image accordingly.
$(".container").css({
"top": "50%",
"left": "50%",
"width": imgWidth,
"height": imgHeight,
"margin-top": -(imgHeight/2),
"margin-left":-(imgWidth/2) //Position the image in the middle of the screen.
}).animate({"opacity":"1"}, 550, "linear", function(){
$(".overlay").css({"background-image": "none"});
}); //Show the actual image.
$(".container div#titles").fadeTo(2000, 1).fadeTo(1000, .001); //Hide the comment after a while.
$(".container div#titles").hover(
function(){
$(".container div#titles").fadeTo(300, 1).dequeue();
},
function(){
$(".container div#titles").fadeTo(300, .001).dequeue();
}
); //Hover over the comment above.
}
//Remove Lightbox
function removeOverlay(id) {
// When the user clicks on the overlay, the lightbox goes away.
$(".overlay, .container img").click(function(){
$(".container, .overlay").animate({"opacity":"0"}, 250, "linear", function(){
$(".container, .overlay").remove();
});
});
//Click Next or Previous
$("span.navRight").click(function(){
var nextPiece = $("#piece_"+id).next("div").children("a.lightbox");
if(nextPiece.attr("href") === undefined){
$(".container, .overlay").animate({"opacity":"0"}, 250, "linear", function(){
$(".container, .overlay").remove();
});
} else {
overlayLink = nextPiece.attr("href"); //Show What's in the link
title = nextPiece.attr("title"); //Grab the title
string = nextPiece.next(".info").text(); //Get the parent div's p which contains the date
elements = string.split("+br");
$(".container").fadeTo(400, 0, function(){
$(this).remove();
window.startOverlay(overlayLink, title, elements[0], elements[3], 0); //Execute the lightbox
})
}
})
$("span.navLeft").click(function(){
var nextPiece = $("#piece_"+id).prev("div").children("a.lightbox");
if(nextPiece.attr("href") === undefined){
$(".container, .overlay").animate({"opacity":"0"}, 250, "linear", function(){
$(".container, .overlay").remove();
});
} else {
overlayLink = nextPiece.attr("href"); //Show What's in the link
title = nextPiece.attr("title"); //Grab the title
string = nextPiece.next(".info").text(); //Get the parent div's p which contains the date
elements = string.split("+br");
$(".container").fadeTo(400, 0, function(){
$(this).remove();
window.startOverlay(overlayLink, title, elements[0], elements[3], 0); //Execute the lightbox
})
}
})
