Skip to content

vvasilev-/fullscreener

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#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');