jquery.vegas.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. // ----------------------------------------------------------------------------
  2. // Vegas – Fullscreen Backgrounds and Slideshows with jQuery.
  3. // v1.3.3 - released 2013-09-03 13:27
  4. // Licensed under the MIT license.
  5. // http://vegas.jaysalvat.com/
  6. // ----------------------------------------------------------------------------
  7. // Copyright (C) 2010-2013 Jay Salvat
  8. // http://jaysalvat.com/
  9. // ----------------------------------------------------------------------------
  10. (function($) {
  11. var $background = $("<img />").addClass("vegas-background"), $overlay = $("<div />").addClass("vegas-overlay"), $loading = $("<div />").addClass("vegas-loading"), $current = $(), paused = null, backgrounds = [], step = 0, delay = 5e3, walk = function() {}, timer, methods = {
  12. init: function(settings) {
  13. var options = {
  14. src: getBackground(),
  15. align: "center",
  16. valign: "center",
  17. fade: 0,
  18. loading: true,
  19. load: function() {},
  20. complete: function() {}
  21. };
  22. $.extend(options, $.vegas.defaults.background, settings);
  23. if (options.loading) {
  24. loading();
  25. }
  26. var $new = $background.clone();
  27. $new.css({
  28. position: "fixed",
  29. left: "0px",
  30. top: "0px"
  31. }).bind("load", function() {
  32. if ($new == $current) {
  33. return;
  34. }
  35. $(window).bind("load resize.vegas", function(e) {
  36. resize($new, options);
  37. });
  38. if ($current.is("img")) {
  39. $current.stop();
  40. $new.hide().insertAfter($current).fadeIn(options.fade, function() {
  41. $(".vegas-background").not(this).remove();
  42. $("body").trigger("vegascomplete", [ this, step - 1 ]);
  43. options.complete.apply($new, [ step - 1 ]);
  44. });
  45. } else {
  46. $new.hide().prependTo("body").fadeIn(options.fade, function() {
  47. $("body").trigger("vegascomplete", [ this, step - 1 ]);
  48. options.complete.apply(this, [ step - 1 ]);
  49. });
  50. }
  51. $current = $new;
  52. resize($current, options);
  53. if (options.loading) {
  54. loaded();
  55. }
  56. $("body").trigger("vegasload", [ $current.get(0), step - 1 ]);
  57. options.load.apply($current.get(0), [ step - 1 ]);
  58. if (step) {
  59. $("body").trigger("vegaswalk", [ $current.get(0), step - 1 ]);
  60. options.walk.apply($current.get(0), [ step - 1 ]);
  61. }
  62. }).attr("src", options.src);
  63. return $.vegas;
  64. },
  65. destroy: function(what) {
  66. if (!what || what == "background") {
  67. $(".vegas-background, .vegas-loading").remove();
  68. $(window).unbind("*.vegas");
  69. $current = $();
  70. }
  71. if (!what || what == "overlay") {
  72. $(".vegas-overlay").remove();
  73. }
  74. clearInterval(timer);
  75. return $.vegas;
  76. },
  77. overlay: function(settings) {
  78. var options = {
  79. src: null,
  80. opacity: null
  81. };
  82. $.extend(options, $.vegas.defaults.overlay, settings);
  83. $overlay.remove();
  84. $overlay.css({
  85. margin: "0",
  86. padding: "0",
  87. position: "fixed",
  88. left: "0px",
  89. top: "0px",
  90. width: "100%",
  91. height: "100%"
  92. });
  93. if (options.src) {
  94. $overlay.css("backgroundImage", "url(" + options.src + ")");
  95. }
  96. if (options.opacity) {
  97. $overlay.css("opacity", options.opacity);
  98. }
  99. $overlay.prependTo("body");
  100. return $.vegas;
  101. },
  102. slideshow: function(settings, keepPause) {
  103. var options = {
  104. step: step,
  105. delay: delay,
  106. preload: false,
  107. backgrounds: backgrounds,
  108. walk: walk
  109. };
  110. $.extend(options, $.vegas.defaults.slideshow, settings);
  111. if (options.backgrounds != backgrounds) {
  112. if (!settings.step) {
  113. options.step = 0;
  114. }
  115. if (!settings.walk) {
  116. options.walk = function() {};
  117. }
  118. if (options.preload) {
  119. $.vegas("preload", options.backgrounds);
  120. }
  121. }
  122. backgrounds = options.backgrounds;
  123. delay = options.delay;
  124. step = options.step;
  125. walk = options.walk;
  126. clearInterval(timer);
  127. if (!backgrounds.length) {
  128. return $.vegas;
  129. }
  130. var doSlideshow = function() {
  131. if (step < 0) {
  132. step = backgrounds.length - 1;
  133. }
  134. if (step >= backgrounds.length || !backgrounds[step - 1]) {
  135. step = 0;
  136. }
  137. var settings = backgrounds[step++];
  138. settings.walk = options.walk;
  139. if (typeof settings.fade == "undefined") {
  140. settings.fade = options.fade;
  141. }
  142. if (settings.fade > options.delay) {
  143. settings.fade = options.delay;
  144. }
  145. $.vegas(settings);
  146. };
  147. doSlideshow();
  148. if (!keepPause) {
  149. paused = false;
  150. $("body").trigger("vegasstart", [ $current.get(0), step - 1 ]);
  151. }
  152. if (!paused) {
  153. timer = setInterval(doSlideshow, options.delay);
  154. }
  155. return $.vegas;
  156. },
  157. next: function() {
  158. var from = step;
  159. if (step) {
  160. $.vegas("slideshow", {
  161. step: step
  162. }, true);
  163. $("body").trigger("vegasnext", [ $current.get(0), step - 1, from - 1 ]);
  164. }
  165. return $.vegas;
  166. },
  167. previous: function() {
  168. var from = step;
  169. if (step) {
  170. $.vegas("slideshow", {
  171. step: step - 2
  172. }, true);
  173. $("body").trigger("vegasprevious", [ $current.get(0), step - 1, from - 1 ]);
  174. }
  175. return $.vegas;
  176. },
  177. jump: function(s) {
  178. var from = step;
  179. if (step) {
  180. $.vegas("slideshow", {
  181. step: s
  182. }, true);
  183. $("body").trigger("vegasjump", [ $current.get(0), step - 1, from - 1 ]);
  184. }
  185. return $.vegas;
  186. },
  187. stop: function() {
  188. var from = step;
  189. step = 0;
  190. paused = null;
  191. clearInterval(timer);
  192. $("body").trigger("vegasstop", [ $current.get(0), from - 1 ]);
  193. return $.vegas;
  194. },
  195. pause: function() {
  196. paused = true;
  197. clearInterval(timer);
  198. $("body").trigger("vegaspause", [ $current.get(0), step - 1 ]);
  199. return $.vegas;
  200. },
  201. get: function(what) {
  202. if (what === null || what == "background") {
  203. return $current.get(0);
  204. }
  205. if (what == "overlay") {
  206. return $overlay.get(0);
  207. }
  208. if (what == "step") {
  209. return step - 1;
  210. }
  211. if (what == "paused") {
  212. return paused;
  213. }
  214. },
  215. preload: function(backgrounds) {
  216. var cache = [];
  217. for (var i in backgrounds) {
  218. if (backgrounds[i].src) {
  219. var cacheImage = document.createElement("img");
  220. cacheImage.src = backgrounds[i].src;
  221. cache.push(cacheImage);
  222. }
  223. }
  224. return $.vegas;
  225. }
  226. };
  227. function resize($img, settings) {
  228. var options = {
  229. align: "center",
  230. valign: "center"
  231. };
  232. $.extend(options, settings);
  233. if ($img.height() === 0) {
  234. $img.load(function() {
  235. resize($(this), settings);
  236. });
  237. return;
  238. }
  239. var vp = getViewportSize(), ww = vp.width, wh = vp.height, iw = $img.width(), ih = $img.height(), rw = wh / ww, ri = ih / iw, newWidth, newHeight, newLeft, newTop, properties;
  240. if (rw > ri) {
  241. newWidth = wh / ri;
  242. newHeight = wh;
  243. } else {
  244. newWidth = ww;
  245. newHeight = ww * ri;
  246. }
  247. properties = {
  248. width: newWidth + "px",
  249. height: newHeight + "px",
  250. top: "auto",
  251. bottom: "auto",
  252. left: "auto",
  253. right: "auto"
  254. };
  255. if (!isNaN(parseInt(options.valign, 10))) {
  256. properties.top = 0 - (newHeight - wh) / 100 * parseInt(options.valign, 10) + "px";
  257. } else if (options.valign == "top") {
  258. properties.top = 0;
  259. } else if (options.valign == "bottom") {
  260. properties.bottom = 0;
  261. } else {
  262. properties.top = (wh - newHeight) / 2;
  263. }
  264. if (!isNaN(parseInt(options.align, 10))) {
  265. properties.left = 0 - (newWidth - ww) / 100 * parseInt(options.align, 10) + "px";
  266. } else if (options.align == "left") {
  267. properties.left = 0;
  268. } else if (options.align == "right") {
  269. properties.right = 0;
  270. } else {
  271. properties.left = (ww - newWidth) / 2;
  272. }
  273. $img.css(properties);
  274. }
  275. function loading() {
  276. $loading.prependTo("body").fadeIn();
  277. }
  278. function loaded() {
  279. $loading.fadeOut("fast", function() {
  280. $(this).remove();
  281. });
  282. }
  283. function getBackground() {
  284. if ($("body").css("backgroundImage")) {
  285. return $("body").css("backgroundImage").replace(/url\("?(.*?)"?\)/i, "$1");
  286. }
  287. }
  288. function getViewportSize() {
  289. var elmt = window, prop = "inner";
  290. if (!("innerWidth" in window)) {
  291. elmt = document.documentElement || document.body;
  292. prop = "client";
  293. }
  294. return {
  295. width: elmt[prop + "Width"],
  296. height: elmt[prop + "Height"]
  297. };
  298. }
  299. $.vegas = function(method) {
  300. if (methods[method]) {
  301. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  302. } else if (typeof method === "object" || !method) {
  303. return methods.init.apply(this, arguments);
  304. } else {
  305. $.error("Method " + method + " does not exist");
  306. }
  307. };
  308. $.vegas.defaults = {
  309. background: {},
  310. slideshow: {},
  311. overlay: {}
  312. };
  313. })(jQuery);