tvler/thathalfdropimagegridfromtheroyaltenenbaums.js

Repeat an HTML element's background image in a centered half-drop pattern, like that thing from that movie

That Half-Drop Image Grid From
The Royal Tenenbaums
. JavaScript

###Download (minified)

View webpage, more samples

A brand-new JavaScript file for repeating an HTML element's background image in a centered half-drop pattern, like that thing (1, 2, 3) from that movie. Each pattern is customizable through JSON data attributes, with properties based off CSS naming standards.

3 Ways To Use

1. HTML + inline URL

<figure
  data-halfdrop = 'wes1.jpg'
></figure>

2. HTML + CSS URL

figure {
  background: url('wes1.jpg')
}

<figure
  data-halfdrop
></figure>

3. HTML + JSON

<figure
  data-halfdrop = '{
    "src"      : "wes1.jpg",
    "width"    : "20%",
    "maxWidth" : 200
  }'
></figure>

Default values

_halfdrop.defaultValues = {
  "src"       : "",
  // String of the image's URL
  // (If not given, CSS URL will be used)

  "snap"      : false,
  // Changes width of image to create a whole number of columns, only respecting one min/max property

  "minWidth"  : 0,
  "maxWidth"  : "100%",
  "width"     : 0,
  "minHeight" : 0,
  "maxHeight" : "100%",
  "height"    : 0
  // Can be a number or string ending in 'px' or '%'
}

##2 Steps To Run

1. Link the javascript file

<script src="ThatHalfDropImageGridFromTheRoyalTenenbaums.js"></script>

This creates the object _halfdrop

2. Set an event to update the background

_halfdrop.update()
// When a data-halfdrop element resizes, it's background needs to update

Example hook

window.onresize =
  _halfdrop.update;

##Settings

1. Add or remove data-halfdrop elements

_halfdrop.init()
// Run this function after an element is added or removed

2. Change default values

_halfdrop.defaultValues
// The exposed object's properties can be modified, which may reduce overall markup in some situations
// If it's modified after DOMContentLoaded, run _halfdrop.init()