Really friggin' simple jQuery lightbox

lightbox.js

$(function() {
    var $blanket = $('#blanket'),
        $close = $('#lightboxClose');

    if ($blanket.size() === 0)
    {
        $blanket = $('<div />', {id: 'blanket'}).css({
            'position': 'fixed',
            'left': '0',
            'top': '0',
            'width': $(document).width() + 'px',
            'height': $(document).height() + 'px',
            'display': 'none'});
            
        $('body').append($blanket);
    }
    
    if ($close.size() === 0)
    {
        $close = $('<div />', {id: 'lightboxClose', 'class': 'png'});
    }

    $(document).delegate('a[rel="lightbox"]', 'click', function() {
        var href = this.href,
            id = href.substring(href.lastIndexOf('#')),
            $div = $(id);
            
        if ($div.size() > 0)
        {
            $blanket.fadeTo(1000, 0.9);
            $div.appendTo('body').fadeIn(600).css({
                'position': 'fixed',
                'left': '50%',
                'top': '50%',
                'margin-left': (($div.width() / 2) * -1) + 'px',
                'margin-top': (($div.height() / 2) * -1) + 'px'
            });
            
            $close.appendTo($div).one('click', function() {
                $blanket.fadeOut(600);
                $div.fadeOut(600);
                $blanket.unbind('click');
            });
            
            $blanket.one('click', function() {
                $blanket.fadeOut(600);
                $div.fadeOut(600);
                $close.unbind('click');
            });
        }
        
        return false;
    });
});

usage.html

<a href="#yourID" rel="lightbox">Link</a>
<div id="yourID">
    <!--- content -->
</div>

+1

This is actually pretty inefficient code. There's plenty that could be done outside of the click handler.

Heh, probably, haven't tried it out. Wrote up an issue to move to a light box recently though. By the way, dunno if it'd be the kind of thing that you'd use, but you should look up mustache templates, specifically Icanhaz.js, it's a pretty slick idea for js templating.

…

--- Cell: 585 519 7658

<> On Jul 29, 2012, at 10:04 PM, Ryan ***@***.*** wrote: This is actually pretty inefficient code. There's plenty that could be done outside of the click handler. --- Reply to this email directly or view it on GitHub: https://gist.github.com/3091587

Yeah, I've done a little with Mustache. The thing that probably intrigues me the most is the fact that I could use the same templating engine on the client side (JS) and on the server side (PHP). I've still mostly stuck with Smarty, but I'd like to give Mustache another look.

Also, I've added another, slightly more efficient version of this lightbox.

Yeah, I'm not totally sold on the performance of Mustache JS templating with IcanHaz, it seemed to be a little unperformant when I started using it recently, though I was trying to do some silly stuff with flickr galleries with it as well, so it might not be the template engine's fault. I do like the clean nature of Mustache templates for php ( https://github.com/bobthecow/mustache.php ). Both because they have a javascript compatible syntax (unlike smarty), and because they limit what can be done with templates, which prevents ugly ugly complicated logic from seeping into the logic and keeps it in the php scripts, which is better. I'll check out the lightbox.

On Tue, Jul 31, 2012 at 9:24 AM, Ryan Kinal < ***@***.*** > wrote: Yeah, I've done a little with Mustache. The thing that probably intrigues me the most is the fact that I could use the same templating engine on the client side (JS) and on the server side (PHP). I've still mostly stuck with Smarty, but I'd like to give Mustache another look. Also, I've added another, slightly more efficient version of this lightbox. --- Reply to this email directly or view it on GitHub: https://gist.github.com/3091587

## +++++++++++++++++++++++++++ BitLucid.com http://bitlucid.com/ - BitLucid, Inc. - Web & Programming Consultants ninjawars.net - My webgame project github.com/tchalvak/ninjawars - My open source projects dnaexmosn.deviantart.com - Art Gallery 585-519-7658 - Cell "Never compare your inside with somebody's outside."

Is there a place that you're using this lightbox live that I can use as a demo?

On Tue, Jul 31, 2012 at 10:05 AM, Roy Ronalds ***@***.***: Yeah, I'm not totally sold on the performance of Mustache JS templating with IcanHaz, it seemed to be a little unperformant when I started using it recently, though I was trying to do some silly stuff with flickr galleries with it as well, so it might not be the template engine's fault. I do like the clean nature of Mustache templates for php ( https://github.com/bobthecow/mustache.php ). Both because they have a javascript compatible syntax (unlike smarty), and because they limit what can be done with templates, which prevents ugly ugly complicated logic from seeping into the logic and keeps it in the php scripts, which is better. I'll check out the lightbox. On Tue, Jul 31, 2012 at 9:24 AM, Ryan Kinal < ***@***.*** > wrote: > > Yeah, I've done a little with Mustache. The thing that probably intrigues > me the most is the fact that I could use the same templating engine on the > client side (JS) and on the server side (PHP). I've still mostly stuck with > Smarty, but I'd like to give Mustache another look. > > Also, I've added another, slightly more efficient version of this > lightbox. > --- > > Reply to this email directly or view it on GitHub: > https://gist.github.com/3091587 ## +++++++++++++++++++++++++++ BitLucid.com http://bitlucid.com/ - BitLucid, Inc. - Web & Programming Consultants ninjawars.net - My webgame project github.com/tchalvak/ninjawars - My open source projects dnaexmosn.deviantart.com - Art Gallery 585-519-7658 - Cell "Never compare your inside with somebody's outside."

## +++++++++++++++++++++++++++ BitLucid.com http://bitlucid.com/ - BitLucid, Inc. - Web & Programming Consultants ninjawars.net - My webgame project github.com/tchalvak/ninjawars - My open source projects dnaexmosn.deviantart.com - Art Gallery 585-519-7658 - Cell "Never compare your inside with somebody's outside."

http://www.mckissock.com/real-estate/florida/default.aspx

"Request a FREE Info Kit" or "Watch the Video"

Ah, coo.

On Tue, Jul 31, 2012 at 6:02 PM, Ryan Kinal < ***@***.*** > wrote: http://www.mckissock.com/real-estate/florida/default.aspx "Request a FREE Info Kit" or "Watch the Video" --- Reply to this email directly or view it on GitHub: https://gist.github.com/3091587

## +++++++++++++++++++++++++++ BitLucid.com http://bitlucid.com/ - BitLucid, Inc. - Web & Programming Consultants ninjawars.net - My webgame project github.com/tchalvak/ninjawars - My open source projects dnaexmosn.deviantart.com - Art Gallery 585-519-7658 - Cell "Never compare your inside with somebody's outside."

By the way, I'm trying out mustache templates in php, and while they really really simplify the templates, I wouldn't really recommend going in that direction on any substantial project where anyone other than yourself is going to work with the templates. Complicates things more than necessary, I think.