...

View Full Version : Kinda Simple? CSS lightbox problem



sionice
05-31-2009, 10:47 AM
Hi there,

I'm not new to development, though am definitely new to web development. I have an issue with a lightbox I'm adding to a website. It's a jquery lightbox.

I'm setting it up to only close when you click anywhere outside of the lightbox, and it's half working. It closes when clicking above or below the picture that opens, but does nothing when clicking to the left or right of it.

Here's my CSS:


/* This is the opaque, transparent background */
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
/* This is the actual lightbox */
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
line-height: 0;
}


In the javascript, I have the following after my HTML is appended:


// Style overlay and show it
$('#jquery-overlay').css({
backgroundColor: settings.overlayBgColor,
opacity: settings.overlayOpacity,
width: arrPageSizes[0], // see below - XScroll from top fnct
height: arrPageSizes[1] // see below - YScroll from top fnct
}).fadeIn();

// Calculate top and left offset for the jquery-lightbox div object and show it
$('#jquery-lightbox').css({
top: arrPageScroll[1] + (arrPageSizes[3] / 10),
left: arrPageScroll[0],
// arrPageScroll[0] - see below - from lower post/function
// arrPageScroll[1] - see below - from lower post/function
}).show();

// part of a function where it makes that array
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
// all but Explorer Mac
} else if (document.body.scrollHeight > document.body.offsetHeight){
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
// Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

// The place where the scroll values are set
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}


I think that's all of it. Any help you're able to provide would be much appreciated. I've nearly figured everything else out. =P

Thanks =)

_Aerospace_Eng_
05-31-2009, 10:53 AM
Looks like you haven't posted all of the code. If possible post a link to your site. This would be the easiest way to determine how to help you. Also tell us where you got the jquery lightbox script as its easier to modify the original than one you hacked up.

sionice
05-31-2009, 10:57 AM
The site is most definitely not live at the moment, but I can at least show you where I got the lightbox plugin from.

http://leandrovieira.com/projects/jquery/lightbox/

Hopefully that will help a little bit, though I'm thinking the problem has something to do with the Width variable in the #jquery-lightbox

If I change that to something like '0', then any click around the lightbox closes it. Unfortunately, changing it to zero also shifts the entire thing to the far left of my screen instead of popping up in the middle =)

_Aerospace_Eng_
05-31-2009, 11:01 AM
I haven't tested this but it might be as simple as using the original script and just change this

// Assigning click events in elements to close overlay
$('#jquery-overlay,#jquery-lightbox').click(function() {
_finish();
});

to this

// Assigning click events in elements to close overlay
$('#jquery-overlay').click(function() {
_finish();
});

sionice
05-31-2009, 11:03 AM
I'll say that I really appreciate the rapid feedback. That, though I've already changed so that it should only handle the click event on the overlay, rather than the lightbox. (I've added some inputs and buttons into the lightbox that people need to be able to click on).

It just seems like it 'thinks' the lightbox extends further than it actually does to the left and the right of the actual border.

edit: the overlay does properly appear completely surrounding the lightbox though. Just in case you were wondering. =P

_Aerospace_Eng_
05-31-2009, 11:17 AM
I've tested some changes and I have what appears to work, revert back to the original script, make a backup of your current one if you like. Change this

// Assigning click events in elements to close overlay
$('#jquery-overlay,#jquery-lightbox').click(function() {
_finish();
});
// Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects
$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
_finish();
return false;
});

to this

// Assigning click events in elements to close overlay
$('#jquery-lightbox').click(function() {
_finish();
});
$('#lightbox-container-image-data-box').click(function()
{
return false;
});
// Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects
$('#lightbox-loading-link').click(function() {
_finish();
return false;
});
Then change this

