Home

This plugin utilizes the service http://placehold.it/ to quickly generate FPO images in your HTML.

You can place img elements in your code completely empty like this:

<img />

Or with width and height attributes set:

<img width="200" height="300" />

Then call the plugin on those elements and it will respect the width and height attributes if they are present. Also, if width is present, but height is not, then it will generate a square image with dimensions width x width. And if the width or height is set in CSS, it is respected as well.

$('img').placeholdit();

The plugin also allows you to control some of the properties of the image and how the plugin acts:

• format [string] - the image type being returned. It supports .gif (the default), .jpg, .jpeg and .png.

• text [string] - change the copy that appears over the image. The default is the dimensions.

• backgroundColor [string] - the background color of the image. The default value is 'cccccc' (notice no hashtag in front).

• textColor [string] - the color of the copy on the image. The default value is '969696' (notice no hashtag in front).

• width [int] - width of the image. The default is 200 pixels wide. Of course, if the img element has the width attribute, it will be respected unless specified.

• height [int] - height of the image. The default value is 200 pixels high. If you pass width and not height, then height will inherit its value from width. Of course, if the img element has the height attribute, it will be respected unless specified.

• overwriteSRC [bool] - if the img element has the src attribute already set, then by default that image is passed over. But if this were set to false, then the plugin would overwrite the src value with its own.

• overrideProperties [bool] - by default if an img element has width and height attributes set, they are respected, but if this property were set to true then they would be overwritten by the plugin.

Here is another example where the plugin gets passed several properties as well as adding the click event to the image.

$('img').placeholdit({
   text: "new copy",
   backgroundColor: "e8117f",
   textColot: "fff",
   width: 500,
   height: 100
}).click(function(e){
   alert("YOU CLICKED THE IMAGE!");
});

For v 0.3, I've added a new kitten feature using the new Place Kitten service. You can now get FPO images with kittens in them in either color or black and white.

$('img').placeholdit({
   type: 'kitten'
});

//or for black and white photos
$('img').placeholdit({
   type: 'kitten',
   backgroundColor: '000'
});

For v 0.4 I've added a new flickr feature using the flickholdr service. You can not get FPO images from flickr in either color or black and white, and you can narrow down the content by using tags.

//color
$('img').placeholdit({
	type:'flickr',
	tags:'dog,yard'
});
//or black & white
$('img').placeholdit({
	width: 450,
	height: 200,
	type:'flickr',
	backgroundColor:'000',
	tags:'dog,grass'
});