jQuery: fullscreenImage plugin

it's a simple little plugin but it does what it's supposed to in just 745 bytes when minified & gzipped.

What is this?

Just a simple plugin that makes any image you have a fullscreen background image without breaking the aspect ratio of your image.

How to?

To use simply create a container with an image inside then pass this container into the fullscreenimage() jquery plugin.

What options are there?

• you can define the maxUpscale ratio, in doing so you can trigger when the raster will start appearing to hide some of those nasty upscaling effects.

• set your own path to a custom raster image. the demo folder contains a simple 8 bit png with a black 2px by 2px raster image but a different colour may work better for your images

• turn the raster overlay off entirely by setting 'showRaster' to false.

• easily set the vertical anchor point of the enlargement.

   maxUpscale: 1 (upscale ratio, eg: 1.5 would upscale the image to 150%, then use the rasterImg overlay)  
   
   rasterImg: '/static/img/raster.png' (a 2px raster that neatly disguises the bad effects of image upscaling)  
   
   showRaster: true | false (easily disable the raster all together)  
   
   vAlign: 'center' | 'top' | 'bottom' (set the anchor point of the image's vertical axis)  
  

Compatibility

This little plugin has been tested in Internet Explorer 6+, Opera 10.6, Firefox 3.6+, Google Chrome & Safari 5, if you notice any bugs please let me know.

Size

Minified & Gzipped this plugin is just 745 bytes.

Demo please?

Sure… here you go.