jquery.vegas.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475
  1. // ----------------------------------------------------------------------------
  2. // Vegas - jQuery plugin
  3. // Add awesome fullscreen backgrounds to your webpages.
  4. // v 1.2
  5. // Dual licensed under the MIT and GPL licenses.
  6. // http://vegas.jaysalvat.com/
  7. // ----------------------------------------------------------------------------
  8. // Copyright (C) 2011 Jay Salvat
  9. // http://jaysalvat.com/
  10. // ----------------------------------------------------------------------------
  11. // Permission is hereby granted, free of charge, to any person obtaining a copy
  12. // of this software and associated documentation files ( the "Software" ), to deal
  13. // in the Software without restriction, including without limitation the rights
  14. // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  15. // copies of the Software, and to permit persons to whom the Software is
  16. // furnished to do so, subject to the following conditions:
  17. //
  18. // The above copyright notice and this permission notice shall be included in
  19. // all copies or substantial portions of the Software.
  20. //
  21. // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  22. // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  23. // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  24. // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  25. // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  26. // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  27. // THE SOFTWARE.
  28. // ----------------------------------------------------------------------------
  29. ( function( $ ){
  30. var $background = $( '<img />' ).addClass( 'vegas-background' ),
  31. $overlay = $( '<div />' ).addClass( 'vegas-overlay' ),
  32. $loading = $( '<div />' ).addClass( 'vegas-loading' ),
  33. $current = $(),
  34. paused = null,
  35. backgrounds = [],
  36. step = 0,
  37. delay = 5000,
  38. timer,
  39. methods = {
  40. // Init plugin
  41. init : function( settings ) {
  42. var options = {
  43. src: getBackground(),
  44. align: 'center',
  45. valign: 'center',
  46. fade: 0,
  47. loading: true,
  48. load: function() {},
  49. complete: function() {}
  50. }
  51. $.extend( options, $.vegas.defaults.background, settings );
  52. if ( options.loading ) {
  53. loading();
  54. }
  55. var $new = $background.clone();
  56. $new.css( {
  57. 'position': 'fixed',
  58. 'left': '0px',
  59. 'top': '0px'
  60. })
  61. .imagesLoadedForVegas( function() {
  62. if ( $new == $current ) {
  63. return;
  64. }
  65. $( window ).bind( 'resize.vegas', function( e ) {
  66. resize( $new, options );
  67. });
  68. if ( $current.is( 'img' ) ) {
  69. $current.stop();
  70. $new.hide()
  71. .insertAfter( $current )
  72. .fadeIn( options.fade, function() {
  73. $('.vegas-background')
  74. .not(this)
  75. .remove();
  76. $( 'body' ).trigger( 'vegascomplete', [ this, step - 1 ] );
  77. options.complete.apply( $new, [ step - 1 ] );
  78. });
  79. } else {
  80. $new.hide()
  81. .prependTo( 'body' )
  82. .fadeIn( options.fade, function() {
  83. $( 'body' ).trigger( 'vegascomplete', [ this, step - 1 ] );
  84. options.complete.apply( this, [ step - 1 ] );
  85. });
  86. }
  87. $current = $new;
  88. resize( $current, options );
  89. if ( options.loading ) {
  90. loaded();
  91. }
  92. $( 'body' ).trigger( 'vegasload', [ $current.get(0), step - 1 ] );
  93. options.load.apply( $current.get(0), [ step - 1 ] );
  94. if ( step ) {
  95. $( 'body' ).trigger( 'vegaswalk', [ $current.get(0), step - 1 ] );
  96. options.walk.apply( $current.get(0), [ step - 1 ] );
  97. }
  98. })
  99. .attr( 'src', options.src );
  100. return $.vegas;
  101. },
  102. // Destroy background and/or overlay
  103. destroy: function( what ) {
  104. if ( !what || what == 'background') {
  105. $( '.vegas-background, .vegas-loading' ).remove();
  106. $( window ).unbind( 'resize.vegas' );
  107. $current = null;
  108. }
  109. if ( what == 'overlay') {
  110. $( '.vegas-overlay' ).remove();
  111. }
  112. return $.vegas;
  113. },
  114. // Display the pattern overlay
  115. overlay: function( settings ) {
  116. var options = {
  117. src: null,
  118. opacity: null
  119. };
  120. $.extend( options, $.vegas.defaults.overlay, settings );
  121. $overlay.remove();
  122. $overlay
  123. .css( {
  124. 'margin': '0',
  125. 'padding': '0',
  126. 'position': 'fixed',
  127. 'left': '0px',
  128. 'top': '0px',
  129. 'width': '100%',
  130. 'height': '100%'
  131. });
  132. if ( options.src ) {
  133. $overlay.css( 'backgroundImage', 'url(' + options.src + ')' );
  134. }
  135. if ( options.opacity ) {
  136. $overlay.css( 'opacity', options.opacity );
  137. }
  138. $overlay.prependTo( 'body' );
  139. return $.vegas;
  140. },
  141. // Start/restart slideshow
  142. slideshow: function( settings, keepPause ) {
  143. var options = {
  144. step: step,
  145. delay: delay,
  146. preload: false,
  147. backgrounds: backgrounds,
  148. walk: function() {}
  149. };
  150. $.extend( options, $.vegas.defaults.slideshow, settings );
  151. if ( options.backgrounds != backgrounds ) {
  152. if ( !settings.step ) {
  153. options.step = 0;
  154. }
  155. if ( options.preload ) {
  156. $.vegas( 'preload', options.backgrounds );
  157. }
  158. }
  159. backgrounds = options.backgrounds;
  160. delay = options.delay;
  161. step = options.step;
  162. clearInterval( timer );
  163. if ( !backgrounds.length ) {
  164. return $.vegas;
  165. }
  166. var doSlideshow = function() {
  167. if ( step < 0 ) {
  168. step = backgrounds.length - 1;
  169. }
  170. if ( step >= backgrounds.length || !backgrounds[ step - 1 ] ) {
  171. step = 0;
  172. }
  173. var settings = backgrounds[ step++ ];
  174. settings.walk = options.walk;
  175. if ( settings.fade > options.delay ) {
  176. settings.fade = options.delay;
  177. }
  178. $.vegas( settings );
  179. }
  180. doSlideshow();
  181. if ( !keepPause ) {
  182. paused = false;
  183. $( 'body' ).trigger( 'vegasstart', [ $current.get(0), step - 1 ] );
  184. }
  185. if ( !paused ) {
  186. timer = setInterval( doSlideshow, options.delay );
  187. }
  188. return $.vegas;
  189. },
  190. // Jump to the next background in the current slideshow
  191. next: function() {
  192. var from = step;
  193. if ( step ) {
  194. $.vegas( 'slideshow', { step: step }, true );
  195. $( 'body' ).trigger( 'vegasnext', [ $current.get(0), step - 1, from - 1 ] );
  196. }
  197. return $.vegas;
  198. },
  199. // Jump to the previous background in the current slideshow
  200. previous: function() {
  201. var from = step;
  202. if ( step ) {
  203. $.vegas( 'slideshow', { step: step - 2 }, true );
  204. $( 'body' ).trigger( 'vegasprevious', [ $current.get(0), step - 1, from - 1 ] );
  205. }
  206. return $.vegas;
  207. },
  208. // Jump to a specific background in the current slideshow
  209. jump: function( s ) {
  210. var from = step;
  211. if ( step ) {
  212. $.vegas( 'slideshow', { step: s }, true );
  213. $( 'body' ).trigger( 'vegasjump', [ $current.get(0), step - 1, from - 1 ] );
  214. }
  215. return $.vegas;
  216. },
  217. // Stop slideshow
  218. stop: function() {
  219. var from = step;
  220. step = 0;
  221. paused = null;
  222. clearInterval( timer );
  223. $( 'body' ).trigger( 'vegasstop', [ $current.get(0), from - 1 ] );
  224. return $.vegas;
  225. },
  226. // Pause slideShow
  227. pause: function() {
  228. paused = true;
  229. clearInterval( timer );
  230. $( 'body' ).trigger( 'vegaspause', [ $current.get(0), step - 1 ] );
  231. return $.vegas;
  232. },
  233. // Get some useful values or objects
  234. get: function( what ) {
  235. if ( what == null || what == 'background' ) {
  236. return $current.get(0);
  237. }
  238. if ( what == 'overlay' ) {
  239. return $overlay.get(0);
  240. }
  241. if ( what == 'step' ) {
  242. return step - 1;
  243. }
  244. if ( what == 'paused' ) {
  245. return paused;
  246. }
  247. },
  248. // Preload an array of backgrounds
  249. preload: function( backgrounds ) {
  250. for( var i in backgrounds ) {
  251. if ( backgrounds[ i ].src ) {
  252. $('<img src="' + backgrounds[ i ].src + '">');
  253. }
  254. }
  255. return $.vegas;
  256. }
  257. }
  258. // Resize the background
  259. function resize( $img, settings ) {
  260. var options = {
  261. align: 'center',
  262. valign: 'center'
  263. }
  264. $.extend( options, settings );
  265. var ww = $( window ).width(),
  266. wh = $( window ).height(),
  267. iw = $img.width(),
  268. ih = $img.height(),
  269. rw = wh / ww,
  270. ri = ih / iw,
  271. newWidth, newHeight,
  272. newLeft, newTop,
  273. properties;
  274. if ( rw > ri ) {
  275. newWidth = wh / ri;
  276. newHeight = wh;
  277. } else {
  278. newWidth = ww;
  279. newHeight = ww * ri;
  280. }
  281. properties = {
  282. 'width': newWidth + 'px',
  283. 'height': newHeight + 'px',
  284. 'top': 'auto',
  285. 'bottom': 'auto',
  286. 'left': 'auto',
  287. 'right': 'auto'
  288. }
  289. if ( !isNaN( parseInt( options.valign ) ) ) {
  290. properties[ 'top' ] = ( 0 - ( newHeight - wh ) / 100 * parseInt( options.valign ) ) + 'px';
  291. } else if ( options.valign == 'top' ) {
  292. properties[ 'top' ] = 0;
  293. } else if ( options.valign == 'bottom' ) {
  294. properties[ 'bottom' ] = 0;
  295. } else {
  296. properties[ 'top' ] = ( wh - newHeight ) / 2;
  297. }
  298. if ( !isNaN( parseInt( options.align ) ) ) {
  299. properties[ 'left' ] = ( 0 - ( newWidth - ww ) / 100 * parseInt( options.align ) ) + 'px';
  300. } else if ( options.align == 'left' ) {
  301. properties[ 'left' ] = 0;
  302. } else if ( options.align == 'right' ) {
  303. properties[ 'right' ] = 0;
  304. } else {
  305. properties[ 'left' ] = ( ww - newWidth ) / 2 ;
  306. }
  307. $img.css( properties );
  308. }
  309. // Display the loading indicator
  310. function loading() {
  311. $loading.prependTo( 'body' ).fadeIn();
  312. }
  313. // Hide the loading indicator
  314. function loaded() {
  315. $loading.fadeOut( 'fast', function() {
  316. $( this ).remove();
  317. });
  318. }
  319. // Get the background image from the body
  320. function getBackground() {
  321. if ( $( 'body' ).css( 'backgroundImage' ) ) {
  322. return $( 'body' ).css( 'backgroundImage' ).replace( /url\("?(.*?)"?\)/i, '$1' );
  323. }
  324. }
  325. // The plugin
  326. $.vegas = function( method ) {
  327. if ( methods[ method ] ) {
  328. return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ) );
  329. } else if ( typeof method === 'object' || !method ) {
  330. return methods.init.apply( this, arguments );
  331. } else {
  332. $.error( 'Method ' + method + ' does not exist' );
  333. }
  334. };
  335. // Global parameters
  336. $.vegas.defaults = {
  337. background: {
  338. // src: string
  339. // align: string/int
  340. // valign: string/int
  341. // fade: int
  342. // loading bool
  343. // load: function
  344. // complete: function
  345. },
  346. slideshow: {
  347. // step: int
  348. // delay: int
  349. // backgrounds: array
  350. // preload: bool
  351. // walk: function
  352. },
  353. overlay: {
  354. // src: string
  355. // opacity: float
  356. }
  357. }
  358. /*!
  359. * jQuery imagesLoaded plugin v1.0.3
  360. * http://github.com/desandro/imagesloaded
  361. *
  362. * MIT License. by Paul Irish et al.
  363. */
  364. $.fn.imagesLoadedForVegas = function( callback ) {
  365. var $this = this,
  366. $images = $this.find('img').add( $this.filter('img') ),
  367. len = $images.length,
  368. blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
  369. function triggerCallback() {
  370. callback.call( $this, $images );
  371. }
  372. function imgLoaded() {
  373. if ( --len <= 0 && this.src !== blank ){
  374. setTimeout( triggerCallback );
  375. $images.unbind( 'load error', imgLoaded );
  376. }
  377. }
  378. if ( !len ) {
  379. triggerCallback();
  380. }
  381. $images.bind( 'load error', imgLoaded ).each( function() {
  382. // cached images don't fire load sometimes, so we reset src.
  383. if (this.complete || this.complete === undefined){
  384. var src = this.src;
  385. // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
  386. // data uri bypasses webkit log warning (thx doug jones)
  387. this.src = blank;
  388. this.src = src;
  389. }
  390. });
  391. return $this;
  392. };
  393. })( jQuery );