Content-Aware Box

by laustdeleuran

HTML

<!DOCTYPE html>
<!--[if lt IE 7 ]><html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="da" lang="da" class="ie6"><![endif]-->
<!--[if IE 7 ]><html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="da" lang="da" class="ie7"><![endif]-->
<!--[if IE 8 ]><html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="da" lang="da" class="ie8"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="da" lang="da">
<!--<![endif]-->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Aber er de nye superhelte - Film | www.b.dk</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="node-id" content="15796913" />
  <meta name="panel-id" content="20" />
  <meta name="robots" content="index,follow" />
  <meta property="og:type" content="article" />
  <meta property="og:site_name" content="www.b.dk" />
  <meta property="og:url" content="http://www.b.dk/film/aber-er-de-nye-superhelte" />
  <meta property="og:title" content="Aber er de nye superhelte" />
  <meta property="og:description" content="Instruktøren Rupert Wyatt er så god til at instruere chimpanser, at han tippes til at blive en af fremtidens store gorillaer i Hollywood." />
  <meta property="og:image" content="http://b.bimg.dk/node-images/382/4/580x362-c/4382042-abe-film-billed.jpg" />
  <meta name="description" content="Instruktøren Rupert Wyatt er så god til at instruere chimpanser, at han tippes til at blive en af fremtidens store gorillaer i Hollywood. - Film, b.dk" />
  <meta name="keywords" content="Abernes planet: Oprindelsen, Filmanmeldelser, Film" />
  <link rel="shortcut icon" href="http://www.b.dk/sites/www.b.dk/favicon.ico" type="image/x-icon" />
  <meta name="robots" content="noarchive" />
  <meta name="googlebot" content="noodp" />
  <meta name="rating"...

JavaScript

// Content-Aware Box by @laustdeleuran
(function($) {
  // Open without objects passed
  $.contentAwareBox = function(options) {
    
    // Private methods and variables
    var cab = {
      settings:{
        ajaxFilter: 'body',
        animation: 'slide', // slide | fade | none,
        animDuration: 300,
        bgcolor:'#fff',
        easing: 'swing',
        emptyOnHide: false,
        height:400,
        identifier: 'contentAwareBox',
        position: {
          top: 'auto',
          right: 0,
          bottom: 20,
          left: 'auto'
        },
        trigger: { // Exact coordinates ({in:{x:X,y:Y},out:{x:X,y:Y}}) || jQuery object identifier
          start:{
            x: 0,
            y: 20
          },
          out:{
            x: Infinity,
            y: 300
          }
        },
        source: false, // jQuery object identifier || URL - if provided with link objects, value will fall back to href value
        type: false, // iframe | inline | ajax
        width:400,
        zIndex:10000
      },
      init:function(settings){
        var outerBox = $('<div class="'+settings.identifier+' outer '+settings.type+'" />').css({'position':'fixed','overflow':'hidden','display':'none','z-index':settings.zIndex}).appendTo(document.body),
        innerBox = $('<div class="'+settings.identifier+' inner '+settings.type+'" />').appendTo(outerBox),
        boxCss = {};
        
        // Setup styles
        if (settings.bgcolor) $.extend(boxCss,{'background-color':settings.bgcolor});
        if (settings.width) $.extend(boxCss,{'width':settings.width});
        if (settings.height) $.extend(boxCss,{'height':settings.height});
        if (settings.position) $.extend(boxCss,settings.position);
        outerBox.css(boxCss);
        
        // Prepare animation variables
        settings.animSd = 'right';
        settings.animSmallest = Infinity;
        settings.animCss = {'display':'block'};
        settings.animProps = {};
        for (var key in...