jQuery Anystretch
Anystretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page or block level element.
The image will stretch to fit the page/element, and will automatically resize as the window size changes.
Demo
An example is provided within this package. To see it in action go to: http://wearyoubelong.com
Options
positionX
This parameter controls how we position the image on the X axis. (type=String, options=left|center|right, default=center)
positionY
This parameter controls how we position the image on the Y axis. (type=String, options=top|center|bottom, default=center)
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)
elPosition (only when not used on the body)
This is the css position given to the containing element when used on anything except the body. (type=String, default=relative)
dataName
The name of the data attribute that Anystretch will use for the image name, if none is supplied in the src. (type=String, default=stretch)
Setup
Include the jQuery library and Anystretch plugin files in your webpage (preferably at the bottom of the page, before the closing BODY tag):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/jquery.anystretch.min.js"></script> Note: The example above uses the Google hosted version of jQuery; there is also a jQuery source file included with this distribution, if you would like to host it yourself.
<script type="text/javascript"> $.anystretch("/path/to/image.jpg", {speed: 150}); </script> Want to change the image after Anystretch has been loaded? No problem, just call it again!
<script type="text/javascript"> $.anystretch("/path/to/image.jpg", {speed: 150}); // Perhaps you'd like to change the image on a button click $(".button").click(function() { $.anystretch("/path/to/next_image.jpg"); }); </script> If you require Anystretch to work on one or more elements inside the page, rather than the page itself, simply call it on the element:
<script type="text/javascript"> $('#myDiv').anystretch("/path/to/image.jpg", {speed: 150}); </script> As of Version 1.2, Anystretch can also determine the image to use, via a data attribute. By default, Anystretch will use data-stretch although this can be changed by setting the dataName in the settings.
<script type="text/javascript"> $(".stretchMe").anystretch(); </script> Changelog
Version 1.2
- Added dataName, to allow automatic image usage via data-anystretch (default)
Version 1.1
- Changed options from centeredX/centeredY to positionX/positionY to allow for greater control
Version 1.0
- This was forked from Backstretch (version 1.2)
