Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Kinda Simple? CSS lightbox problem

    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:
    Code:
    /* 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:
    Code:
    // 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 =)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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 =)

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I haven't tested this but it might be as simple as using the original script and just change this
    Code:
    // Assigning click events in elements to close overlay
    			$('#jquery-overlay,#jquery-lightbox').click(function() {
    				_finish();									
    			});
    to this
    Code:
    // Assigning click events in elements to close overlay
    			$('#jquery-overlay').click(function() {
    				_finish();									
    			});
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    May 2009
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    			// 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
    Code:
    			// 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
    Code:
    		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
    Code:
    		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.
    Attached Files Attached Files
    Last edited by _Aerospace_Eng_; 05-31-2009 at 10:20 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    May 2009
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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
    Code:
    // 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.
    Code:
    _resize_container_image_box(objImagePreloader.width + 500,objImagePreloader.height)
    Attached Files Attached Files
    Last edited by sionice; 05-31-2009 at 11:18 AM.

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You didn't change what I told you too. You have this
    Code:
    $('#jquery-overlay').click(function() {
    				_finish();									
    			});
    in the recent changes I have thsi
    Code:
    $('#jquery-lightbox').click(function() {
    				_finish();									
    			});
    Last edited by _Aerospace_Eng_; 05-31-2009 at 11:20 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    sionice (05-31-2009)

  • #9
    New Coder
    Join Date
    May 2009
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    You didn't change what I told you too. You have this
    Code:
    $('#jquery-overlay').click(function() {
    				_finish();									
    			});
    in the recent changes I have thsi
    Code:
    $('#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!
    Code:
    // 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. =)

  • #10
    New Coder
    Join Date
    May 2009
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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
    Code:
    $('#lightbox-container-image-data-box').click(function() {
    	return false;
    });
    event and does nothing. I'm assuming I simply have my HTML structured poorly.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New Coder
    Join Date
    May 2009
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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
    Code:
    <input type="file">
    inside my lightbox that doesn't work, because this function
    Code:
    $('#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
    Code:
    <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.

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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 are getting paid to do a job, don't ask for help on it!||||

  • #14
    New Coder
    Join Date
    May 2009
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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

    Code:
    $('#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.

  • #15
    New Coder
    Join Date
    May 2009
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I want to be able to do something like
    Code:
    $('#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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •