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

<figure
  data-halfdrop = "wes1.jpg"
></figure>
      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.

Available On Github, Built By Tyler

View More Samples

3 Ways To Use

1HTML + Inline URL

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

2HTML + CSS URL

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

<figure
  data-halfdrop
></figure>

3HTML + JSON

<figure
  data-halfdrop = '{
    "src"      : "wes1.jpg",
    "width"    : "20%",
    "maxWidth" : 200
  }'
></figure>
Default values
"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

1Link The Javascript File

<script src="ThatHalfDropImageGridFromTheRoyalTenenbaums.js"></script>
This creates the object_halfdrop

2Set 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

1Add Or Remove data-halfdrop Elements

_halfdrop.init()

Run this function after an element is added or removed

2Change Dafault 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()