jquery.slides.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598
  1. // Generated by CoffeeScript 1.6.1
  2. (function() {
  3. (function($, window, document) {
  4. var Plugin, defaults, pluginName;
  5. pluginName = "slidesjs";
  6. defaults = {
  7. width: 940,
  8. height: 528,
  9. start: 1,
  10. navigation: {
  11. active: true,
  12. effect: "slide"
  13. },
  14. pagination: {
  15. active: true,
  16. effect: "slide"
  17. },
  18. play: {
  19. active: false,
  20. effect: "slide",
  21. interval: 5000,
  22. auto: false,
  23. swap: true,
  24. pauseOnHover: false,
  25. restartDelay: 2500
  26. },
  27. effect: {
  28. slide: {
  29. speed: 500
  30. },
  31. fade: {
  32. speed: 300,
  33. crossfade: true
  34. }
  35. },
  36. callback: {
  37. loaded: function() {},
  38. start: function() {},
  39. complete: function() {}
  40. }
  41. };
  42. Plugin = (function() {
  43. function Plugin(element, options) {
  44. this.element = element;
  45. this.options = $.extend(true, {}, defaults, options);
  46. this._defaults = defaults;
  47. this._name = pluginName;
  48. this.init();
  49. }
  50. return Plugin;
  51. })();
  52. Plugin.prototype.init = function() {
  53. var $element, nextButton, pagination, playButton, prevButton, stopButton,
  54. _this = this;
  55. $element = $(this.element);
  56. this.data = $.data(this);
  57. $.data(this, "animating", false);
  58. $.data(this, "total", $element.children().not(".slidesjs-navigation", $element).length);
  59. $.data(this, "current", this.options.start - 1);
  60. $.data(this, "vendorPrefix", this._getVendorPrefix());
  61. if (typeof TouchEvent !== "undefined") {
  62. $.data(this, "touch", true);
  63. this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
  64. }
  65. $element.css({
  66. overflow: "hidden"
  67. });
  68. $element.slidesContainer = $element.children().not(".slidesjs-navigation", $element).wrapAll("<div class='slidesjs-container'>", $element).parent().css({
  69. overflow: "hidden",
  70. position: "relative"
  71. });
  72. $(".slidesjs-container", $element).wrapInner("<div class='slidesjs-control'>", $element).children();
  73. $(".slidesjs-control", $element).css({
  74. position: "relative",
  75. left: 0
  76. });
  77. $(".slidesjs-control", $element).children().addClass("slidesjs-slide").css({
  78. position: "absolute",
  79. top: 0,
  80. left: 0,
  81. width: "100%",
  82. zIndex: 0,
  83. display: "none",
  84. webkitBackfaceVisibility: "hidden"
  85. });
  86. $.each($(".slidesjs-control", $element).children(), function(i) {
  87. var $slide;
  88. $slide = $(this);
  89. return $slide.attr("slidesjs-index", i);
  90. });
  91. if (this.data.touch) {
  92. $(".slidesjs-control", $element).on("touchstart", function(e) {
  93. return _this._touchstart(e);
  94. });
  95. $(".slidesjs-control", $element).on("touchmove", function(e) {
  96. return _this._touchmove(e);
  97. });
  98. $(".slidesjs-control", $element).on("touchend", function(e) {
  99. return _this._touchend(e);
  100. });
  101. }
  102. $element.fadeIn(0);
  103. this.update();
  104. if (this.data.touch) {
  105. this._setuptouch();
  106. }
  107. $(".slidesjs-control", $element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function() {
  108. return $(this).css({
  109. zIndex: 10
  110. });
  111. });
  112. if (this.options.navigation.active) {
  113. prevButton = $("<a>", {
  114. "class": "slidesjs-previous slidesjs-navigation",
  115. href: "#",
  116. title: "Previous",
  117. text: "Previous"
  118. }).appendTo($element);
  119. nextButton = $("<a>", {
  120. "class": "slidesjs-next slidesjs-navigation",
  121. href: "#",
  122. title: "Next",
  123. text: "Next"
  124. }).appendTo($element);
  125. }
  126. $(".slidesjs-next", $element).click(function(e) {
  127. e.preventDefault();
  128. _this.stop(true);
  129. return _this.next(_this.options.navigation.effect);
  130. });
  131. $(".slidesjs-previous", $element).click(function(e) {
  132. e.preventDefault();
  133. _this.stop(true);
  134. return _this.previous(_this.options.navigation.effect);
  135. });
  136. if (this.options.play.active) {
  137. playButton = $("<a>", {
  138. "class": "slidesjs-play slidesjs-navigation",
  139. href: "#",
  140. title: "Play",
  141. text: "Play"
  142. }).appendTo($element);
  143. stopButton = $("<a>", {
  144. "class": "slidesjs-stop slidesjs-navigation",
  145. href: "#",
  146. title: "Stop",
  147. text: "Stop"
  148. }).appendTo($element);
  149. playButton.click(function(e) {
  150. e.preventDefault();
  151. return _this.play(true);
  152. });
  153. stopButton.click(function(e) {
  154. e.preventDefault();
  155. return _this.stop(true);
  156. });
  157. if (this.options.play.swap) {
  158. stopButton.css({
  159. display: "none"
  160. });
  161. }
  162. }
  163. if (this.options.pagination.active) {
  164. pagination = $("<ul>", {
  165. "class": "slidesjs-pagination"
  166. }).appendTo($element);
  167. $.each(new Array(this.data.total), function(i) {
  168. var paginationItem, paginationLink;
  169. paginationItem = $("<li>", {
  170. "class": "slidesjs-pagination-item"
  171. }).appendTo(pagination);
  172. paginationLink = $("<a>", {
  173. href: "#",
  174. "data-slidesjs-item": i,
  175. html: i + 1
  176. }).appendTo(paginationItem);
  177. return paginationLink.click(function(e) {
  178. e.preventDefault();
  179. _this.stop(true);
  180. return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1);
  181. });
  182. });
  183. }
  184. $(window).bind("resize", function() {
  185. return _this.update();
  186. });
  187. this._setActive();
  188. if (this.options.play.auto) {
  189. this.play();
  190. }
  191. return this.options.callback.loaded(this.options.start);
  192. };
  193. Plugin.prototype._setActive = function(number) {
  194. var $element, current;
  195. $element = $(this.element);
  196. this.data = $.data(this);
  197. current = number > -1 ? number : this.data.current;
  198. $(".active", $element).removeClass("active");
  199. return $(".slidesjs-pagination li:eq(" + current + ") a", $element).addClass("active");
  200. };
  201. Plugin.prototype.update = function() {
  202. var $element, height, width;
  203. $element = $(this.element);
  204. this.data = $.data(this);
  205. $(".slidesjs-control", $element).children(":not(:eq(" + this.data.current + "))").css({
  206. display: "none",
  207. left: 0,
  208. zIndex: 0
  209. });
  210. width = $element.width();
  211. height = (this.options.height / this.options.width) * width;
  212. this.options.width = width;
  213. this.options.height = height;
  214. return $(".slidesjs-control, .slidesjs-container", $element).css({
  215. width: width,
  216. height: height
  217. });
  218. };
  219. Plugin.prototype.next = function(effect) {
  220. var $element;
  221. $element = $(this.element);
  222. this.data = $.data(this);
  223. $.data(this, "direction", "next");
  224. if (effect === void 0) {
  225. effect = this.options.navigation.effect;
  226. }
  227. if (effect === "fade") {
  228. return this._fade();
  229. } else {
  230. return this._slide();
  231. }
  232. };
  233. Plugin.prototype.previous = function(effect) {
  234. var $element;
  235. $element = $(this.element);
  236. this.data = $.data(this);
  237. $.data(this, "direction", "previous");
  238. if (effect === void 0) {
  239. effect = this.options.navigation.effect;
  240. }
  241. if (effect === "fade") {
  242. return this._fade();
  243. } else {
  244. return this._slide();
  245. }
  246. };
  247. Plugin.prototype.goto = function(number) {
  248. var $element, effect;
  249. $element = $(this.element);
  250. this.data = $.data(this);
  251. if (effect === void 0) {
  252. effect = this.options.pagination.effect;
  253. }
  254. if (number > this.data.total) {
  255. number = this.data.total;
  256. } else if (number < 1) {
  257. number = 1;
  258. }
  259. if (typeof number === "number") {
  260. if (effect === "fade") {
  261. return this._fade(number);
  262. } else {
  263. return this._slide(number);
  264. }
  265. } else if (typeof number === "string") {
  266. if (number === "first") {
  267. if (effect === "fade") {
  268. return this._fade(0);
  269. } else {
  270. return this._slide(0);
  271. }
  272. } else if (number === "last") {
  273. if (effect === "fade") {
  274. return this._fade(this.data.total);
  275. } else {
  276. return this._slide(this.data.total);
  277. }
  278. }
  279. }
  280. };
  281. Plugin.prototype._setuptouch = function() {
  282. var $element, next, previous, slidesControl;
  283. $element = $(this.element);
  284. this.data = $.data(this);
  285. slidesControl = $(".slidesjs-control", $element);
  286. next = this.data.current + 1;
  287. previous = this.data.current - 1;
  288. if (previous < 0) {
  289. previous = this.data.total - 1;
  290. }
  291. if (next > this.data.total - 1) {
  292. next = 0;
  293. }
  294. slidesControl.children(":eq(" + next + ")").css({
  295. display: "block",
  296. left: this.options.width
  297. });
  298. return slidesControl.children(":eq(" + previous + ")").css({
  299. display: "block",
  300. left: -this.options.width
  301. });
  302. };
  303. Plugin.prototype._touchstart = function(e) {
  304. var $element, touches;
  305. $element = $(this.element);
  306. this.data = $.data(this);
  307. touches = e.originalEvent.touches[0];
  308. this._setuptouch();
  309. $.data(this, "touchtimer", Number(new Date()));
  310. $.data(this, "touchstartx", touches.pageX);
  311. $.data(this, "touchstarty", touches.pageY);
  312. return e.stopPropagation();
  313. };
  314. Plugin.prototype._touchend = function(e) {
  315. var $element, duration, prefix, slidesControl, timing, touches, transform,
  316. _this = this;
  317. $element = $(this.element);
  318. this.data = $.data(this);
  319. touches = e.originalEvent.touches[0];
  320. slidesControl = $(".slidesjs-control", $element);
  321. if (slidesControl.position().left > this.options.width * 0.5 || slidesControl.position().left > this.options.width * 0.1 && (Number(new Date()) - this.data.touchtimer < 250)) {
  322. $.data(this, "direction", "previous");
  323. this._slide();
  324. } else if (slidesControl.position().left < -(this.options.width * 0.5) || slidesControl.position().left < -(this.options.width * 0.1) && (Number(new Date()) - this.data.touchtimer < 250)) {
  325. $.data(this, "direction", "next");
  326. this._slide();
  327. } else {
  328. prefix = this.data.vendorPrefix;
  329. transform = prefix + "Transform";
  330. duration = prefix + "TransitionDuration";
  331. timing = prefix + "TransitionTimingFunction";
  332. slidesControl[0].style[transform] = "translateX(0px)";
  333. slidesControl[0].style[duration] = this.options.effect.slide.speed * 0.85 + "ms";
  334. }
  335. slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
  336. prefix = _this.data.vendorPrefix;
  337. transform = prefix + "Transform";
  338. duration = prefix + "TransitionDuration";
  339. timing = prefix + "TransitionTimingFunction";
  340. slidesControl[0].style[transform] = "";
  341. slidesControl[0].style[duration] = "";
  342. return slidesControl[0].style[timing] = "";
  343. });
  344. return e.stopPropagation();
  345. };
  346. Plugin.prototype._touchmove = function(e) {
  347. var $element, prefix, slidesControl, touches, transform;
  348. $element = $(this.element);
  349. this.data = $.data(this);
  350. touches = e.originalEvent.touches[0];
  351. prefix = this.data.vendorPrefix;
  352. slidesControl = $(".slidesjs-control", $element);
  353. transform = prefix + "Transform";
  354. $.data(this, "scrolling", Math.abs(touches.pageX - this.data.touchstartx) < Math.abs(touches.pageY - this.data.touchstarty));
  355. if (!this.data.animating && !this.data.scrolling) {
  356. e.preventDefault();
  357. this._setuptouch();
  358. slidesControl[0].style[transform] = "translateX(" + (touches.pageX - this.data.touchstartx) + "px)";
  359. }
  360. return e.stopPropagation();
  361. };
  362. Plugin.prototype.play = function(next) {
  363. var $element, currentSlide, slidesContainer,
  364. _this = this;
  365. $element = $(this.element);
  366. this.data = $.data(this);
  367. if (!this.data.playInterval) {
  368. if (next) {
  369. currentSlide = this.data.current;
  370. this.data.direction = "next";
  371. if (this.options.play.effect === "fade") {
  372. this._fade();
  373. } else {
  374. this._slide();
  375. }
  376. }
  377. $.data(this, "playInterval", setInterval((function() {
  378. currentSlide = _this.data.current;
  379. _this.data.direction = "next";
  380. if (_this.options.play.effect === "fade") {
  381. return _this._fade();
  382. } else {
  383. return _this._slide();
  384. }
  385. }), this.options.play.interval));
  386. slidesContainer = $(".slidesjs-container", $element);
  387. if (this.options.play.pauseOnHover) {
  388. slidesContainer.unbind();
  389. slidesContainer.bind("mouseenter", function() {
  390. return _this.stop();
  391. });
  392. slidesContainer.bind("mouseleave", function() {
  393. if (_this.options.play.restartDelay) {
  394. return $.data(_this, "restartDelay", setTimeout((function() {
  395. return _this.play(true);
  396. }), _this.options.play.restartDelay));
  397. } else {
  398. return _this.play();
  399. }
  400. });
  401. }
  402. $.data(this, "playing", true);
  403. $(".slidesjs-play", $element).addClass("slidesjs-playing");
  404. if (this.options.play.swap) {
  405. $(".slidesjs-play", $element).hide();
  406. return $(".slidesjs-stop", $element).show();
  407. }
  408. }
  409. };
  410. Plugin.prototype.stop = function(clicked) {
  411. var $element;
  412. $element = $(this.element);
  413. this.data = $.data(this);
  414. clearInterval(this.data.playInterval);
  415. if (this.options.play.pauseOnHover && clicked) {
  416. $(".slidesjs-container", $element).unbind();
  417. }
  418. $.data(this, "playInterval", null);
  419. $.data(this, "playing", false);
  420. $(".slidesjs-play", $element).removeClass("slidesjs-playing");
  421. if (this.options.play.swap) {
  422. $(".slidesjs-stop", $element).hide();
  423. return $(".slidesjs-play", $element).show();
  424. }
  425. };
  426. Plugin.prototype._slide = function(number) {
  427. var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value,
  428. _this = this;
  429. $element = $(this.element);
  430. this.data = $.data(this);
  431. if (!this.data.animating && number !== this.data.current + 1) {
  432. $.data(this, "animating", true);
  433. currentSlide = this.data.current;
  434. if (number > -1) {
  435. number = number - 1;
  436. value = number > currentSlide ? 1 : -1;
  437. direction = number > currentSlide ? -this.options.width : this.options.width;
  438. next = number;
  439. } else {
  440. value = this.data.direction === "next" ? 1 : -1;
  441. direction = this.data.direction === "next" ? -this.options.width : this.options.width;
  442. next = currentSlide + value;
  443. }
  444. if (next === -1) {
  445. next = this.data.total - 1;
  446. }
  447. if (next === this.data.total) {
  448. next = 0;
  449. }
  450. this._setActive(next);
  451. slidesControl = $(".slidesjs-control", $element);
  452. if (number > -1) {
  453. slidesControl.children(":not(:eq(" + currentSlide + "))").css({
  454. display: "none",
  455. left: 0,
  456. zIndex: 0
  457. });
  458. }
  459. slidesControl.children(":eq(" + next + ")").css({
  460. display: "block",
  461. left: value * this.options.width,
  462. zIndex: 10
  463. });
  464. this.options.callback.start(currentSlide + 1);
  465. if (this.data.vendorPrefix) {
  466. prefix = this.data.vendorPrefix;
  467. transform = prefix + "Transform";
  468. duration = prefix + "TransitionDuration";
  469. timing = prefix + "TransitionTimingFunction";
  470. slidesControl[0].style[transform] = "translateX(" + direction + "px)";
  471. slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
  472. return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
  473. slidesControl[0].style[transform] = "";
  474. slidesControl[0].style[duration] = "";
  475. slidesControl.children(":eq(" + next + ")").css({
  476. left: 0
  477. });
  478. slidesControl.children(":eq(" + currentSlide + ")").css({
  479. display: "none",
  480. left: 0,
  481. zIndex: 0
  482. });
  483. $.data(_this, "current", next);
  484. $.data(_this, "animating", false);
  485. slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
  486. slidesControl.children(":not(:eq(" + next + "))").css({
  487. display: "none",
  488. left: 0,
  489. zIndex: 0
  490. });
  491. if (_this.data.touch) {
  492. _this._setuptouch();
  493. }
  494. return _this.options.callback.complete(next + 1);
  495. });
  496. } else {
  497. return slidesControl.stop().animate({
  498. left: direction
  499. }, this.options.effect.slide.speed, (function() {
  500. slidesControl.css({
  501. left: 0
  502. });
  503. slidesControl.children(":eq(" + next + ")").css({
  504. left: 0
  505. });
  506. return slidesControl.children(":eq(" + currentSlide + ")").css({
  507. display: "none",
  508. left: 0,
  509. zIndex: 0
  510. }, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1));
  511. }));
  512. }
  513. }
  514. };
  515. Plugin.prototype._fade = function(number) {
  516. var $element, currentSlide, next, slidesControl, value,
  517. _this = this;
  518. $element = $(this.element);
  519. this.data = $.data(this);
  520. if (!this.data.animating && number !== this.data.current + 1) {
  521. $.data(this, "animating", true);
  522. currentSlide = this.data.current;
  523. if (number) {
  524. number = number - 1;
  525. value = number > currentSlide ? 1 : -1;
  526. next = number;
  527. } else {
  528. value = this.data.direction === "next" ? 1 : -1;
  529. next = currentSlide + value;
  530. }
  531. if (next === -1) {
  532. next = this.data.total - 1;
  533. }
  534. if (next === this.data.total) {
  535. next = 0;
  536. }
  537. this._setActive(next);
  538. slidesControl = $(".slidesjs-control", $element);
  539. slidesControl.children(":eq(" + next + ")").css({
  540. display: "none",
  541. left: 0,
  542. zIndex: 10
  543. });
  544. this.options.callback.start(currentSlide + 1);
  545. if (this.options.effect.fade.crossfade) {
  546. slidesControl.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed);
  547. return slidesControl.children(":eq(" + next + ")").stop().fadeIn(this.options.effect.fade.speed, (function() {
  548. slidesControl.children(":eq(" + next + ")").css({
  549. zIndex: 0
  550. });
  551. $.data(_this, "animating", false);
  552. $.data(_this, "current", next);
  553. return _this.options.callback.complete(next + 1);
  554. }));
  555. } else {
  556. return slidesControl.children(":eq(" + currentSlide + ")").stop().fadeOut(this.options.effect.fade.speed, (function() {
  557. slidesControl.children(":eq(" + next + ")").stop().fadeIn(_this.options.effect.fade.speed, (function() {
  558. return slidesControl.children(":eq(" + next + ")").css({
  559. zIndex: 10
  560. });
  561. }));
  562. $.data(_this, "animating", false);
  563. $.data(_this, "current", next);
  564. return _this.options.callback.complete(next + 1);
  565. }));
  566. }
  567. }
  568. };
  569. Plugin.prototype._getVendorPrefix = function() {
  570. var body, i, style, transition, vendor;
  571. body = document.body || document.documentElement;
  572. style = body.style;
  573. transition = "transition";
  574. vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
  575. transition = transition.charAt(0).toUpperCase() + transition.substr(1);
  576. i = 0;
  577. while (i < vendor.length) {
  578. if (typeof style[vendor[i] + transition] === "string") {
  579. return vendor[i];
  580. }
  581. i++;
  582. }
  583. return false;
  584. };
  585. return $.fn[pluginName] = function(options) {
  586. return this.each(function() {
  587. if (!$.data(this, "plugin_" + pluginName)) {
  588. return $.data(this, "plugin_" + pluginName, new Plugin(this, options));
  589. }
  590. });
  591. };
  592. })(jQuery, window, document);
  593. }).call(this);