Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
41 lines (21 sloc) 1.65 KB

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)  


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.


Minified & Gzipped this plugin is just 745 bytes.

Demo please?

Sure… here you go.