Greybox Redux

Posted on by

Another popular DOM/CSS/Javascript project popped up today: Greybox. It’s a lot like the popular lightbox, but is used to display web sites on top of your current page.

I saw this as another great opportunity to demonstrate how easy it is to make great code with jQuery. I modified greybox in two phases.

  1. First step was to make greybox work unobtrusively (they embeded javascript into the page to make it work) and to fix the broken back-button (you’d have to hit back twice after visiting a site).
  2. The next step was to completely overhaul the library itself and remove the need for Amir’s personal Javascript library – leaving it to run completely using jQuery. The resulting code is only about 1.2kb (compared to the original 12kb of the original).

A demo and a download are available if you’re interested in seeing some more examples of how jQuery works in a practical application. Enjoy!

83 thoughts on “Greybox Redux

  1. Greetings! Today
    completely changed system and all links which were in bookmarks were lost. Including the link on
    jquery.com ! 6 hours searched for a site on the Internet also has just now found through http://google.com/
    X-rum, I can not find your number ICQ write to me please!!!

  2. I am displaying flash videos in a Greybox Redux and am using “the updated greybox.js file here: http://swampfoot.googlepages.com/greybox.js” from above…

    I have a problem that I need someone’s help on…

    When I close the modal window the flash video keeps playing even though it is no longer visible…

    However if I use another modal script called “videoBox” it does not have that problem.

    Any suggestions?

  3. Bernd on said:

    Hello,

    I like the “Greybox Redux”. But I miss the fullscreen feature, which is a feature of the original Greybox implementation.
    So I tried to implement it by myself. What do you think about it?

    — greybox_old.js 2006-02-11 04:30:52.000000000 +0100
    +++ greybox.js 2008-03-25 12:21:20.000000000 +0100
    @@ -5,13 +5,20 @@
    * License: LGPL (read more in LGPL.txt)
    */

    +var WinHeight = self.innerHeight ||
    + jQuery.boxModel && document.documentElement.clientHeight ||
    + document.body.clientHeight || 440;
    +var WinWidth = self.innerWidth ||
    + jQuery.boxModel && document.documentElement.clientWidth ||
    + document.body.clientWidth || 440;
    +
    var GB_DONE = false;
    -var GB_HEIGHT = 400;
    -var GB_WIDTH = 400;
    +var GB_HEIGHT = Math.round(WinHeight – (WinHeight/100)*10);
    +var GB_WIDTH = Math.round(WinWidth – (WinWidth/100)*10);

    function GB_show(caption, url, height, width) {
    – GB_HEIGHT = height || 400;
    – GB_WIDTH = width || 400;
    + GB_HEIGHT = height || GB_HEIGHT;
    + GB_WIDTH = width || GB_WIDTH;
    if(!GB_DONE) {
    $(document.body)
    .append(“”

    ~Bernd

  4. BOS on said:

    Hi all, I’m relatively new to jQuery and am trying to learn as much as i can.

    I have written a function called GetComments() and which does a $.get() to retrieve the data entered in the greybox window.

    what is the best way to get a function to be called after the greybox window is closed?

    I modified the greybox.js as follows:

    function GB_hide() {
    $(“#GB_window,#GB_overlay”).hide();
    GetComments(); //

  5. Rob Q on said:

    Tom Zellman box position fix for scrolled pages appears not to work with FF 3 release. I’d love to use this.

  6. Rob Q on said:

    One other thing – if you wanted to auto close the pop up from within the iframe (say after a form submission) without having to click out or click the close button, how would that be done?

  7. a same question as Rob Q, how can I close greybox via a function? for example, after I login in greybox, I want to close it without click the mouse, what shall I do?

  8. Does anyone know how to get the Close bar to display on the bottom of the window instead of on the top?

  9. Rob Q and ranfrow – if you redirect your script to another page with this code in when you successfully enter your form (or whatever) the window will close and the user will be redirected to the page you want them to go to:

    $(document).ready(function(){
    top.location.href=”http://www.yourpagehere.com”;
    }

    Obviously you need to include jQuery as well. I guess you could do this in an onload too, but inline javascript is evil innit?

    Hope this helps :)

  10. I added a little bit so you can load your url via ajax instead of in an iframe if you want:

    in greybox.js change:

    $(“#GB_window”).append(“”);

    to

    if (GB_AJAX)
    {
    $(“#GB_window”).append(“”);
    $.get(url,function(html){
    $(‘#GB_frame’).html(html);
    });
    } else {
    $(“#GB_window”).append(“”);
    }

    before calling GB_Show set GB_AJAX to true or false to determine ajax load into div or iframe load respectively.

    (hopefully the formatting will remain readable!)

  11. bah, it stripped out my divs :( try again

    change:

    $(“#GB_window”).append(““);

    to

    if (GB_AJAX)
    {
    $(“#GB_window”).append(“”);
    $.get(url,function(html){
    $(‘#GB_frame’).html(html);
    });
    } else {
    $(“#GB_window”).append(““);
    }

    (remove the underscores where appropriate)

  12. shahid on said:

    Hi,
    I am new with jquery. i am calling greybox on exit of a text box field. its working fine but i want to access that field value in grey box window. its not passing its parent page html input boxes values on grey box window. with its old version it was working fine but that version is not working with IE 7. plz anybody help me… Thanks

  13. There seems to be a real hardcore-bug in safari 3 (3.2.1 Leopard).
    If you load a page with several greybox-links all of them work fine. But as soon as you reload the page via the reloadbutton there is a bug: Every link points to the same site also the script is working right in all other browser and the url-variable is set new every time, too.

    Any ideas on that one?

  14. Raf F on said:

    Suggestion:
    Added to the click modifier so that the width and height can be provided in a ‘rel’ tag. For example, link would be:

    <a href=”someurl” class=”greybox” rel=”500,300″>Text</a>

    $(document).ready(function(){
    $(“a.greybox”).click(function(){
    var t = this.title || this.innerHTML || this.href;

    var r = this.rel.split(“,”); // width and height in a rel=”” tag

    GB_show(t,this.href,r[1],r[0]);
    return false;
    });
    });

  15. Dalibor Sojic on said:

    When I am at the bottom of the page and call greybox, it show at the top of the page… so I have to scroll to top.

    Can it show “relative” on current view?

  16. I’d like to suggest the following snippet to “fade-out” the window. I’m suggesting this approach simply because sometimes users click outside the window – which causes the greybox to close in some browsers.

    This in turn creates an experience where the end-user thinks something is broken or seeks to find what they think is the missing window.

    By fading out, they are provided a distinct visual clue that their action has simply caused the window to close.

    var GB_FADEOUT = 1000;

    function GB_hide() {
    // ** original code
    // $(“#GB_window,#GB_overlay”).hide();

    $(‘#GB_overlay’).fadeOut(GB_FADEOUT, function(){
    $(“#GB_overlay”).hide();
    });

    $(‘#GB_window’).fadeOut(GB_FADEOUT, function(){
    $(“#GB_window”).hide();
    });

    return false;
    }

  17. I’m an idiot …

    function GB_hide() {
    if(GB_ANIMATION)
    $(“#GB_window,#GB_overlay”).hide(“slow”);
    else
    $(“#GB_window,#GB_overlay”).hide();
    }

    … apologies for the previous cruft.

  18. Here’s a slightly improved animated “hide” that slides back up (just as the animated presentation slides down) and then fades the overlay.

    It also takes care of some issues I found with IE where #GB_frame persisted despite the parent’s going away:

    function GB_hide() {
    if(GB_ANIMATION) {
    $(“#GB_window”).slideUp(“slow”, function(){
    $(“#GB_frame”).remove(); // remove the iframe
    $(“#GB_window”).remove(); // remove the window containing the iframe
    $(‘#GB_overlay’).fadeOut(“slow”, function(){
    $(“#GB_overlay”).remove(); // remove the overlay containing the window containing the iframe
    });
    GB_DONE = false; // reset everythign;
    });
    } else
    $(“#GB_window,#GB_overlay”).hide();

    }

  19. Perfect.

    This is how it should be done.

    – No design code on JS, only on CSS.
    – VERY small and clean code.
    – Only 1 or 2 images required.

    Amazing job. Thanks!

  20. Hi, I’ve got a problem with updated version by tom – http://swampfoot.googlepages.com/greybox.js > this works well only in IE (6,7,8). In Firefox, Chrome, Opera, Safari it does´t work almost at all and the greybox is not shown correctly. I´m afraid I´m not able to do that job .. so please, could anyone help?

  21. Done ;) … last line of GB_position():
    $(“#GB_overlay”).css({height:h+”px”,top:dsoctop+”px”, width:w+”px”});

  22. Hello,

    I really like the greybox project but I have a problem when I combine it with jquery sortable table (Ajax). When I put the link to the greybox layer in the sortable table, I have problems after the event that triggers the Ajax code (here: onmouseup). The table refreshes himself and as a result the greybox links works as a normal link (html comes in new page). Very strange…

    Please check it out at http://www.aquawebdesign.com/greybox.php. You will understand what I mean.

    Can you please help me? I am already trying to solve this for weeks.

    Thanks a lot in advance.

  23. Hello,
    Have used the greybox.js plugin successfully, but trying to get rid of the grey border of the GB_Window..
    Any suggestions on it?

  24. John on said:

    If you want to hide horizontal scroolbar in FF3, just add this lines in CSS:

    body {overflow-x: hidden;}

    (this is for Tom Zellman greybox modification)

    Cheers!