Examples

Default Configuration

The simplest way to use zoomable.js is to call the plugin on any jQuery selector:

                
                  <img src="image.jpg">

                
                  $(document).ready(function() {
                    $('img').zoomable();
                  });

Custom Options

Custom options can be supplied to change the default appearance:

                
                  <img src="image.jpg" class="custom">

                
                  $(document).ready(function() {
                    $('img.custom').zoomable({
                      padding: '60px',
                      bgcolor: 'hsl(0, 1%, 36%)',
                      opacity: 0.9,
                      speed:   800,
                      border:  '7px solid #000',
                      radius:  '3px',
                      shadow:  '0 0 23px #000',
                      context: false
                    });
                  });

Callback Functions

Two callback functions are exposed—one for when the image is show, and another for when it is dismissed:

                
                  <img src="image.jpg">

                
                  $(document).ready(function() {
                    $('img').zoomable({
                      onshow:  function() { alert('image shown') },
                      onhide:  function() { alert('image hidden') },
                    });
                  });

Filling the Browser

To make an image fill the entire browser window, set the fill attribute to true:

                
                  <img src="image.jpg">

                
                  $(document).ready(function() {
                    $('img').zoomable({
                      fill: true
                    });
                  });

Alternate Full Sized Image

An alternate full sized image can be specified by providing a fullsize attribute on the <img> element:

                
                  <img src="image.jpg" fullsize="image_full.jpg">

Documentation

Appearance Options

Property	CSS Type	Description
`bgcolor`	color	Background color around the full image
`blur`	pixels	Blur applied to elements behind the full image
`border`	border	Border size of the full image
`context`	boolean	If the context menu should be allowed for the full image
`padding`	pixels	Minimum padding between the full image and the browser window
`fill`	boolean	If the full image should fill the browser window or not
`radius`	pixels	Border radius of the full image
`shadow`	box-shadow	Shadow behind the full image
`speed`	integer	Speed of CSS fade transitions

Callback Functions

Property	Type	Description
`onshow`	function	Called when the full image is shown
`onhide`	function	Called when the full image is dismissed