jquery.vegas.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. // ----------------------------------------------------------------------------
  2. // Vegas – Fullscreen Backgrounds and Slideshows with jQuery.
  3. // v1.3.2 - released 2013-08-15 17:14
  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("resize.vegas");
  69. $current = $();
  70. }
  71. if (what == "overlay") {
  72. $(".vegas-overlay").remove();
  73. }
  74. return $.vegas;
  75. },
  76. overlay: function(settings) {
  77. var options = {
  78. src: null,
  79. opacity: null
  80. };
  81. $.extend(options, $.vegas.defaults.overlay, settings);
  82. $overlay.remove();
  83. $overlay.css({
  84. margin: "0",
  85. padding: "0",
  86. position: "fixed",
  87. left: "0px",
  88. top: "0px",
  89. width: "100%",
  90. height: "100%"
  91. });
  92. if (options.src) {
  93. $overlay.css("backgroundImage", "url(" + options.src + ")");
  94. }
  95. if (options.opacity) {
  96. $overlay.css("opacity", options.opacity);
  97. }
  98. $overlay.prependTo("body");
  99. return $.vegas;
  100. },
  101. slideshow: function(settings, keepPause) {
  102. var options = {
  103. step: step,
  104. delay: delay,
  105. preload: false,
  106. backgrounds: backgrounds,
  107. walk: walk
  108. };
  109. $.extend(options, $.vegas.defaults.slideshow, settings);
  110. if (options.backgrounds != backgrounds) {
  111. if (!settings.step) {
  112. options.step = 0;
  113. }
  114. if (!settings.walk) {
  115. options.walk = function() {};
  116. }
  117. if (options.preload) {
  118. $.vegas("preload", options.backgrounds);
  119. }
  120. }
  121. backgrounds = options.backgrounds;
  122. delay = options.delay;
  123. step = options.step;
  124. walk = options.walk;
  125. clearInterval(timer);
  126. if (!backgrounds.length) {
  127. return $.vegas;
  128. }
  129. var doSlideshow = function() {
  130. if (step < 0) {
  131. step = backgrounds.length - 1;
  132. }
  133. if (step >= backgrounds.length || !backgrounds[step - 1]) {
  134. step = 0;
  135. }
  136. var settings = backgrounds[step++];
  137. settings.walk = options.walk;
  138. if (typeof settings.fade == "undefined") {
  139. settings.fade = options.fade;
  140. }
  141. if (settings.fade > options.delay) {
  142. settings.fade = options.delay;
  143. }
  144. $.vegas(settings);
  145. };
  146. doSlideshow();
  147. if (!keepPause) {
  148. paused = false;
  149. $("body").trigger("vegasstart", [ $current.get(0), step - 1 ]);
  150. }
  151. if (!paused) {
  152. timer = setInterval(doSlideshow, options.delay);
  153. }
  154. return $.vegas;
  155. },
  156. next: function() {
  157. var from = step;
  158. if (step) {
  159. $.vegas("slideshow", {
  160. step: step
  161. }, true);
  162. $("body").trigger("vegasnext", [ $current.get(0), step - 1, from - 1 ]);
  163. }
  164. return $.vegas;
  165. },
  166. previous: function() {
  167. var from = step;
  168. if (step) {
  169. $.vegas("slideshow", {
  170. step: step - 2
  171. }, true);
  172. $("body").trigger("vegasprevious", [ $current.get(0), step - 1, from - 1 ]);
  173. }
  174. return $.vegas;
  175. },
  176. jump: function(s) {
  177. var from = step;
  178. if (step) {
  179. $.vegas("slideshow", {
  180. step: s
  181. }, true);
  182. $("body").trigger("vegasjump", [ $current.get(0), step - 1, from - 1 ]);
  183. }
  184. return $.vegas;
  185. },
  186. stop: function() {
  187. var from = step;
  188. step = 0;
  189. paused = null;
  190. clearInterval(timer);
  191. $("body").trigger("vegasstop", [ $current.get(0), from - 1 ]);
  192. return $.vegas;
  193. },
  194. pause: function() {
  195. paused = true;
  196. clearInterval(timer);
  197. $("body").trigger("vegaspause", [ $current.get(0), step - 1 ]);
  198. return $.vegas;
  199. },
  200. get: function(what) {
  201. if (what === null || what == "background") {
  202. return $current.get(0);
  203. }
  204. if (what == "overlay") {
  205. return $overlay.get(0);
  206. }
  207. if (what == "step") {
  208. return step - 1;
  209. }
  210. if (what == "paused") {
  211. return paused;
  212. }
  213. },
  214. preload: function(backgrounds) {
  215. var cache = [];
  216. for (var i in backgrounds) {
  217. if (backgrounds[i].src) {
  218. var cacheImage = document.createElement("img");
  219. cacheImage.src = backgrounds[i].src;
  220. cache.push(cacheImage);
  221. }
  222. }
  223. return $.vegas;
  224. }
  225. };
  226. function resize($img, settings) {
  227. var options = {
  228. align: "center",
  229. valign: "center"
  230. };
  231. $.extend(options, settings);
  232. if ($img.height() === 0) {
  233. $img.load(function() {
  234. resize($(this), settings);
  235. });
  236. return;
  237. }
  238. var ww = $(window).width(), wh = $(window).height(), iw = $img.width(), ih = $img.height(), rw = wh / ww, ri = ih / iw, newWidth, newHeight, newLeft, newTop, properties;
  239. if (rw > ri) {
  240. newWidth = wh / ri;
  241. newHeight = wh;
  242. } else {
  243. newWidth = ww;
  244. newHeight = ww * ri;
  245. }
  246. properties = {
  247. width: newWidth + "px",
  248. height: newHeight + "px",
  249. top: "auto",
  250. bottom: "auto",
  251. left: "auto",
  252. right: "auto"
  253. };
  254. if (!isNaN(parseInt(options.valign, 10))) {
  255. properties.top = 0 - (newHeight - wh) / 100 * parseInt(options.valign, 10) + "px";
  256. } else if (options.valign == "top") {
  257. properties.top = 0;
  258. } else if (options.valign == "bottom") {
  259. properties.bottom = 0;
  260. } else {
  261. properties.top = (wh - newHeight) / 2;
  262. }
  263. if (!isNaN(parseInt(options.align, 10))) {
  264. properties.left = 0 - (newWidth - ww) / 100 * parseInt(options.align, 10) + "px";
  265. } else if (options.align == "left") {
  266. properties.left = 0;
  267. } else if (options.align == "right") {
  268. properties.right = 0;
  269. } else {
  270. properties.left = (ww - newWidth) / 2;
  271. }
  272. $img.css(properties);
  273. }
  274. function loading() {
  275. $loading.prependTo("body").fadeIn();
  276. }
  277. function loaded() {
  278. $loading.fadeOut("fast", function() {
  279. $(this).remove();
  280. });
  281. }
  282. function getBackground() {
  283. if ($("body").css("backgroundImage")) {
  284. return $("body").css("backgroundImage").replace(/url\("?(.*?)"?\)/i, "$1");
  285. }
  286. }
  287. $.vegas = function(method) {
  288. if (methods[method]) {
  289. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  290. } else if (typeof method === "object" || !method) {
  291. return methods.init.apply(this, arguments);
  292. } else {
  293. $.error("Method " + method + " does not exist");
  294. }
  295. };
  296. $.vegas.defaults = {
  297. background: {},
  298. slideshow: {},
  299. overlay: {}
  300. };
  301. })(jQuery);