Skip to content

Instantly share code, notes, and snippets.

@chrisvanpatten

chrisvanpatten/jquery.fullscreenr.js

Created December 22, 2011 20:54
Show Gist options
  • Save chrisvanpatten/1511820 to your computer and use it in GitHub Desktop.
Save chrisvanpatten/1511820 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chrisvanpatten revised this gist Apr 1, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion sample.html
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@
    <title>jQuery Fullscreenr Sample</title>
    <script type="text/javascript" src="jquery.fullscreenr.js"></script>
    <script type="text/javascript">
    $('#imageid img').fullscreenr({width: 1229, height: 768});
    $('#imageid').fullscreenr({width: 1229, height: 768});
    </script>
    </head>
    <body>
  2. chrisvanpatten created this gist Dec 22, 2011.
    45 changes: 45 additions & 0 deletions jquery.fullscreenr.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    /**
    * Fullscreenr - lightweight full screen background jquery plugin
    * By Jan Schneiders
    * www.nanotux.com
    *
    * Modifications by Chris Van Patten
    * http://www.vanpattenmedia.com
    * Version 1.5
    **/

    (function($){

    $.fn.fullscreenr = function(options) {
    var defaults = { width: 1280, height: 1024 };
    var options = $.extend({}, defaults, options);

    return this.each(function () {
    $(this).fullscreenrResizer(options);
    })
    }

    $.fn.fullscreenrResizer = function(options) {
    // Set bg size
    var ratio = options.height / options.width;

    // Get browser window size
    var browserwidth = $(window).width() + 80;
    var browserheight = $(window).height();

    // Scale the image
    if ((browserheight/browserwidth) > ratio){
    $(this).height(browserheight);
    $(this).width(browserheight / ratio);
    } else {
    $(this).width(browserwidth);
    $(this).height(browserwidth * ratio);
    }

    // Center the image
    // $(this).css('left', (browserwidth - $(this).width())/2);
    // $(this).css('top', (browserheight - $(this).height())/2);
    return this;
    }

    })( jQuery );
    19 changes: 19 additions & 0 deletions sample.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>jQuery Fullscreenr Sample</title>
    <script type="text/javascript" src="jquery.fullscreenr.js"></script>
    <script type="text/javascript">
    $('#imageid img').fullscreenr({width: 1229, height: 768});
    </script>
    </head>
    <body>
    <header>
    <h1>jQuery Fullscreenr Sample</h1>
    </header>
    <section>
    <img src="images/image.jpg" alt="Just a test" id="imageid">
    </section>
    </body>
    </html>