jquery.pikit

Generate placement image for your website through many different placeholder services.

Getting Started

Pikit works by inserting an image into a container that you have already created. For this example, we are going to insert a placeholder image into each of the child divs of the .pikit-container:

<div class="pikit-container">
  <div></div>
  <div></div>
  <div></div>
</div>

.pikit-container div {
  height: 200px;
  width: 200px;
}

$(".pikit-container").children().pikit()

This will result in the following:

<div class="pikit-container">
  <div style="height: 200px; width: 200px;"><img class="pikit" src="http://placedog.com/200/200"></div>
  <div style="height: 200px; width: 200px;"><img class="pikit" src="http://placebox.es/200/200"></div>
  <div style="height: 200px; width: 200px;"><img class="pikit" src="http://dummyimages.com/200x200"></div>
</div>

Note that the image will receive the same height/width dimensions as its parent container. It will also insert those dimensions directly into the parent containers inline style, the reasoning for this is in case you set a specific or random height then you will want the parent to be adjusted as well.

Another thing to note is that when no options are passed to pikit then it will use a random placeholder service by default.

Pikit Options

All of these are the default options.

$(".pikit-container").children().pikit({
  service: 'random',

  // Formatting
  height: null,
  width: null,
  format: null,
  sizeKeyword: null,

  // Colors
  greyscale: false,
  backColor: null,
  foreColor: null,

  // Customize
  customText: null,

  // Specify
  category: null,
  variant: null
})

Services