Lightbox zoom to center

Draggable box with child elements that fire a lightbox from its positon to the center of the screen

by uttara

HTML

<div id="container" class="clickOut">
            
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            
        </div>

CSS

html, body        {margin:0; padding:0; font:0.9em/1.1em "Arial", sans-serif}
    body            {margin:50px}

    #container        {position:relative; width:510px; height:510px; border:1px solid red}
        .box        {float:left; width:100px; height:100px; border:1px solid blue}
        .newBox        {position:absolute; width:100px; height:100px; background:green}

JavaScript

var bodyWidth = $(window).width();
var bodyHeight = $(window).height();
var dragging = false;
$("#container").draggable({
    containment: "window",
    start: function() {
        dragging = true;
        $(this).addClass('dragged')
    },
    stop: function() {
        dragging = false;
        $(this).removeClass('dragged')
    }
});

$('.box').mouseup(function() {
    if (!dragging) {
        //If there is already a new box present, remove it
        if ($('.newBox').length) {
            $('.newBox').remove();
        }

        //Get the offset of THIS box we just clicked
        var thisOffset = getOffset(this)

        //Get its left & top value
        var newBoxLeft = thisOffset.left;
        var newBoxTop = thisOffset.top;

        //Full size box will be 75% width & height of viewport
        var newBoxFinalWidth = bodyWidth * 0.75;
        var newBoxFinalHeight = bodyHeight * 0.75;

        //Full size box will be positioned center/center on the screen
        var newBoxDestLeft = (bodyWidth - newBoxFinalWidth) / 2;
        var newBoxDestTop = (bodyHeight - newBoxFinalHeight) / 2;

        //Create our new box
        var newBox = '<div class="newBox clickOut"></div>'

        //Add it to the DOM
        $('body').append(newBox);

        //Position it to overlay the box we just clicked
        $('.newBox').css({
            'left': newBoxLeft,
            'top': newBoxTop
        })

        //Animate it from the orig box position to its final width/height & left/top
        $('.newBox').delay(100).animate({
            'width': newBoxFinalWidth,
            'height': newBoxFinalHeight,
            'left': newBoxDestLeft,
            'top': newBoxDestTop
        }, 2000, 'easeOutExpo')
    }
})

//Clickout function
$(document).click(function(e) { /*if parent of this click is NOT clickout AND this click is NOT clickout then hide stuff*/
    if ($(e.target).parents().is('.clickOut') == false && $(e.target).is('.clickOut') == false) {
       ...