function _set_interface() {
// Apply the HTML markup into body tag
$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');

to this

function _set_interface() {
// Apply the HTML markup into body tag
$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"></div></div></div></div>');

Basically I just removed the close button. I've made so clicking any where in the description area, does nothing but clicking on the overlay makes lightbox go away. I'm attaching the modified js file of the original.

sionice
05-31-2009, 12:03 PM
Unfortunately, I went ahead and made those changes you posted with no avail. Yes, when I revert back to the original files and simply load an image it seems to work so I screwed something up along the way. I'm really curious what since I'm trying to learn how all this ties together, though I suppose tomorrow I'll diff the two files and see if I can add things slowly to figure out where I went wrong.

In case you wanted to see a more original version of the file, there's nothing in these files I can't post, so here the are.

edit:
I noticed that this was missing from my .js file, so I added it. Nada. =P


// Make the descript area do nothing by using return false
$('#lightbox-container-image-data-box').click(function() {
return false;
});


edit #2:
Also a point of note, I've taken out my *gasps* static size addition to this following line, and that's not doing it.


_resize_container_image_box(objImagePreloader.width + 500,objImagePreloader.height)

_Aerospace_Eng_
05-31-2009, 12:18 PM
You didn't change what I told you too. You have this

$('#jquery-overlay').click(function() {
_finish();
});
in the recent changes I have thsi

$('#jquery-lightbox').click(function() {
_finish();
});

sionice
05-31-2009, 12:33 PM
You didn't change what I told you too. You have this

$('#jquery-overlay').click(function() {
_finish();
});
in the recent changes I have thsi

$('#jquery-lightbox').click(function() {
_finish();
});

Wowowowowow....ok, so NOW I made that change you mentioned, and it actually reversed the problem. I couldn't click below the image, though I could click to the left/right.

So using a little common logic, I wrote this!


// Assigning click events in elements to close overlay
$('#jquery-lightbox,#jquery-overlay').click(function() {
_finish();
});


I'm really wanting to know now why this works though, because it doesn't make sense to me. Though I have verified that I can definitely still use the controls inside of my lightbox without it closing.

So one last question then is this. Why does this work, because it looks like I'm setting it up to close whether you click on the lightbox or the overlay.

Regardless, I can't thank you enough for your help. If I could hug you I would. =)

sionice
05-31-2009, 01:29 PM
I have a new problem now, though I know exactly what it is, just not quite how to solve it. So, now I have my lightbox correctly linking to the click event for the right places so that it knows where to close. BUT...my other objects...file inputs, radio buttons, etc are nested under that in the HTML as well. So as a result, right now when I click on my <input type="file"...> object, it links to the


$('#lightbox-container-image-data-box').click(function() {
return false;
});

event and does nothing. I'm assuming I simply have my HTML structured poorly.

_Aerospace_Eng_
05-31-2009, 08:36 PM
Try removing that line. With the original script and then my changes, I had no problems clicking to the left, right, top, or bottom. They all worked fine.

sionice
05-31-2009, 09:06 PM
Try removing that line. With the original script and then my changes, I had no problems clicking to the left, right, top, or bottom. They all worked fine.

No, that's not it. I have no problem clicking left/right/top/bottom outside the lightbox on the overlay. All that works fine and it closes like it should. The problem is that, for example, I have an


<input type="file">

inside my lightbox that doesn't work, because this function


$('#lightbox-container-image-data-box').click(function() {
return false;
});

now processes the click event and doesn't allow the file menu (to choose a file) to open. It's because in the appended html, my objects exist somewhere under a


<div id="lightbox-container-image-data-box">


tag. I know that's the problem, though am simply not sure of the best way to fix it.

_Aerospace_Eng_
05-31-2009, 09:30 PM
Right which is why I said remove that line. Basically its just returning false when you click on anything in that box. What happens when you remove that line?

sionice
05-31-2009, 10:07 PM
Right which is why I said remove that line. Basically its just returning false when you click on anything in that box. What happens when you remove that line?

If you remove that line, then it closes on every click inside my lightbox. Whether it's an <input> or not because then it (I assume) falls back to the



$('#jquery-lightbox,#jquery-overlay').click(function() {
_finish();
});


and since we re-added jquery-lightbox to that code, it takes every click on the lightbox and closes the window. :(

sionice
05-31-2009, 10:32 PM
I want to be able to do something like


$('#lightbox-fields').click(function() {
clickedInput = true;
});

// Make the descript area do nothing by using return false
$('#lightbox-container-image-data-box').click(function() {
if (clickedInput==false)
return false;
});

// Assigning click events in elements to close overlay
$('#jquery-lightbox,#jquery-overlay').click(function() {
if(clickedInput==false)
_finish();
});

But I don't quite have that working yet. That almost does it, though once again breaks my clicking for outside the lightbox itself.

sionice
05-31-2009, 10:42 PM
Ok, I got it working with this!


$('#lightbox-fields').click(function() {
clickedInput = true;
});

// Make the descript area do nothing by using return false
$('#lightbox-container-image-data-box').click(function() {
if (clickedInput==false)
{
return false;
}
});

// Assigning click events in elements to close overlay
$('#jquery-lightbox,#jquery-overlay').click(function() {
if(clickedInput==false)
{
_finish();
}
else
clickedInput = false;
});


Thank you once again for all your help. You've really been great. =)

khattab_012
12-17-2010, 01:55 PM
thanks a lot for this useful thread; it helped me a lot customizing my own lightbox gallery.

Thanks sionice, and special thanks to _Aerospace_Eng_ :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum