Permalink
Browse files

Initial v2.0.0. Added slideshow, Backstretch for any block-level elem…

…ent, and using grunt.js.
  • Loading branch information...
1 parent 6af4c97 commit 5817ac5e11a9c7e1e61e777a4cdabafe62456d9d @srobbin srobbin committed Sep 5, 2012
View
@@ -0,0 +1 @@
+.DS_Store
View
@@ -0,0 +1,22 @@
+Copyright (c) 2012 Scott Robbin
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
View
@@ -1,20 +0,0 @@
-Copyright (c) 2012 Scott Robbin (srobbin.com)
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
View
111 README.md
@@ -0,0 +1,111 @@
+# Backstretch
+
+A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page, and will automatically resize as the window size changes.
+
+## Demo
+
+There are a couple of examples included with this package, or feel free to check it out live "on the project page itself.":http://srobbin.com/jquery-plugins/backstretch/
+
+## Setup
+
+Include the jQuery library and Backstretch plugin files in your webpage (preferably at the bottom of the page, before the closing BODY tag):
+
+```html
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
+<script src="jquery.backstretch.min.js"></script>
+<script>
+ // To attach Backstrech as the body's backgroun
+ $.backstretch("path/to/image.jpg");
+
+ // You may also attach Backstretch to a block-level element
+ $(".foo").backstretch("path/to/image.jpg");
+
+ // Or, to start a slideshow, just pass in an array of images
+ $(".foo").backstretch([
+ "path/to/image.jpg",
+ "path/to/image2.jpg",
+ "path/to/image3.jpg"
+ ], {duration: 4000});
+</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)
+
+### fade
+
+This is the speed at which the image will fade in. Integers in milliseconds are accepted, as well as standard jQuery speed strings (slow, normal, fast). (type=Integer or String, default='fast')
+
+### duration
+
+The amount of time in between slides, when using Backstretch as a slideshow, expressed as the number of milliseconds. (type=Integer, default=5000)
+
+## Slideshow API
+
+Once you've instantiated Backstretch, you can access its instance via that element's data attribute. There are many actions that you can perform on an instance, though most of them are only applicable if you've created a slideshow:
+
+```javascript
+// Start a slideshow
+$('.foo').backstretch([
+ 'path/to/image.jpg',
+ 'path/to/image2.jpg',
+ 'path/to/image3.jpg'
+]);
+
+// Pause the slideshow
+$('.foo').data('backstretch').pause();
+
+// Advance to the next slide
+$('.foo').data('backstretch').next();
+```
+
+### show(index)
+
+Jump to the slide at a given index.
+
+### prev()
+
+Display the previous image in a slideshow.
+
+### next()
+
+Advance to the next image in a slideshow.
+
+### pause()
+
+Pause the slideshow.
+
+### resume()
+
+Resume a paused slideshow.
+
+### destroy(preserveBackground)
+
+Destroy the Backstretch instance. Optionally, you can pass in a Boolean parameter, preserveBackground, to determine whether or not you'd like to keep the current image stretched as the background image.
+
+## Changelog
+
+### Version 2.0
+
+* Now accepts an array of images to create a slideshow
+* Can attach Backstretch to any block-level element, not just the body
+* Deprecated "speed" option in favor of "fade" for fadeIn timing
+* Added "duration" option, and Slideshow API
+
+### Version 1.2
+
+* You can now called backstretch twice, and it will replace the existing image.
+
+### Version 1.1
+
+* Added 'centeredX' and 'centeredY' options.
+* Removed 'hideUntilReady' option. It looks pretty bad if you don't hide the image until it's fully loaded.
+* Fixed IE img onload bug.
+* Now supports iPhone/iPad orientation changes.
View
@@ -1,69 +0,0 @@
-h1. jQuery Backstretch
-
-Backstretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page.
-The image will stretch to fit the page, and will automatically resize as the window size changes.
-
-h2. Demo
-
-There are a couple of examples included with this package, or feel free to check it out live "on the project page itself.":http://srobbin.com/jquery-plugins/backstretch/
-
-h2. Options
-
-h3. 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)
-
-h3. 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)
-
-h3. 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)
-
-
-h2. Setup
-
-Include the jQuery library and Backstretch plugin files in your webpage (preferably at the bottom of the page, before the closing BODY tag):
-
-<pre><code><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>
-</code></pre>
-
-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.
-
-<pre><code><script type="text/javascript">
- $.backstretch("/path/to/image.jpg", {speed: 150});
-</script>
-</code></pre>
-
-Want to change the image after Backstretch has been loaded? No problem, just call it again!
-
-<pre><code><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>
-</code></pre>
-
-h2. Changelog
-
-h3. Version 1.2
-
-* You can now called backstretch twice, and it will replace the existing image.
-
-h3. Version 1.1
-
-* Added 'centeredX' and 'centeredY' options.
-* Removed 'hideUntilReady' option. It looks pretty bad if you don't hide the image until it's fully loaded.
-* Fixed IE img onload bug.
-* Now supports iPhone/iPad orientation changes.
-
-h2. Support
-
-Basic support is offered through Github’s issues tracker. Many requests are resolved through the help of fellow Backstretch users and myself, however assistance is not guaranteed or timely.
-
-If you are in need of immediate support, or would like customizations to the script, "Premium Support":https://www.paypal.com/cgi-bin/webscr?business=srobbin@gmail.com&cmd=_xclick&currency_code=USD&amount=17&item_name=Backstretch%20Premium%20Support is available for $17. Premium Support provides you with direct email access to me, and allows me to set time aside to help solve your problem quickly.
View
53 examples/basic.html 100644 → 100755
@@ -3,32 +3,61 @@
<head>
<meta charset="utf-8" />
<style>
- body { font-family: Helvetica, Arial, sans-serif; }
+ body { font-family: Helvetica, Arial, sans-serif; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
.container {
width: 90%;
margin: 20px auto;
background-color: #FFF;
padding: 20px;
}
- pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; }
+
+ pre, code {
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+ font-size: 12px;
+ color: #333;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ }
+ pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
+ code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
+
+ .other { height: 300px; color: #FFF; }
+ .other div {
+ position: absolute;
+ bottom: 0;
+ width: 100%;
+ background: #000;
+ background: rgba(0,0,0,0.7);
+ }
+ .other div p { padding: 10px; }
</style>
</head>
<body>
<div class="container">
<h1>Basic Demo</h1>
- <p>This is a basic demo of jQuery Backstretch. It is a simple example of loading one image onto the page.</p>
- <pre><code>
-&lt;script src=&quot;../lib/jquery.min.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;../jquery.backstretch.min.js&quot;&gt;&lt;/script&gt;
+ <p>In its simplest form, Backstretch can be called by passing in the path to an image, and it will be applied to the page's <code>body</code>.</p>
+ <pre>&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;jquery.backstretch.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$.backstretch(&quot;pot-holder.jpg&quot;);
-&lt;/script&gt;
- </code></pre>
+&lt;/script&gt;</pre>
+ <h2>Other Elements</h2>
+ <p>Or, if you'd like, you can also attach Backstretch to another block level element on the page.</p>
+ <div class="other">
+ <div><p>The background image on this element was set using Backstretch.</p></div>
+ </div>
+ <pre>&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;jquery.backstretch.min.js&quot;&gt;&lt;/script&gt;
+&lt;script&gt;
+ $(&quot;.other&quot;).backstretch(&quot;coffee.jpg&quot;);
+&lt;/script&gt;</pre>
</div>
- <script src="../lib/jquery.min.js"></script>
- <script src="../jquery.backstretch.min.js"></script>
+ <script src="../libs/jquery/jquery.js"></script>
+ <script src="../src/jquery.backstretch.js"></script>
<script>
- $.backstretch("pot-holder.jpg");
- </script>
+ $.backstretch(["pot-holder.jpg"]);
+ $(".other").backstretch("coffee.jpg");
+ </script>
</body>
</html>
View
52 examples/click.html 100644 → 100755
@@ -3,52 +3,64 @@
<head>
<meta charset="utf-8" />
<style>
- body { font-family: Helvetica, Arial, sans-serif; }
+ body { font-family: Helvetica, Arial, sans-serif; line-height: 1.3em; -webkit-font-smoothing: antialiased; }
.container {
width: 90%;
margin: 20px auto;
background-color: #FFF;
padding: 20px;
}
- pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; }
+
+ pre, code {
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+ font-size: 12px;
+ color: #333;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ }
+ pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; overflow: scroll; }
+ code { padding: 2px 4px; background-color: #F7F7F9; border: 1px solid #E1E1E8; color: #D14; }
</style>
</head>
<body>
<div class="container">
<h1>Click Demo</h1>
- <p>This demonstrates a commonly-asked question: how do I replace Backstretch's image once it's been called? Answer: easy, just call it again!</p>
- <p>Furthermore, it gives an example of simple onclick functionality.</p>
+ <p>This demonstrates a commonly-asked question: how do I replace Backstretch's image once it's been called? The simple answer is, you can just call Backstretch again, and the image will be replaced.</p>
+ <p><em>Note: Any options that you previously passed in will be preserved.</em></p>
<p>
<input type="button" id="pot-holder" value="Show Pot Holder Background" />
<input type="button" id="coffee" value="Show Coffee Background" />
</p>
- <pre><code>
-&lt;script src=&quot;../lib/jquery.min.js&quot;&gt;&lt;/script&gt;
-&lt;script src=&quot;../jquery.backstretch.min.js&quot;&gt;&lt;/script&gt;
+ <pre>&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;jquery.backstretch.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$.backstretch(&quot;pot-holder.jpg&quot;, {speed: 500});
- $(&quot;#pot-holder&quot;).click(function() {
- $.backstretch(&quot;pot-holder.jpg&quot;);
+ $(&quot;#pot-holder&quot;).click(function (e) {
+ e.preventDefault();
+ $.backstretch(&quot;pot-holder.jpg&quot;);
});
- $(&quot;#coffee&quot;).click(function() {
- $.backstretch(&quot;coffee.jpg&quot;);
+ $(&quot;#coffee&quot;).click(function (e) {
+ e.preventDefault();
+ $.backstretch(&quot;coffee.jpg&quot;);
});
-&lt;/script&gt;
- </code></pre>
+&lt;/script&gt;</pre>
</div>
- <script src="../lib/jquery.min.js"></script>
- <script src="../jquery.backstretch.min.js"></script>
+ <script src="../libs/jquery/jquery.js"></script>
+ <script src="../src/jquery.backstretch.js"></script>
<script>
- $.backstretch("pot-holder.jpg", {speed: 500});
+ $.backstretch("pot-holder.jpg", {fade: 500});
- $("#pot-holder").click(function() {
- $.backstretch("pot-holder.jpg");
+ $("#pot-holder").click(function (e) {
+ e.preventDefault();
+ $.backstretch("pot-holder.jpg");
});
- $("#coffee").click(function() {
- $.backstretch("coffee.jpg");
+ $("#coffee").click(function (e) {
+ e.preventDefault();
+ $.backstretch("coffee.jpg");
});
</script>
</body>
View
0 examples/coffee.jpg 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
0 examples/pot-holder.jpg 100644 → 100755
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit 5817ac5

Please sign in to comment.