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 body.
body
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> +<script src="jquery.backstretch.min.js"></script> +<script> + $.backstretch("pot-holder.jpg"); +</script>
Or, if you'd like, you can also attach Backstretch to another block level element on the page.
The background image on this element was set using Backstretch.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> +<script src="jquery.backstretch.min.js"></script> +<script> + $(".other").backstretch("coffee.jpg"); +</script>
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.
Note: Any options that you previously passed in will be preserved.
+ + +
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> +<script src="jquery.backstretch.min.js"></script> +<script> + $.backstretch("pot-holder.jpg", {speed: 500}); + + $("#pot-holder").click(function (e) { + e.preventDefault(); + $.backstretch("pot-holder.jpg"); + }); + + $("#coffee").click(function (e) { + e.preventDefault(); + $.backstretch("coffee.jpg"); + }); +</script>
This demonstrates a commonly-asked question: how do I use Backstretch to create a slideshow of background images? Easy! Just pass in an array of image paths.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> +<script src="jquery.backstretch.min.js"></script> +<script> + $.backstretch([ + "pot-holder.jpg", + "coffee.jpg", + "dome.jpg" + ], { + fade: 750, + duration: 4000 + }); +</script>
' + escapeInnerText(source) + '
' + expected + '
' + actual + '
' + QUnit.diff(expected, actual) +'
+ Now with Bootstrap 3 support! +
+ A project by A Beautiful Site, + originally developed for Surreal CMS. +
+ This project is on GitHub. Feel free to post bug reports, feature requests, and code + improvements on the official project page. +
+ Download on GitHub +
+ This is the main demo page, which uses Bootstrap 3, + but this plugin works without Bootstrap as well. +
+ View Demo Without Bootstrap +
+ Valid positions include bottom left, bottom right, top + left, and top right. +
bottom left
bottom right
top + left
top right
format
rgb
opacity
true
data-opacity
keywords
transparent, + initial, inherit
+ Instantiate like any other jQuery plugin: +
$('INPUT.minicolors').minicolors(settings);
+ Default settings are as follows: +
+$.minicolors = { + defaults: { + animationSpeed: 50, + animationEasing: 'swing', + change: null, + changeDelay: 0, + control: 'hue', + dataUris: true, + defaultValue: '', + format: 'hex', + hide: null, + hideSpeed: 100, + inline: false, + keywords: '', + letterCase: 'lowercase', + opacity: false, + position: 'bottom left', + show: null, + showSpeed: 100, + theme: 'default', + swatches: [] + } +}; +
+ For convenience, you can change default settings globally by assigning new values: +
+$.minicolors.defaults.changeDelay = 200; +
+ To change multiple properties at once, use $.extend(): +
$.extend()
+$.minicolors.defaults = $.extend($.minicolors.defaults, { + changeDelay: 200, + letterCase: 'uppercase', + theme: 'bootstrap' +}); +
+ Note: Changing default settings will not affect controls that + are already initialized. +
+ The animation speed of the sliders when the user taps or clicks a new color. Set to + 0 for no animation. +
0
+ The easing to use when animating the sliders. +
+ The time, in milliseconds, to defer the change event from firing while + the user makes a selection. This is useful for preventing the change event + from firing frequently as the user drags the color picker around. +
change
+ The default value is 0 (no delay). If your change callback + features something resource-intensive (such as an AJAX request), you’ll probably want + to set this to at least 200. +
200
+ Determines the type of control. Valid options are hue, brightness, + saturation, and wheel. +
hue
brightness
saturation
wheel
+ Set this to false if you require IE7/IE8 support. This setting will + force the plugin to load an external image instead of using dataURIs. +
false
+ To force a default color, set this to a valid hex string. When the user clears the + control, it will revert to this color. +
+ The format miniColors should use. Valid options are hex and + rgb. +
hex
+ The speed at which to hide and show the color picker. +
+ Set to true to force the color picker to appear inline. +
+ A comma-separated list of keywords that the control should accept (e.g. inherit, + transparent, initial). By default, no keywords are allowed. +
+ Determines the letter case of the hex code value. Valid options are uppercase + or lowercase. +
uppercase
lowercase
+ Set to true to enable the opacity slider. (Use the input element's + data-opacity attribute to set a preset value.) +
+ Sets the position of the dropdown. Valid options are bottom left, + bottom right, top left, and top right. +
top left
+ The swatchPosition setting has been removed in version 2.1. The position + of the swatch is now determined by position. +
swatchPosition
position
+ A string containing the name of the custom theme to be applied. In your CSS, prefix + your selectors like this: +
+.minicolors-theme-yourThemeName { ... } +
+ If you are using the default theme, you will probably need to adjust the swatch + styles depending on your existing stylesheet rules. Version 2.1 removes as much + styling on the input element as possible, which means it’s up to + you to adjust your CSS to make sure the swatch aligns properly. +
input
+ To adjust the swatch, override these styles: +
+.minicolors-theme-default .minicolors-swatch { + top: 5px; + left: 5px; + width: 18px; + height: 18px; +} +.minicolors-theme-default.minicolors-position-right .minicolors-swatch { + left: auto; + right: 5px; +} +
+ An array containing some colors, in either rgb(a) or hex format, that will + show up under the main color grid. There can be only up to 7 colors. +
Use this syntax for calling methods:
$(selector).minicolors('method', [data]);
+ Initializes the control for all items matching your selector. This is the default + method, so data may be passed in as the only argument. +
data
+ To set a preset color value, populate the value attribute of the original + input element. +
value
+ Returns the input element to its original, uninitialized state. +
+ Gets or sets a control's opacity level. To use this method as a setter, pass data in + as a value between 0 and 1. (You can also obtain this value by checking the input + element's data-opacity attribute.) +
+ To set a preset opacity value, populate the data-opacity attribute of the + original input element. +
+ Returns an object containing red, green, blue, and alpha properties that correspond to + the control's current value. Example: +
{ r: 0, g: 82, b: 148, a: 0.75 }
+ Returns an RGB or RGBA string suitable for use in your CSS. Examples: +
+rgb(0, 82, 148) +rgba(0, 82, 148, .75) +
+ Gets or sets a control's settings. If new settings are passed in, the control will + destroy and re-initialize itself with any new settings overriding the old ones. +
+ Gets or sets a control's color value. To use this method as a setter, pass + in a color string or an object (ex: {color: '#fc0', opacity: .5}). +
{color: '#fc0', opacity: .5}
Fires when the value of the color picker changes. The this keyword will reference the original input element. +
this
+$(selector).minicolors({ + change: function(value, opacity) { + console.log(value + ' - ' + opacity); + } +}); +
+ Warning! This event will fire a lot when the user drags the + color picker around. Use the changeDelay setting to reduce its + frequency. +
changeDelay
+ Fires when the color picker is hidden. The this keyword will reference + the original input element. +
+$(selector).minicolors({ + hide: function() { + console.log('Hide event triggered!'); + } +}); +
+ Fires when the color picker is shown. The this keyword will reference + the original input element. +
+$(selector).minicolors({ + show: function() { + console.log('Show event triggered!'); + } +}); +
+ Licensed under the MIT license, + same as jQuery. +
+ ©2013 A Beautiful Site, LLC. +
+ « Back to the Bootstrap demo +