├── .gitignore ├── .jshintrc ├── CONTRIBUTING.md ├── Gruntfile.js ├── ISSUE_TEMPLATE.md ├── LICENSE-MIT ├── README.md ├── bower.json ├── changelog.md ├── dist ├── jquery.superslides.js ├── jquery.superslides.min.js └── stylesheets │ └── superslides.css ├── examples ├── constrained.html ├── custom-fx.html ├── custom-pagination.html ├── fade.html ├── images │ ├── affinity.jpeg │ ├── cinelli-front.jpeg │ ├── cinelli.jpeg │ ├── home-banner-01.jpg │ ├── people.jpeg │ └── surly.jpeg ├── index.html ├── javascripts │ ├── application.js │ ├── hammer.min.js │ ├── jquery.animate-enhanced.min.js │ └── jquery.easing.1.3.js ├── multiple.html ├── play.html ├── preserved-images.html ├── simple.html ├── single.html └── touch.html ├── libs ├── jquery-loader.js ├── jquery │ └── jquery.js └── qunit │ ├── qunit.css │ └── qunit.js ├── package.json ├── scss └── superslides.scss ├── src ├── .jshintrc ├── core.js ├── core_outro.js ├── core_prototype.js ├── css.js ├── fx.js ├── image.js ├── intro.js ├── outro.js ├── pagination.js ├── plugin.js └── setup.js ├── superslides.jquery.json └── test ├── .jshintrc ├── superslides.html └── superslides_test.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | .DS_Store 3 | .jhw-cache/ 4 | .sass-cache/ 5 | public 6 | node_modules/ -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "curly": true, 3 | "eqeqeq": true, 4 | "immed": true, 5 | "latedef": true, 6 | "newcap": true, 7 | "noarg": true, 8 | "sub": true, 9 | "undef": true, 10 | "unused": true, 11 | "boss": true, 12 | "eqnull": true, 13 | "node": true, 14 | "es5": true 15 | } 16 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Important notes 4 | Please don't edit files in the `dist` subdirectory as they are generated via Grunt. You'll find source code in the `src` subdirectory! 5 | 6 | ### Code style 7 | Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.** 8 | 9 | ### PhantomJS 10 | While Grunt can run the included unit tests via [PhantomJS](http://phantomjs.org/), this shouldn't be considered a substitute for the real thing. Please be sure to test the `test/*.html` unit test file(s) in _actual_ browsers. 11 | 12 | ## Modifying the code 13 | First, ensure that you have the latest [Node.js](http://nodejs.org/) and [npm](http://npmjs.org/) installed. 14 | 15 | Test that Grunt's CLI is installed by running `grunt --version`. If the command isn't found, run `npm install -g grunt-cli`. For more information about installing Grunt, see the [getting started guide](http://gruntjs.com/getting-started). 16 | 17 | 1. Fork and clone the repo. 18 | 1. Run `npm install` to install all dependencies (including Grunt). 19 | 1. Run `grunt` to grunt this project. 20 | 21 | Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken. 22 | 23 | ## Submitting pull requests 24 | 25 | 1. Create a new branch, please don't work in your `master` branch directly. 26 | 1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail. 27 | 1. Fix stuff. 28 | 1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done. 29 | 1. Open `test/*.html` unit test file(s) in actual browser to ensure tests pass everywhere. 30 | 1. Update the documentation to reflect any changes. 31 | 1. Push to your fork and submit a pull request. 32 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(grunt) { 4 | 5 | // Project configuration. 6 | grunt.initConfig({ 7 | // Metadata. 8 | pkg: grunt.file.readJSON('superslides.jquery.json'), 9 | banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + 10 | '<%= grunt.template.today("yyyy-mm-dd") %>\n' + 11 | '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + 12 | '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + 13 | ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n', 14 | // Task configuration. 15 | clean: { 16 | files: ['dist'] 17 | }, 18 | concat: { 19 | options: { 20 | banner: '<%= banner %>', 21 | stripBanners: true 22 | }, 23 | dist: { 24 | src: [ 25 | 'src/intro.js', 26 | 'src/core.js', 27 | 'src/setup.js', 28 | 'src/css.js', 29 | 'src/fx.js', 30 | 'src/image.js', 31 | 'src/pagination.js', 32 | 'src/core_outro.js', 33 | 'src/core_prototype.js', 34 | 'src/plugin.js', 35 | 'src/outro.js' 36 | ], 37 | dest: 'dist/jquery.<%= pkg.name %>.js' 38 | }, 39 | }, 40 | uglify: { 41 | options: { 42 | banner: '<%= banner %>' 43 | }, 44 | dist: { 45 | src: '<%= concat.dist.dest %>', 46 | dest: 'dist/jquery.<%= pkg.name %>.min.js' 47 | }, 48 | }, 49 | qunit: { 50 | files: ['test/**/*.html'] 51 | }, 52 | jshint: { 53 | gruntfile: { 54 | options: { 55 | jshintrc: '.jshintrc' 56 | }, 57 | src: 'Gruntfile.js' 58 | }, 59 | src: { 60 | options: { 61 | jshintrc: 'src/.jshintrc' 62 | }, 63 | src: ['src/**/*.js'] 64 | }, 65 | test: { 66 | options: { 67 | jshintrc: 'test/.jshintrc' 68 | }, 69 | src: ['test/**/*.js'] 70 | }, 71 | }, 72 | compass: { 73 | dist: { 74 | options: { 75 | sassDir: 'scss', 76 | cssDir: 'dist/stylesheets', 77 | noLineComments: true 78 | } 79 | } 80 | }, 81 | watch: { 82 | gruntfile: { 83 | files: '<%= jshint.gruntfile.src %>', 84 | tasks: ['jshint:gruntfile'] 85 | }, 86 | src: { 87 | files: ['<%= jshint.src.src %>', 'scss/*'], 88 | tasks: ['compass', 'jshint:src', 'qunit', 'concat'] 89 | }, 90 | test: { 91 | files: '<%= jshint.test.src %>', 92 | tasks: ['jshint:test', 'qunit'] 93 | }, 94 | }, 95 | }); 96 | 97 | // These plugins provide necessary tasks. 98 | grunt.loadNpmTasks('grunt-contrib-clean'); 99 | grunt.loadNpmTasks('grunt-contrib-concat'); 100 | grunt.loadNpmTasks('grunt-contrib-uglify'); 101 | grunt.loadNpmTasks('grunt-contrib-qunit'); 102 | grunt.loadNpmTasks('grunt-contrib-jshint'); 103 | grunt.loadNpmTasks('grunt-contrib-watch'); 104 | grunt.loadNpmTasks('grunt-contrib-compass'); 105 | 106 | // Default task. 107 | grunt.registerTask('default', ['jshint', 'qunit', 'clean', 'concat', 'uglify']); 108 | 109 | }; 110 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Hey there! 2 | ## This project is currently unmaintained. If you're interested in being a maintainer chime in on this issue: https://github.com/nicinabox/superslides/issues/353 3 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Nic Aitch 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 | ### /!\ This project is currently unmaintained 2 | 3 | If you're interested in maintaining this project and triaging bugs [chime in on this issue](https://github.com/nicinabox/superslides/issues/353). 4 | 5 | # Superslides 6 | 7 | Superslides is a full screen, hardware accelerated slider for jQuery. I wasn't happy with the state of full screen sliders, so naturally I built my own. 8 | 9 | ## Usage 10 | 11 | [Check out the demo](http://nicinabox.github.com/superslides/) for an interactive example or the examples folder for individual cases. Use like your standard jQuery plugin: 12 | 13 | ```javascript 14 | $('#slides').superslides() 15 | ``` 16 | ## Options 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 |
OptionDefaultDescription
play0[number] Milliseconds before progressing to next slide automatically. Use a falsey value to disable.
animation'slide'[string] slide or fade. This matches animations defined by fx engine.
animation_speed'normal'[string] Animation speed.
animation_easing'linear'[string] Animation easing.
inherit_width_fromwindow[object] or [string] Accepts window or element selector. Use to constrain slider to an element's width.
inherit_height_fromwindow[object] or [string] Accepts window or element selector. Use to constrain slider to an element's height.
paginationtrue[boolean] Generate pagination. Add an id to your slide to use custom pagination on that slide.
hashchangefalse[boolean] Enable hashchange support in url.
elements(see Elements below)[object] A hash of element classes used in generated html.
70 | 71 | ### Elements 72 | 73 | The following are element classes accessible under the `elements` object. 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 |
preserve'.preserve'[string] Add this class to images in your content that you don't want to be resized like the background images.
nav'.slides-navigation'[string] Class surrounding next/previous buttons.
container'.slides-container'[string] Container class that must be present with original markup.
pagination'.slides-pagination'[string] Pagination class added to pagination container.
97 | 98 | ## Events 99 | 100 | Superslides triggers a few events that you can bind to. 101 | 102 | started.slides 103 | init.slides 104 | animating.slides // Before slide animation begins 105 | animated.slides // After slide animation ends 106 | updated.slides 107 | 108 | ## API 109 | 110 | ``` javascript 111 | $('#slides').superslides('start') 112 | $('#slides').superslides('stop') 113 | $('#slides').superslides('animate' [, index|'next'|'prev']) 114 | $('#slides').superslides('size') 115 | $('#slides').superslides('destroy') 116 | $('#slides').superslides('current') // get current slide index 117 | $('#slides').superslides('next') // get next slide index 118 | $('#slides').superslides('prev') // get previous slide index 119 | ``` 120 | 121 | If adding slides after initialization (a la ajax), be sure to call `update`. 122 | 123 | ## Styling 124 | 125 | All styling required for functionality is handled in the JavaScript. Additional and optional styling is provided in `dist/stylesheets/superslides.css` 126 | 127 | ## Markup 128 | 129 | Markup is pretty straightforward. At minimum it looks something like this: 130 | ``` html 131 |
132 |
133 | 134 | 135 |
136 |
137 | ``` 138 | 139 | You could even use a UL as the `slides-container` 140 | ``` html 141 |
142 | 162 | 166 |
167 | ``` 168 | 169 | ## Custom Animations 170 | 171 | I realize that you might want to do something unique in your application. That's why I've added the ability to extend the existing animations with your own. See `examples/custom-fx.html`. 172 | 173 | ```javascript 174 | $.fn.superslides.fx = $.extend({ 175 | flip: function(orientation, complete) { 176 | console.log(orientation); 177 | complete(); 178 | } 179 | }, $.fn.superslides.fx); 180 | ``` 181 | 182 | ## Hardware Acceleration 183 | 184 | Superslides is compatible with the [jQuery Animate Enhanced](http://playground.benbarnett.net/jquery-animate-enhanced/) plugin. Simply include it before this plugin and it will automatically smooth out transitions using CSS instead of JavaScript. 185 | 186 | ## Contributing 187 | 188 | Check contributing.md. 189 | 190 | ## Changelog 191 | 192 | [Changelog](https://github.com/nicinabox/superslides/blob/0.5-stable/changelog.md) 193 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "superslides", 3 | "homepage": "https://github.com/nicinabox/superslides", 4 | "version": "0.6.2", 5 | "author": { 6 | "name": "Nic Aitch", 7 | "email": "nic@nicinabox.com", 8 | "url": "http://nicinabox.com" 9 | }, 10 | "description": "A fullscreen, hardware accelerated slider for jQuery.", 11 | "main": [ 12 | "dist/jquery.superslides.js", 13 | "dist/stylesheets/superslides.css" 14 | ], 15 | "keywords": [ 16 | "superslides", 17 | "fullscreen", 18 | "slider", 19 | "jquery", 20 | "JavaScript" 21 | ], 22 | "licenses": [{ 23 | "type": "MIT", 24 | "url": "https://github.com/nicinabox/superslides/blob/master/LICENSE-MIT" 25 | }], 26 | "dependencies": { 27 | "jquery": "*" 28 | }, 29 | "ignore": [ 30 | "**/.*", 31 | "node_modules", 32 | "bower_components", 33 | "app/bower_components", 34 | "test", 35 | "tests" 36 | ] 37 | } 38 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ### 0.6.3 - Unreleased 4 | 5 | * Fix clicking custom pagination 6 | * 7 | 8 | ### 0.6.2 - July 10, 2013 9 | 10 | * Fix _findHeight typo 11 | 12 | ### 0.6.1 - July 9, 2013 13 | 14 | * Continue playing even after clicking navigation 15 | 16 | ### 0.6.0 - July 8, 2013 17 | 18 | * Drop Coffeescript, port to vanilla Javascript 19 | * Change src organization 20 | * Change image positioning to match `background-size: cover` 21 | * Add custom pagination 22 | * Add ability for slider to be constrained by an element 23 | * Add more examples 24 | * Add fade effect 25 | * Add fx engine 26 | * Add support for arrow keys 27 | * Fix double image load 28 | * Fix pagination, navigation when using multiple instances 29 | * Fix tests 30 | * Fix update method 31 | 32 | ### 0.5.2 - Jan 20, 2013 33 | 34 | * Fix image scale bug when using images larger than viewport 35 | * Fix img:first-child using preserve class 36 | * Fix loading last slide directly 37 | 38 | ### 0.5.0 - Dec 17, 2012 39 | 40 | * Ground up rebuild 41 | * Test with QUnit 42 | * New control API 43 | * New events 44 | * Fix current/next/prev bug 45 | * Fix multiple instances 46 | * Fix jQuery noconflict 47 | * Fix hashchange bugs 48 | * Fix misc bugs, overall performance and stability 49 | * Majorly slimmed required css 50 | 51 | ### 0.4.3 - Dec 2, 2012 52 | 53 | * Refactors 54 | * Fix flicker in Safari 55 | * Fix hash bug on load 56 | * Include size in API 57 | 58 | ### 0.4.2 - Oct 20, 2012 59 | 60 | * Add append API method 61 | 62 | ### 0.4.1 - Oct 18, 2012 63 | 64 | * Fix squished images on mobile 65 | * Fix image offset on mobile 66 | * Add support for non-fullscreen images 67 | * Add support for scrollable content 68 | 69 | ### 0.4 - Aug 11, 2012 70 | 71 | * Major refactor 72 | * Add control API 73 | * Add pagination 74 | * Add hashchange support 75 | * CSS is now included in the bulid 76 | 77 | ### 0.3.1 - July 19, 2012 78 | 79 | * Fix slides if only 1 present 80 | * Update mobile detection 81 | 82 | ### 0.3.0 - April 1, 2012 83 | * Add play, next, prev event hooks 84 | * Image sizes are calculated automatically (and asyncronously) 85 | * Enable 3DTransform for mobile 86 | * Add MIT License 87 | * Fix IE height/width calculation 88 | * Fix `slides.image_adjusted` being triggered too soon 89 | 90 | ### 0.2.3 - March 25, 2012 91 | * Fix left offset bug 92 | * UL no longer required 93 | * Add support for [jQuery Animate Enhanced](http://playground.benbarnett.net/jquery-animate-enhanced/) 94 | * Add start, stop event hooks 95 | 96 | ### 0.2.1 - March 24, 2012 97 | * Drop callbacks for events 98 | * Add build folder with compiled (and minified js) 99 | 100 | ### 0.2.0 - March 20, 2012 101 | * Fix slide bug if multiple clicks 102 | * Fix slide offset bug 103 | * Fix image size calculation + scaling 104 | * Fix height bug 105 | * Fix major window resize bug 106 | -------------------------------------------------------------------------------- /dist/jquery.superslides.js: -------------------------------------------------------------------------------- 1 | /*! Superslides - v0.6.3-wip - 2013-12-17 2 | * https://github.com/nicinabox/superslides 3 | * Copyright (c) 2013 Nic Aitch; Licensed MIT */ 4 | (function(window, $) { 5 | 6 | var Superslides, plugin = 'superslides'; 7 | 8 | Superslides = function(el, options) { 9 | this.options = $.extend({ 10 | play: false, 11 | animation_speed: 600, 12 | animation_easing: 'swing', 13 | animation: 'slide', 14 | inherit_width_from: window, 15 | inherit_height_from: window, 16 | pagination: true, 17 | hashchange: false, 18 | scrollable: true, 19 | elements: { 20 | preserve: '.preserve', 21 | nav: '.slides-navigation', 22 | container: '.slides-container', 23 | pagination: '.slides-pagination' 24 | } 25 | }, options); 26 | 27 | var that = this, 28 | $control = $('
', { "class": 'slides-control' }), 29 | multiplier = 1; 30 | 31 | this.$el = $(el); 32 | this.$container = this.$el.find(this.options.elements.container); 33 | 34 | // Private Methods 35 | var initialize = function() { 36 | multiplier = that._findMultiplier(); 37 | 38 | that.$el.on('click', that.options.elements.nav + " a", function(e) { 39 | e.preventDefault(); 40 | 41 | that.stop(); 42 | if ($(this).hasClass('next')) { 43 | that.animate('next', function() { 44 | that.start(); 45 | }); 46 | } else { 47 | that.animate('prev', function() { 48 | that.start(); 49 | }); 50 | } 51 | }); 52 | 53 | $(document).on('keyup', function(e) { 54 | if (e.keyCode === 37) { 55 | that.animate('prev'); 56 | } 57 | if (e.keyCode === 39) { 58 | that.animate('next'); 59 | } 60 | }); 61 | 62 | $(window).on('resize', function() { 63 | setTimeout(function() { 64 | var $children = that.$container.children(); 65 | 66 | that.width = that._findWidth(); 67 | that.height = that._findHeight(); 68 | 69 | $children.css({ 70 | width: that.width, 71 | left: that.width 72 | }); 73 | 74 | that.css.containers(); 75 | that.css.images(); 76 | }, 10); 77 | }); 78 | 79 | if (that.options.hashchange) { 80 | $(window).on('hashchange', function() { 81 | var hash = that._parseHash(), index; 82 | 83 | index = that._upcomingSlide(hash); 84 | 85 | if (index >= 0 && index !== that.current) { 86 | that.animate(index); 87 | } 88 | }); 89 | } 90 | 91 | that.pagination._events(); 92 | 93 | that.start(); 94 | return that; 95 | }; 96 | 97 | var css = { 98 | containers: function() { 99 | if (that.init) { 100 | that.$el.css({ 101 | height: that.height 102 | }); 103 | 104 | that.$control.css({ 105 | width: that.width * multiplier, 106 | left: -that.width 107 | }); 108 | 109 | that.$container.css({ 110 | 111 | }); 112 | } else { 113 | $('body').css({ 114 | margin: 0 115 | }); 116 | 117 | that.$el.css({ 118 | position: 'relative', 119 | overflow: 'hidden', 120 | width: '100%', 121 | height: that.height 122 | }); 123 | 124 | that.$control.css({ 125 | position: 'relative', 126 | transform: 'translate3d(0)', 127 | height: '100%', 128 | width: that.width * multiplier, 129 | left: -that.width 130 | }); 131 | 132 | that.$container.css({ 133 | display: 'none', 134 | margin: '0', 135 | padding: '0', 136 | listStyle: 'none', 137 | position: 'relative', 138 | height: '100%' 139 | }); 140 | } 141 | 142 | if (that.size() === 1) { 143 | that.$el.find(that.options.elements.nav).hide(); 144 | } 145 | }, 146 | images: function() { 147 | var $images = that.$container.find('img') 148 | .not(that.options.elements.preserve) 149 | 150 | $images.removeAttr('width').removeAttr('height') 151 | .css({ 152 | "-webkit-backface-visibility": 'hidden', 153 | "-ms-interpolation-mode": 'bicubic', 154 | "position": 'absolute', 155 | "left": '0', 156 | "top": '0', 157 | "z-index": '-1', 158 | "max-width": 'none' 159 | }); 160 | 161 | $images.each(function() { 162 | var image_aspect_ratio = that.image._aspectRatio(this), 163 | image = this; 164 | 165 | if (!$.data(this, 'processed')) { 166 | var img = new Image(); 167 | img.onload = function() { 168 | that.image._scale(image, image_aspect_ratio); 169 | that.image._center(image, image_aspect_ratio); 170 | $.data(image, 'processed', true); 171 | }; 172 | img.src = this.src; 173 | 174 | } else { 175 | that.image._scale(image, image_aspect_ratio); 176 | that.image._center(image, image_aspect_ratio); 177 | } 178 | }); 179 | }, 180 | children: function() { 181 | var $children = that.$container.children(); 182 | 183 | if ($children.is('img')) { 184 | $children.each(function() { 185 | if ($(this).is('img')) { 186 | $(this).wrap('
'); 187 | 188 | // move id attribute 189 | var id = $(this).attr('id'); 190 | $(this).removeAttr('id'); 191 | $(this).parent().attr('id', id); 192 | } 193 | }); 194 | 195 | $children = that.$container.children(); 196 | } 197 | 198 | if (!that.init) { 199 | $children.css({ 200 | display: 'none', 201 | left: that.width * 2 202 | }); 203 | } 204 | 205 | $children.css({ 206 | position: 'absolute', 207 | overflow: 'hidden', 208 | height: '100%', 209 | width: that.width, 210 | top: 0, 211 | zIndex: 0 212 | }); 213 | 214 | } 215 | } 216 | 217 | var fx = { 218 | slide: function(orientation, complete) { 219 | var $children = that.$container.children(), 220 | $target = $children.eq(orientation.upcoming_slide); 221 | 222 | $target.css({ 223 | left: orientation.upcoming_position, 224 | display: 'block' 225 | }); 226 | 227 | that.$control.animate({ 228 | left: orientation.offset 229 | }, 230 | that.options.animation_speed, 231 | that.options.animation_easing, 232 | function() { 233 | if (that.size() > 1) { 234 | that.$control.css({ 235 | left: -that.width 236 | }); 237 | 238 | $children.eq(orientation.upcoming_slide).css({ 239 | left: that.width, 240 | zIndex: 2 241 | }); 242 | 243 | if (orientation.outgoing_slide >= 0) { 244 | $children.eq(orientation.outgoing_slide).css({ 245 | left: that.width, 246 | display: 'none', 247 | zIndex: 0 248 | }); 249 | } 250 | } 251 | 252 | complete(); 253 | }); 254 | }, 255 | fade: function(orientation, complete) { 256 | var that = this, 257 | $children = that.$container.children(), 258 | $outgoing = $children.eq(orientation.outgoing_slide), 259 | $target = $children.eq(orientation.upcoming_slide); 260 | 261 | $target.css({ 262 | left: this.width, 263 | opacity: 0, 264 | display: 'block' 265 | }).animate({ 266 | opacity: 1 267 | }, 268 | that.options.animation_speed, 269 | that.options.animation_easing 270 | ); 271 | 272 | if (orientation.outgoing_slide >= 0) { 273 | $outgoing.animate({ 274 | opacity: 0 275 | }, 276 | that.options.animation_speed, 277 | that.options.animation_easing, 278 | function() { 279 | if (that.size() > 1) { 280 | $children.eq(orientation.upcoming_slide).css({ 281 | zIndex: 2 282 | }); 283 | 284 | if (orientation.outgoing_slide >= 0) { 285 | $children.eq(orientation.outgoing_slide).css({ 286 | opacity: 1, 287 | display: 'none', 288 | zIndex: 0 289 | }); 290 | } 291 | } 292 | 293 | complete(); 294 | }); 295 | } else { 296 | $target.css({ 297 | zIndex: 2 298 | }); 299 | complete(); 300 | } 301 | } 302 | }; 303 | 304 | fx = $.extend(fx, $.fn.superslides.fx); 305 | 306 | var image = { 307 | _centerY: function(image) { 308 | var $img = $(image); 309 | 310 | $img.css({ 311 | top: (that.height - $img.height()) / 2 312 | }); 313 | }, 314 | _centerX: function(image) { 315 | var $img = $(image); 316 | 317 | $img.css({ 318 | left: (that.width - $img.width()) / 2 319 | }); 320 | }, 321 | _center: function(image) { 322 | that.image._centerX(image); 323 | that.image._centerY(image); 324 | }, 325 | _aspectRatio: function(image) { 326 | if (!image.naturalHeight && !image.naturalWidth) { 327 | var img = new Image(); 328 | img.src = image.src; 329 | image.naturalHeight = img.height; 330 | image.naturalWidth = img.width; 331 | } 332 | 333 | return image.naturalHeight / image.naturalWidth; 334 | }, 335 | _scale: function(image, image_aspect_ratio) { 336 | image_aspect_ratio = image_aspect_ratio || that.image._aspectRatio(image); 337 | 338 | var container_aspect_ratio = that.height / that.width, 339 | $img = $(image); 340 | 341 | if (container_aspect_ratio > image_aspect_ratio) { 342 | $img.css({ 343 | height: that.height, 344 | width: that.height / image_aspect_ratio 345 | }); 346 | 347 | } else { 348 | $img.css({ 349 | height: that.width * image_aspect_ratio, 350 | width: that.width 351 | }); 352 | } 353 | } 354 | }; 355 | 356 | var pagination = { 357 | _setCurrent: function(i) { 358 | if (!that.$pagination) { return; } 359 | 360 | var $pagination_children = that.$pagination.children(); 361 | 362 | $pagination_children.removeClass('current'); 363 | $pagination_children.eq(i) 364 | .addClass('current'); 365 | }, 366 | _addItem: function(i) { 367 | var slide_number = i + 1, 368 | href = slide_number, 369 | $slide = that.$container.children().eq(i), 370 | slide_id = $slide.attr('id'); 371 | 372 | if (slide_id) { 373 | href = slide_id; 374 | } 375 | 376 | var $item = $("", { 377 | 'href': "#" + href, 378 | 'text': href 379 | }); 380 | 381 | $item.appendTo(that.$pagination); 382 | }, 383 | _setup: function() { 384 | if (!that.options.pagination || that.size() === 1) { return; } 385 | 386 | var $pagination = $("