buckwilson / lightbox_me Goto Github PK

Tested on your demo http://buckwilson.me/lightboxme/ - doesn't work

Use keydown instead of keypress

Fix here yury/Lightbox_me@a91d7dd5907a6323115dd30fce587f718ea72110

If both the page and the iframe are in the same domain, you should be able to open the lightbox_me window in the parent from inside the iframe.

For example...

$( window.parent.document.getElementById('dvdsmpns-lightbox') ).lightbox_me();

...called within an iframe should result in the lightbox and "blanket" overlay being displayed in the main window.

I've just updated plugin to the latest version and closeSelector doesn't kick in. I have two buttons for closing and none of them is working. I can only close modals by clicking outside the window or hitting ESC key.

1st time no problem. if reload the page, ' Uncaught TypeError: Object [object Object] has no method 'lightbox_me' ' error occurs. What to do?

How do you use to open ovelay only one image and not all with the same class ? I don't want specify a id because it must be dynamic.

Example:
<script>
$(function() {$("img.thumbs").click(function() { $("img.full").lightbox_me({centered: true }); return false; }); });
</script>

<img class="thumb" src="thumbs_123465.jpg"/>
<img class="full" style="display:none" src="full_123465.jpg"/>
<img class="thumb" src="thumbs_456789.jpg"/>
<img class="full" style="display:none" src="456789.jpg"/>

This could be user error, but when I pass a fixed height to overlayCSS (600px in my case), my $(window).height() &lt; $(document).height() evaluates false, and after setting the CSS, it is reset to 100%. I fixed it by updating line 160 to the following:

if(opts.overlayCSS.hasOwnProperty('height') == false){
    $overlay.css({height: '100%'});
}

I'd love to hear if this was an error on my part.

It would be very useful if closeLightbox() was made public, so that if you needed to close the lightbox through some elements that were not initially exposed - either because the DOM element didn't exist when the lightbox was created, or was generated through an AJAX request, it could be done with a simple function call.

it doesn't show gray background when lightobox_me is activated.

tried also on the official demo on home page, it doesn't work anyway.

No issues with Firefox.

This is more of an enhancement request than an "issue" and is definitely not anything critical.

The script to switch the positioning from fixed to absolute in the case that the modal is taller than the browser window works pretty nice, with one problem: when this happens, it's possible to scroll the lightbox completely out of view (up or down) the page.

It would be very slick if there were a way to keep the lightbox in the view and constrain the scrolling to just the area needed to view the complete lightbox. This would solve potential usability issues where a user might lose the lightbox on a really long page.

I'm working on a couple ways to do this, but wanted to get the issue in there in case someone else might have thoughts on how to get it done.

The plug-in crashed on one of the client's machine using IE 8.

Line: 157( version 2.0 )/182( version 2.2 )
Error: Not implemented

After some debugging I was able to trace that the jquery script was detecting the browser version incorrectly. Apparently there is a known bug in IE 7 and 8 where the user agent string provides the wrong version and jquery uses this to detect the version.

The lightbox scripts uses the jquery's browser object to detect if the borwser is IE 6 which eventually causes the error.

ie6 = ($.browser.msie &amp;&amp; $.browser.version < 7 );

As a workaround I have added this extra check which ensures that the browser is IE 6.

ie6 = ($.browser.msie &amp;&amp; $.browser.version < 7 && (typeof window['XMLHttpRequest'] != "object"));

Please reply if there is a better solution available.

Regards,

Gurnam Madan.

See the bug on the image, this happens when

the content of the popup is bigger that the screen and the page content

Fix:

    function setOverlayHeight() { 

            if ($(window).height() < $(document).height()) {
                $overlay.css({height: $(document).height() + 'px'});
                 $iframe.css({height: $(document).height() + 'px'}); 
            } else {
                var heightNotContent=$self.closest(".mediaLightBox").height() +$self.closest(".mediaLightBox").height()*0.2; 
                if ($(window).height() > heightNotContent)                  
                    $overlay.css({height: '100%'});
                else
                    $overlay.css({height: heightNotContent});
                if (ie6) {
                    $('html,body').css('height','100%');
                    $iframe.css('height', '100%');
                } // ie6 hack for height: 100%; TODO: handle this in IE7
            }
        }

When lightbox_me is loaded with onClick event and Retina.JS is running on the page. Images that are dynamically set do not render. It appears that the lightbox_me doesn't load JS

