article:
Cheat Sheet: Facebook Sizes and Dimensions
article:
jQuery Plugin: PageSlide

jQuery Plugin: Backstretch

Advertisement

a simple jQuery plugin that allows you to add a dynamically-resized background image to any page by Scott Robbin

Do you see the full-sized background image on this page? In a nutshell, that's what Backstretch does. It will stretch any image to fit the page, and will automatically resize as the window size changes.

Images are fetched after your page is loaded, so your users won't have to wait for the (often large) image to download before using your site.



Implement


preferably at the bottom of the page, before the closing BODY tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.backstretch.min.js"></script>

and

<script type="text/javascript">
  $.backstretch("/path/to/image.jpg", {speed: 150});
</script>

or - change the image after Backstretch has been loaded

<script type="text/javascript">
  $.backstretch("/path/to/image.jpg", {speed: 150});
  // Perhaps you'd like to change the image on a button click
  $(".button").click(function() {
      $.backstretch("/path/to/next_image.jpg");
  });
</script>


Options

- centeredX: the ratio of the width/height of the image doesn’t always jive with the width/height of the window. This parameter controls whether or not we center the image on the X axis to account for the discrepancy. (type=Boolean, default=true);
- centeredY: this parameter controls whether or not we center the image on the Y axis to account for the aforementioned discrepancy. (type=Boolean, default=true);
- speed: this is the speed at which the image will fade in, after downloading is complete. Integers are accepted, as well as standard jQuery speed strings (slow, normal, fast). (type=Integer, default=0);



Demo - Basic usage

/*
At its core, Backstretch is a one-line plugin.
Just pass in the path to an image, and you're done.
*/

  $.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");


Demo - Attach Backstretch to click events


/*
You can easily attach Backstretch to jQuery events, like click
Click the buttons above to see the background image change
*/
 
  $("#outside").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/outside.jpg');
  });

  $("#cheers").click(function(e) {
    e.preventDefault();
    $.backstretch('http://dl.dropbox.com/u/515046/www/cheers.jpg');
  });


Demo - Using Backstretch in a slideshow


/*
Backstretch does not support slideshows out of the box (yet)
But, it's fairly easy to set one up.
Here is an example of how to use Backstretch as a slideshow.
*/

  var images = [
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ];

  // A little script for preloading all of the images
  // It"s not necessary, but generally a good idea
  $(images).each(function(){
    $("<img/>")[0].src = this;
  });

  // The index variable will keep track of which image is currently showing
  var index = 0;

  // Call backstretch for the first time,
  // In this case, I"m settings speed of 500ms for a fadeIn effect between images.
  $.backstretch(images[index], {speed: 500});

  // Set an interval that increments the index and sets the new image
  // Note: The fadeIn speed set above will be inherited
  setInterval(function() {
    index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);




source
demo
github
download

Advertisement
Tags: backstretch, image, background, jquery, plugin, css, design, html, develop, internet, effect, resolution, size, layout

Leave a Comment

No Comment

© Creative3x Ltd.