├── .gitignore ├── Gruntfile.js ├── LICENSE-MIT ├── README.md ├── bower.json ├── examples ├── basic.html ├── click.html ├── coffee.jpg ├── dome.jpg ├── lazyloading.html ├── multires.html ├── pot-holder.jpg ├── sample1_1280.jpg ├── sample1_1920.jpg ├── sample1_480.jpg ├── sample1_960.jpg ├── sample2_1280.jpg ├── sample2_1920.jpg ├── sample2_480.jpg ├── sample2_960.jpg ├── slideshow.html ├── slideshow_transitions.html └── slideshow_video.html ├── jquery.backstretch.js ├── jquery.backstretch.min.js ├── libs ├── jquery-loader.js ├── jquery │ └── jquery.js └── qunit │ ├── qunit.css │ └── qunit.js ├── package.json ├── src └── jquery.backstretch.js └── test ├── backstretch.html ├── backstretch_test.js ├── image1.jpg └── image2.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /*global module:false*/ 2 | module.exports = function(grunt) { 3 | 4 | grunt.loadNpmTasks( 'grunt-contrib-qunit' ); 5 | grunt.loadNpmTasks( 'grunt-contrib-jshint' ); 6 | grunt.loadNpmTasks( 'grunt-contrib-concat' ); 7 | grunt.loadNpmTasks( 'grunt-contrib-uglify' ); 8 | grunt.loadNpmTasks( 'grunt-contrib-watch' ); 9 | 10 | // Project configuration. 11 | grunt.initConfig({ 12 | pkg: grunt.file.readJSON('package.json'), 13 | concat: { 14 | dist: { 15 | src: 'src/<%= pkg.name %>.js', 16 | dest: '<%= pkg.name %>.js' 17 | } 18 | }, 19 | uglify: { 20 | options: { 21 | banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + 22 | '<%= grunt.template.today("yyyy-mm-dd") %>\\n' + 23 | '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + 24 | '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + 25 | '* Fork of improvements - by Daniel Cohen Gindi (danielgindi@gmail.com)' + 26 | ' Licensed <%= pkg.licenses.map(function (x) { return x["type"] }).join(", ") %> */' 27 | }, 28 | dist: { 29 | src: 'src/<%= pkg.name %>.js', 30 | dest: '<%= pkg.name %>.min.js' 31 | } 32 | }, 33 | qunit: { 34 | files: ['test/**/*.html'] 35 | }, 36 | watch: { 37 | files: 'src/<%= pkg.name %>.js', 38 | tasks: 'jshint qunit' 39 | }, 40 | jshint: { 41 | options: { 42 | curly: true, 43 | eqeqeq: true, 44 | immed: true, 45 | latedef: false, 46 | newcap: true, 47 | noarg: true, 48 | sub: true, 49 | undef: true, 50 | boss: true, 51 | eqnull: true, 52 | browser: true, 53 | laxcomma: true, 54 | globals: { 55 | jQuery: true 56 | } 57 | }, 58 | files: ['src/**/*.js', 'test/**/*.js'] 59 | } 60 | }); 61 | 62 | // Default task. 63 | grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); 64 | 65 | }; -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012 Scott Robbin 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Backstretch - [Main repo](https://github.com/jquery-backstretch/jquery-backstretch) is back from the dead, activity moved back there. 2 | 3 | Backstretch is 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/element, and will automatically resize as the window/element size changes. 4 | 5 | ## Original Repository 6 | 7 | Is here: https://github.com/srobbin/jquery-backstretch 8 | But we haven't seen any kind of activity by the author for about 2 years already. So I've taken the PRs that were there and merged them carefully, with some improvements and cleanup. This fork is the result. 9 | 10 | ## Demo 11 | 12 | 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/). 13 | 14 | ## Installation 15 | 16 | 1. Download/save the JS file from GitHub. 17 | 2. Install via Bower with the following command. 18 | 19 | ``` 20 | bower install jquery-backstretch-2 21 | ``` 22 | 23 | ## Setup 24 | 25 | Include the jQuery library (version 1.7 or newer) and Backstretch plugin files in your webpage (preferably at the bottom of the page, before the closing BODY tag): 26 | 27 | ```html 28 | 29 | 30 | 101 | ``` 102 | 103 | ## Automatic resolution selection 104 | 105 | The automatic resolution selection algorithm has multiple options to choose from. 106 | The default behaviour is that it matches the logical width of the element against the specified image sizes. Which means that an element with a 320px width on a @2x device is still considered as 320px. 107 | If you want 320px on a @2x device to be considered as 640px, then you can specify `pixelRatio: "auto"` on the specific image resolution. 108 | However if you want to limit specific images to only be chosen if the device has a certain pixel ratio - you can specify that pixel ratio i.e `pixelRatio: 2.5`. 109 | 110 | ## Options 111 | 112 | | Name | Description | Type | Default | 113 | |------|-------------|------|---------| 114 | | `alignX` * | This parameter controls the horizontal alignment of the image. Can be 'center'/'left'/'right' or any number between 0.0 and 1.0. | Integer or String | 0.5 | 115 | | `alignY` * | This parameter controls the vertical alignment of the image. Can be 'center'/'top'/'bottom' or any number between 0.0 and 1.0. | Integer or String | 0.5 | 116 | | `transition` * | Type of transition to use. If multiple are specified, then it will be chosed randomly | String or Array | 'fade' | 117 | | `transitionDuration` * | This is the duration at which the image will transition in. Integers in milliseconds are accepted, as well as standard jQuery speed strings (slow, normal, fast). | Integer or String | 0 | 118 | | `transitionEasing` * | The easing function that will be used for animations. | Any supported jQuery easing value | *jQuery default* | 119 | | `animateFirst` | If `true`, the first image will transition in like all the others. | Boolean | true | 120 | | `fade` * | Sets `transition` to `'fade'` and `transitionDuration` to whatever value was specified. | Integer or String | | 121 | | `fadeFirst` | Synonym for `animateFirst` | Boolean | true | 122 | | `duration` * | The amount of time in between slides, when using Backstretch as a slideshow, expressed as the number of milliseconds. | Integer | 5000 | 123 | | `paused` | For slideshows: Disables the change between slides | Boolean | false | 124 | | `start` | The index of the image in the array you want to start your slideshow with. | Integer | 0 | 125 | | `preload` | How many images to preload at once? I.e. Lazy-loading can be enabled by specifying 0. | Integer | 2 | 126 | | `preloadSize` | How many images to preload in parallel? If we are preloading 5 images for the next slides, we might want to still limit it to only preload 2 or 3 at once, according to the expected available bandwidth. | Integer | 1 | 127 | | `bypassCss` | Avoid adding any CSS to the IMG element. I.e if you want a dynamic IMG tag that is laid out with the content. | Boolean | false | 128 | | `alwaysTestWindowResolution` | Always test against window's width instead of the element's width. | Boolean | false | 129 | | `resolutionRefreshRate` | Threshold for how long to wait before the image resolution will be switched? | Integer | 2500 | 130 | | `resolutionChangeRatioThreshold` | Threshold for how much should the different in the resolution be before switch image | Number | 0.1 (10%) | 131 | | `centeredX` | Deprecated. Still works but please do not use it. | Boolean | true | 132 | | `centeredY` | Deprecated. Still works but please do not use it. | Boolean | true | 133 | 134 | * Options marked with an `*` can be specified for individual images 135 | 136 | ## Image definition 137 | 138 | Each image in the set can be a String specifying the URL for the image, *or* an object with the following options, *or* an array of images for different resolutions to choose between. 139 | A url can be a url to a video also. 140 | Currently the plugin will automatically recognize a *youtube* url. If you pass urls to raw videos, you have to specify `isVideo: true`. 141 | 142 | | Name | Description | Type | Default | 143 | |------|-------------|------|---------| 144 | | `url` | The url of the image or video | String | | 145 | | `alt` | The alternative text for this image (If you want to play along with screen readers) | String | '' | 146 | | `alignX` | This parameter controls the horizontal alignment of the image. Can be 'center'/'left'/'right' or any number between 0.0 and 1.0. | Integer or String | 0.5 | 147 | | `alignY` | This parameter controls the vertical alignment of the image. Can be 'center'/'top'/'bottom' or any number between 0.0 and 1.0. | Integer or String | 0.5 | 148 | | `transition` | Type of transition to use. If multiple are specified, then it will be chosed randomly | String or Array | 'fade' | 149 | | `transitionDuration` | This is the duration at which the image will transition in. Integers in milliseconds are accepted, as well as standard jQuery speed strings (slow, normal, fast). | Integer or String | 0 | 150 | | `transitionEasing` | The easing function that will be used for animations. | Any supported jQuery easing value | *jQuery default* | 151 | | `fade` | Sets `transition` to `'fade'` and `transitionDuration` to whatever value was specified. | Integer or String | | 152 | | `duration` | The amount of time in between slides, when using Backstretch as a slideshow, expressed as the number of milliseconds. | Integer | 5000 | 153 | | `isVideo` | Tell the plugin the this is a video (if cannot be recognized automatically) | Boolean | false | 154 | | `loop` | Should the video be looped? If yes, then the duration will be used to determine when to stop. | Boolean | false | 155 | | `mute` | Should the video be muted? | Boolean | true | 156 | | `poster` | This is for specifying the `poster` attribute in standard