fullscreener

fullscreener copied to clipboard

#jQuery Fullscreener#

Demos

##How to use?##

1. Include the plugin files and jQuery library into your document:

   <link rel="stylesheet" href="jquery.fullscreener.css" />
   <script src="jquery-1.10.2.min.js"></script>
   <script src="jquery.fullscreener.min.js"></script>
   

2. Write your html:

   <div class="fullscreen">
   	<img src="image.jpg" width="1920" height="1200" alt="" />
   </div>
   

   Note: Always set attributes for width and height of the image.

3. Run the plugin:

   <script>
   
   	(function($){
   
   		$(document).ready(function(){
   
   			$('.fullscreen img').fullscreener();
   
   		});
   
   	})(jQuery);
   
   </script>
   

##Options##

####useCSS####

Background size will not be used for modern browsers.

• default: true
• options: true or false
• type: Boolean

###container###

Container that will be used when the image is resized.

• default: 'parent'
• options: 'parent' or jQuery Object(e.g. $(window))
• type: String or jQuery Object

###position###

This parameter controls the position of the image on the X and Y axis.

• default: { x: 'center', y: 'center' }
• options: { x: 'left, center, right', y: 'top, center, bottom' }
• type: Object

###throttleTimeout###

Controls how often performs resizing the image in case of window.resize or window.orientationchange.

• default: 100
• type: Number

##Methods##

###resize###

Manually resize the image.

$('.fullscreen img').fullscreener('resize');

###destroy###

Destroys plugin for this image.

$('.fullscreen img').fullscreener('destroy');