You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

jquery.vegas.js 11KB

8 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. // ----------------------------------------------------------------------------
  2. // Vegas - Fullscreen Backgrounds and Slideshows with jQuery.
  3. // v1.3.5 - released 2014-10-13 19:56
  4. // Licensed under the MIT license.
  5. // http://vegas.jaysalvat.com/
  6. // ----------------------------------------------------------------------------
  7. // Copyright (C) 2010-2014 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 === false) {
  94. $overlay.css("backgroundImage", "none");
  95. }
  96. if (options.src) {
  97. $overlay.css("backgroundImage", "url(" + options.src + ")");
  98. }
  99. if (options.opacity) {
  100. $overlay.css("opacity", options.opacity);
  101. }
  102. $overlay.prependTo("body");
  103. return $.vegas;
  104. },
  105. slideshow: function(settings, keepPause) {
  106. var options = {
  107. step: step,
  108. delay: delay,
  109. preload: false,
  110. loading: true,
  111. backgrounds: backgrounds,
  112. walk: walk
  113. };
  114. $.extend(options, $.vegas.defaults.slideshow, settings);
  115. if (options.backgrounds != backgrounds) {
  116. if (!settings.step) {
  117. options.step = 0;
  118. }
  119. if (!settings.walk) {
  120. options.walk = function() {};
  121. }
  122. if (options.preload) {
  123. $.vegas("preload", options.backgrounds);
  124. }
  125. }
  126. backgrounds = options.backgrounds;
  127. delay = options.delay;
  128. step = options.step;
  129. walk = options.walk;
  130. clearInterval(timer);
  131. if (!backgrounds.length) {
  132. return $.vegas;
  133. }
  134. var doSlideshow = function() {
  135. if (step < 0) {
  136. step = backgrounds.length - 1;
  137. }
  138. if (step >= backgrounds.length || !backgrounds[step - 1]) {
  139. step = 0;
  140. }
  141. var settings = backgrounds[step++];
  142. settings.walk = options.walk;
  143. settings.loading = options.loading;
  144. if (typeof settings.fade == "undefined") {
  145. settings.fade = options.fade;
  146. }
  147. if (settings.fade > options.delay) {
  148. settings.fade = options.delay;
  149. }
  150. $.vegas(settings);
  151. };
  152. doSlideshow();
  153. if (!keepPause) {
  154. paused = false;
  155. $("body").trigger("vegasstart", [ $current.get(0), step - 1 ]);
  156. }
  157. if (!paused) {
  158. timer = setInterval(doSlideshow, options.delay);
  159. }
  160. return $.vegas;
  161. },
  162. next: function() {
  163. var from = step;
  164. if (step) {
  165. $.vegas("slideshow", {
  166. step: step
  167. }, true);
  168. $("body").trigger("vegasnext", [ $current.get(0), step - 1, from - 1 ]);
  169. }
  170. return $.vegas;
  171. },
  172. previous: function() {
  173. var from = step;
  174. if (step) {
  175. $.vegas("slideshow", {
  176. step: step - 2
  177. }, true);
  178. $("body").trigger("vegasprevious", [ $current.get(0), step - 1, from - 1 ]);
  179. }
  180. return $.vegas;
  181. },
  182. jump: function(s) {
  183. var from = step;
  184. if (step) {
  185. $.vegas("slideshow", {
  186. step: s
  187. }, true);
  188. $("body").trigger("vegasjump", [ $current.get(0), step - 1, from - 1 ]);
  189. }
  190. return $.vegas;
  191. },
  192. stop: function() {
  193. var from = step;
  194. step = 0;
  195. paused = null;
  196. clearInterval(timer);
  197. $("body").trigger("vegasstop", [ $current.get(0), from - 1 ]);
  198. return $.vegas;
  199. },
  200. pause: function() {
  201. paused = true;
  202. clearInterval(timer);
  203. $("body").trigger("vegaspause", [ $current.get(0), step - 1 ]);
  204. return $.vegas;
  205. },
  206. get: function(what) {
  207. if (what === null || what == "background") {
  208. return $current.get(0);
  209. }
  210. if (what == "overlay") {
  211. return $overlay.get(0);
  212. }
  213. if (what == "step") {
  214. return step - 1;
  215. }
  216. if (what == "paused") {
  217. return paused;
  218. }
  219. },
  220. preload: function(backgrounds) {
  221. var cache = [];
  222. for (var i in backgrounds) {
  223. if (backgrounds[i].src) {
  224. var cacheImage = document.createElement("img");
  225. cacheImage.src = backgrounds[i].src;
  226. cache.push(cacheImage);
  227. }
  228. }
  229. return $.vegas;
  230. }
  231. };
  232. function resize($img, settings) {
  233. var options = {
  234. align: "center",
  235. valign: "center"
  236. };
  237. $.extend(options, settings);
  238. if ($img.height() === 0) {
  239. $img.load(function() {
  240. resize($(this), settings);
  241. });
  242. return;
  243. }
  244. 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;
  245. if (rw > ri) {
  246. newWidth = wh / ri;
  247. newHeight = wh;
  248. } else {
  249. newWidth = ww;
  250. newHeight = ww * ri;
  251. }
  252. properties = {
  253. width: newWidth + "px",
  254. height: newHeight + "px",
  255. top: "auto",
  256. bottom: "auto",
  257. left: "auto",
  258. right: "auto"
  259. };
  260. if (!isNaN(parseInt(options.valign, 10))) {
  261. properties.top = 0 - (newHeight - wh) / 100 * parseInt(options.valign, 10) + "px";
  262. } else if (options.valign == "top") {
  263. properties.top = 0;
  264. } else if (options.valign == "bottom") {
  265. properties.bottom = 0;
  266. } else {
  267. properties.top = (wh - newHeight) / 2;
  268. }
  269. if (!isNaN(parseInt(options.align, 10))) {
  270. properties.left = 0 - (newWidth - ww) / 100 * parseInt(options.align, 10) + "px";
  271. } else if (options.align == "left") {
  272. properties.left = 0;
  273. } else if (options.align == "right") {
  274. properties.right = 0;
  275. } else {
  276. properties.left = (ww - newWidth) / 2;
  277. }
  278. $img.css(properties);
  279. }
  280. function loading() {
  281. $loading.prependTo("body").fadeIn();
  282. }
  283. function loaded() {
  284. $loading.fadeOut("fast", function() {
  285. $(this).remove();
  286. });
  287. }
  288. function getBackground() {
  289. if ($("body").css("backgroundImage")) {
  290. return $("body").css("backgroundImage").replace(/url\("?(.*?)"?\)/i, "$1");
  291. }
  292. }
  293. function getViewportSize() {
  294. var elmt = window, prop = "inner";
  295. if (!("innerWidth" in window)) {
  296. elmt = document.documentElement || document.body;
  297. prop = "client";
  298. }
  299. return {
  300. width: elmt[prop + "Width"],
  301. height: elmt[prop + "Height"]
  302. };
  303. }
  304. $.vegas = function(method) {
  305. if (methods[method]) {
  306. return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  307. } else if (typeof method === "object" || !method) {
  308. return methods.init.apply(this, arguments);
  309. } else {
  310. $.error("Method " + method + " does not exist");
  311. }
  312. };
  313. $.vegas.defaults = {
  314. background: {},
  315. slideshow: {},
  316. overlay: {}
  317. };
  318. })(jQuery);