I am light boxing some flot graphs with lightbox_me, it works fine for the initial load of the graphs however when i close the light box the original graph is destroyed. How do I resolve that issue.

I wrote a very simple test and I can't seem to get closeClick to work. I'm not sure if it's a bug or if I'm not doing something properly, but this code works the same in the latest release versions of Safari, Chrome, and Firefox—that is, the lightbox closes when you click the overlay despite the option being set to false.

<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.lightbox_me.js"></script>
<script type="text/javascript">
var $test = $('<div style="height: 200px; width: 300px; background-color: white;">');
$test.text("This is a test");
$test.lightbox_me({
        closeEsc:false,
        closeClick:false
      });
</script>
</body>
</html>

Of course, I included the lightbox_me file in the same directory.

Is it the case that we should be able to run multiple instances simultaneously?

I have a situation where I use lightbox_me on a div, say Div1 - so far so good. The lightbox and close button functionality both work fine.

Inside of that div, Div1, that is now modal, is a button that launches another div, say Div2, using lightbox_me also. So, there is the first modal window, Div1, and now the modal window, Div2, over that.

Both lightbox_me functions on both divs work fine independently, but when I call them in succession like this, the topmost one, Div2, will close, but the original one, Div 1, will not. I can interact with other elements in this div, but the close element and clicking the overlay to close are both unresponsive.

So, I have not posted any code here because it is a pretty big project and I am not asking for it to be solved here, I am just asking if it is theoretically fine to run them concurrently. Are there clashes with namespaces or variables or anything that make this problematic?

I use lightbox_me to show 'share' popup, and it works wrong in IE 9. The DOM element used to popup is within the iframe. So when lightbox_me is activated, the popup is moved to outside the screen.

After much hair-pulling I have determined that html5 doctype breaks lightbox_me in ie (versions 7-9). All other browsers seem to work fine. Its hard to adequately debug the issue in ie, but $self.outerWidth() is a crazy large number and the positioning fails completely. Is this a known problem with html5?

closed. my mistake, sorry.

I was unit testing my javascripts and got an error saying that "overlay[0].removeModal is not a function" and I traced it down to this code block:

if ($overlay.length > 0) {
    $overlay[0].removeModal = removeModal; // I added this binding
    $overlay[0].removeModal(); // if the overlay exists, then a modal probably exists. Ditch it!
 } else {
   $overlay =  $('<div class="' + opts.classPrefix + '_overlay" style="display:none;"/>'); // otherwise just create an all new overlay. 
 } 

It looks like you bind removeModal to overlay[0] somewhere lower in the code so that it raises an exception if you call it before. I'm not sure if that's actually the issue or if I'm doing something wrong in my tests, I fixed it by adding the binding earlier but if I'm mistaken I'd appreciate anyone who could point out what I'm misunderstanding. Thanks.

The Issue #17 is not fixed. It's better to fix this by moving the events binding logic into a single method and called after the animation completed.

You can reproduce this easily by extending the default overlaySpeed larger than 1000ms.

Code sample:

            Line #74:  $self[opts.appearEffect](opts.lightboxSpeed, function() { setOverlayHeight(); setSelfPosition(); opts.onLoad(); bindEvents()});
            function bindEvents(){
                $(window).resize(setOverlayHeight)
                     .resize(setSelfPosition)
                     .scroll(setSelfPosition);

            $(window).bind('keyup.lightbox_me', observeKeyPress);

            if (opts.closeClick) {
                $overlay.click(function(e) { closeLightbox(); e.preventDefault; });
            }
            $self.delegate(opts.closeSelector, "click", function(e) {
                closeLightbox(); e.preventDefault();
            });
            $self.bind('close', closeLightbox);
            $self.bind('reposition', setSelfPosition);
        }

Hi

I have a couple of IE8 issues, which you can see on the demo page:
http://buckwilson.me/lightboxme/

