Placeholdit JQuery Plugin

A jquery plugin for easily adding FPO images to your html.

How to use it

Once you've included it in your html, calling on it is straight forward.

$('img').placeholdit();

Parameters

You can customise a lot of different things with the placeholdit plugin with the following parameters, just note not all services being used support each of the parameters.

• type (str) - which service you want to use for FPO images.
  • placeholdit (default)
  • kitten
  • lorempixel
  • flair
• format (str) - what filetype of image you want returned.
  • .gif ( default )
  • .jpg, .jpeg
  • .png
• text (str) - the text to appear over the image.
• backgroundcolor (hex str) - the color of the background of the image coming in if it's a flat color. Also used if you want the image returned in black & white by passing '000000'. Default value is 'cccccc'.
• textColor (hex str) - color of the text in the image. Default value is '969696'.
• width (num) - width of image. Default is 200 pixels.
• height (num) - height of the image. If left empty, defaults to same value as width.
• overwriteSRC (bool) - tells plugin to ignore the src attribute of the image tag and overwirte with the FPO image. Default value is false.
• overrideProperties (bool) - by default, if the img element has width or height set either as attributes or in css, then it will use those measurements. This can make it so those settings are overridden when requesting the FPO image. Default value is false.
• tag (str) - for services that support the ability to pull images with a certain theme, this allows you to set that theme. Default value is empty string.
• callback (function) - the function that will be called when plugin has completed.

Use case

A simple use for the placeholdit plugin is replacing all broken images so you can spot them easily during devolopment. Simply use this code.

var errorReplacement = {
			overwriteSRC: true,
			backgroundColor: 'ff0000',
			textColor: 'ffffff',
			text: '! no img found !'
		}
		
$('img').error(function(){
	$(this).placeholdit(errorReplacement);
});

More Info

To see it in action, click here.

###License

MIT http://rem.mit-license.org