1. a vertical scrollbar appears when it should not (you have to zoom out a long way on this page to hit this, but it's a real issue for me on a normal page without zooming)
2. escape is not causing a close

I fixed (1) on line 155 by deducing 4 from the height calculation.
$overlay.css({height: $(document).height()-4 + 'px'});
4px was the smallest value which resolved it, and I've not noticed anything bad on other browsers (latest mac ff, safari, chrome).

I fixed (2) by changing the bindings on line 93 and lines 133-136 to be to $self from $(window).

I don't know whether these fixes are 'right' but thought I would share.

By defualt closeSelector is set to '.close' and closeClick is set to true, but since I change closeClick to false, then closeSelector is not working.

Using the 2.3 version, I'm having an issue with the overlay not reaching the bottom the page, leaving a gap when the bottom of the bottom of the page is visible. The size of the gap varies with browser and is most noticeable in Google Chrome.

I've found that quickly double-clicking (i.e., clicking again after the lightbox has started to load) removes the background but not the lightbox itself.

Here is the code I'm using to show the lightboxes:

$('document').ready(function(){
    $('.lightbox_link').click(function(e){
        $('#' + $(this).attr('href')).lightbox_me();
        e.preventDefault();
    });
});

And here is the link:

<a id="admin" class="lightbox_link" href="lightbox_admin">Ask an Admin for Data</a>

I have a feeling that just making sure that the click-to-close listener on the background div isn't set until the lightbox is generated will fix this, but I'm not set up to do the fix myself right now.

Please message me if you need more details - I hope this helps, and thanks for doing Lightbox_me - it's super awesome!

Hello,

After I have closed a lighbox, and then click the link to reopen - or click on other links to open them. Lightbox overlay doesn't engage. Any ideas?

Hello,

First of all thanks for the great plugin. I'm encounteting a very weird issue with IE7 and was wondering if it is a know issue. We're usign lightbox to display a embedded youtube video which is inside of an iframe.
So like this: <lb_me><iframe></iframe></lb_me>

The issue is that after closing the lightbox, if I scrow the page with the mouse wheel the video shows up again in a random place. This is really weird as the element that contain the video is no longer in the DOM as I'm passing "destroyOnClose" as an option? Have you guys heardof this before?

You can see the issue for yourself here: www.adaptu.com . In IE7 Just click the green "Take a Toor" button on the right side, click to close the lightbox and scrow the page with the mouse wheel.

Any input about this would be very welcome.

Thx in advance,
Andre Batista

Hi there,

is there any way to position the box? I dont´t need it centered but about 150px more above and 50px more right.

Thanks in advance

Hey,

This is a fantastic modal box. Thank you for sharing it.
I'm trying to modal an image that's a little large and lightbox_me renders out the image too far to the left. Is there a way to control the left property in the same way {top: '40px'} is?

Looks like past overlays build up when lightboxes are closed.

I added the following code to the close function and it clears the last-created overlay:

$(".js_lb_overlay").last().remove();

Hi Mods,

Is there a solution for issue #53? It's closed without solution.

I hope to get solution from here or http://stackoverflow.com/questions/17036894/lightbox-me-issue-in-ie9

Thank you.

Hi all,i am in trouble,am using this plugin but when i close the lightbox , it crashes all links on my web site,im clickin on it and no event happen, until i reload the page they still not working, help me please to fix that issue,thanks!

Hi,

The lightbox which is working perfectly in most situations seems to only want to open below all page content in Firefox 3.5

In firebug, there is no positioning or top value being applied, but I can telly why. I've removed all other jquery plugins but still no luck.

If anyone has any ideas what could be amiss it'd be a great help.

Dev site is at:

http://accuracast.shotgunfront.com

Tim

If you turn closeEsc to false works on every browser but Firefox.

Tested on Firefox 3.6

You need to add in closeLightbox method an unbind to close trigger event

$self.unbind('close', closeLightbox);

Because after 2 call of 'lightboxme' you have trouble with to much call of close method

Just wondering if anyone has had any success with using Lightbox_me to open an external page (ajax, iframe, etc...)? I love using this plugin for images and on-page content, but I have run into the need to open external elements as well and was hoping to not have to switch to a more complex plugin like FancyBox or ColorBox.

Thank you,
Matt

turning off closeClick doesn't seem to be working

line 97 reads:
$overlay.click(function(e) { closeLightbox(); e.preventDefault; });

should this be:
if( opts.closeClick )
$overlay.click(function(e) { closeLightbox(); e.preventDefault; });

Lightbox fails to activate in IE7

When we upgraded from jQuery 1.7.1 to 1.8.2, our lightboxes stopped being centered. Instead, the left edge of the box is centered and the box shows to the right. The lightboxes get centered correctly up to v1.7.2, but not in v1.8.0-1.8.2.

Hi!

Well first of all I wanted to thank you for this wonderful unobstructive script.

I would like to know whether there is a way to prevent the lightbox from removing the browser scrollbar. The reason why I'm asking this is because when the script removes the browser scroll bar the content gets shifted to the left and I find it ugly from a UX perspective.

Is this something that can be accomplished?

Thanks!

I needed to run beforeClose check:

added this:
beforeClose: function() { return(true) ; },
to
$.fn.lightbox_me.defaults

and then amended the start of closeLIghtbox()
function closeLightbox() {
if( !opts.beforeClose() ) {
return(false) ;
} ;

when I create the lightbox, I can now have my 'warn user before losing changes' appearing, which looks like this:
beforeClose: function(e){ // 'are you sure' if cancelling and changes made
$('#dialog-close').focus(); // forces focus change, which means the 'change' event fires
if ( $('#dialog').data('changed') )
return( confirm( '<%= t(:are_you_sure) %>' ) )
else
return( true ) ;
}

Hey,

jQuery 1.9.0 removes $.browser support so currently this script does not work.

Just a note to everyone. If you want to use this script and don't care about IE6 then remove all the IE6 stuff.

I found this problem on accident so I'm sure a user will stumble onto the issue eventually.

I'm opening an overlay via a text link. If the overlay is clicked during the fade-in, the overlay itself will disappear, but the modal content that was positioned within the overlay remains visible. Clicking the "close" box in the overlay closes only the "close" box and leaves the rest of the modal content visible.

This is an internal beta project so I can't post a link, but I'll make a quick demo if needed. Just wanted to see if anyone else has noticed this. I can reproduce the issue on the Lightbox Me demo page, but the overlay has to be clicked at just the right moment.

Hi,

When I try to use the plugin it creates the overall and outputs the correct element to lightbox but its hidden behind the main page.

The lightboxed element has the highest z-index (1002) so I don't know why its not the foremost element.

If you want to see an example see here: http://help.felixfennell.co.uk/sample.php

Otherwise a fantastic plugin, thanks for sharing!

Felix

Lightbox does not correctly handle the scenario where a window is wide enough to have a horizontal scrollbar. The overlay is only as wide as the window's width, not as far as the user can scroll.

My lightbox works fine on all browsers except IE. I have tested in IE9 and I get

SCRIPT5: Access is denied. jquery.js?body=1, line 5928 character 2

I am using jQuery 1.8.0, and my code is as follows.

jQuery(function(){
$('.openLogin, #openLogin').click(function(e) {
e.preventDefault();
$('.loginLightboxForm').show();
$('.lightBoxWhite').lightbox_me({
centered: false,
modalCSS: {top: '80px'},
overlayCSS: {background: '#000000', opacity: .6},
onClose: function() {
$('.loginLightboxForm').hide()
}
});
});
});

closeClick: false doesn't seem to be working for some reason - has no affect, when I click on the overlay the lightboxed content still closes. Any thoughts?

I want the lightbox to close after submit, is their a function to close it?

Something like .lightbox_close() would be very useful!

I've encountered some instances where images appear off-center to the right. The left edge of the image sits in the center of the window. You can simulate the effect by setting the left margin of the div that contains the image to 0. This sometimes fixes itself once the image finishes loading and always fixes itself if you scroll the page (presumably when setSelfPosition() is called).

My shot-in-the-dark guess at what is happening is that the positioning of the div occurs before the image finishes loading and the width of the image might not yet be known. Is there a known way to get around this?

I've seen this in Chrome and Safari. Haven't tried other browsers.

Thanks.

I've just converted your code to MooTools. Feel free to add to the repository.
gist.github.com/618260

Hello, im using this plugin to load a .swf file, but im having some issue, everytime i click on it, it load perfectly, but if i close it (clicking outside the lb or presing Esc button) and open it again, it duplicate the content inside one above the other, loading 2 times the .swf file, im using jquery.flash.js plugin for the swf load, i really don't know what could be the problem, this is my code:

 $("#game1").click(function(){
 $("#game_lb_loaded").lightbox_me({
  centered: true,
  closeEsc: true,

  overlayCSS: {
      background: 'black',
      opacity: .8,
      width: 750,
      height: 600
  },
  onLoad: function() {
      $("#game_lb_loaded").flash({
     src: 'games/miniracing3d.swf',
      width: 750,
      height: 600
      });
   }
});

ill appreciate your help, and thanks for making this awesome plugin :)