API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 18th, 2012
100
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.04 KB | None | 0 0
raw download clone embed print report
  1. (function($) {
  2. $(function() {
  3.  
  4. // Manages changes in responsive layout
  5. var layout = (function() {
  6. var callbacks = [];
  7.  
  8. // Container for checking changes in layout width
  9. var $container = $('body > div:eq(0) .container');
  10.  
  11. // Container width: screen width
  12. var steps = {
  13. 960: 960,
  14. 714: 768,
  15. 451: 480,
  16. 294: 320
  17. };
  18. var width = $container.width();
  19.  
  20. // On each step call all callbacks
  21. $(window)
  22. .on('resize', function() {
  23. var current = $container.width();
  24. if (current != width) {
  25. width = current;
  26. $.each(callbacks, function(id, callback) {
  27. callback(steps[width]);
  28. });
  29. }
  30. })
  31. .trigger('resize');
  32.  
  33. // Interface
  34. return {
  35.  
  36. // Returns current step
  37. width: function() {
  38. return steps[width];
  39. },
  40.  
  41. // Register callback
  42. change: function(callback) {
  43. callback(steps[width]);
  44. callbacks.push(callback);
  45. }
  46. };
  47. })();
  48.  
  49. // Header slider
  50. var header = (function() {
  51. var $slider = $('#header');
  52. var $slides = $('li', $slider);
  53. var $arrows = $('.arrow', $slider);
  54. var $left = $arrows.filter('.left');
  55. var $right = $arrows.filter('.right');
  56. var last = $slides.length - 1;
  57. var current = 0;
  58. var interval = null;
  59. var enabled = false;
  60. var playing = false;
  61. var background = false;
  62.  
  63. // Setup
  64. var setup = {
  65. interval: 4000,
  66. speed: 500
  67. };
  68.  
  69. // Go to current slide with crossfade effect
  70. function refresh() {
  71. var $old = $slides.filter(':visible')
  72. var $current = $slides.eq(current);
  73.  
  74. // Swap background
  75. if (!background) {
  76. var url = $current.data('background');
  77. if (url)
  78. $slider.css('background-image', 'url(' + url + ')');
  79. }
  80.  
  81. // Transition
  82. if (!$old.filter($current).length) {
  83. $slides.stop();
  84. $old.fadeOut(setup.speed);
  85. $current.fadeIn(setup.speed);
  86. }
  87.  
  88. // Pause videos
  89. $.each(youtube.get(), function() {
  90. this.pauseVideo();
  91. });
  92. $.each(vimeo.get(), function() {
  93. this.api('pause');
  94. });
  95. };
  96.  
  97. // Interface
  98. var slider = {
  99.  
  100. // Go to slide
  101. set: function(slide) {
  102. slide = Math.max(0, Math.min(last, slide));
  103. if (slide != current) {
  104. current = slide;
  105. refresh();
  106. }
  107. },
  108.  
  109. // Get current slide
  110. get: function() {
  111. return current;
  112. },
  113.  
  114. // Previous slide
  115. left: function() {
  116. this.set(current ? current - 1 : last);
  117. },
  118.  
  119. // Next slide
  120. right: function() {
  121. this.set(current < last ? current + 1 : 0);
  122. },
  123.  
  124. // Start autoslide
  125. start: function() {
  126. this.stop();
  127. interval = setInterval(function() {
  128. if (!playing)
  129. slider.right();
  130. }, setup.interval);
  131. },
  132.  
  133. // Stop autoslide
  134. stop: function() {
  135. clearInterval(interval);
  136. interval = null;
  137. },
  138.  
  139. // Disable slider
  140. disable: function() {
  141. $arrows.hide();
  142. enabled = false;
  143. this.stop();
  144. this.set(0);
  145. },
  146.  
  147. // Enable slider
  148. enable: function() {
  149. if ($slides.length > 1) {
  150. this.start();
  151. enabled = true;
  152. $arrows.show();
  153. }
  154. },
  155.  
  156. // Enable/disable slider or return current state
  157. enabled: function(value) {
  158. if (typeof value == 'undefined')
  159. return enabled;
  160. if (!!value)
  161. this.enable();
  162. else
  163. this.disable();
  164. },
  165.  
  166. // Show/hide slider or return current state
  167. visible: function(value) {
  168. if (typeof value == 'undefined')
  169. return $slider.is(':visible');
  170. else
  171. $slider.toggle(value);
  172. },
  173.  
  174. // Initialisation
  175. init: function(settings) {
  176. youtube.init();
  177. vimeo.init();
  178. background = $slider.css('background-image') != 'none';
  179. refresh();
  180. if ($slides.length <= 1)
  181. return;
  182. setup = $.extend(setup, settings);
  183. $('.arrow.left', $slider).on('click', function() {
  184. slider.left();
  185. });
  186. $('.arrow.right', $slider).on('click', function() {
  187. slider.right();
  188. });
  189. $slider.on({
  190. mouseenter: function() {
  191. if (enabled)
  192. slider.stop();
  193. },
  194. mouseleave: function() {
  195. if (enabled)
  196. slider.start();
  197. }
  198. });
  199. $(document).on('youtubePlayerStateChange vimeoPlayerStateChange', function(event, state) {
  200. playing = state;
  201. });
  202. this.enable();
  203. }
  204. };
  205. return slider;
  206. })();
  207.  
  208.  
  209. // Form validation
  210. var validation = {
  211.  
  212. // Any value
  213. any: function(value) {
  214. return !!$.trim(value).length;
  215. },
  216.  
  217. // E-mail
  218. email: function(email) {
  219. return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
  220. },
  221.  
  222. // Validate form before submit
  223. init: function(form) {
  224. var $form = $(form);
  225. $form.on('submit', function() {
  226. var errors = 0;
  227. $('[data-require]', $form).each(function() {
  228. var $input = $(this);
  229. var value = $.trim($input.val());
  230. value = value == $input.data('placeholder') ? '' : value;
  231. var type = $.trim($input.data('require'));
  232. if (validation[type]) {
  233. var valid = validation[type](value);
  234. $input.toggleClass('error', !valid);
  235. errors += valid ? 0 : 1;
  236. }
  237. });
  238. $('.error', form).effect('shake', {times: 2, distance: 4}, 1300);
  239. return !errors;
  240. });
  241. }
  242. };
  243.  
  244. // Initialisation
  245. var init = {
  246.  
  247. // Menu
  248. menu: function() {
  249. layout.change(function(width) {
  250. if( width < 960 ) {
  251. // Switch menu appearance between list and combo
  252. $('#menu').toggleClass('small', false);
  253. $('#menu .right').toggleClass('combo', false);
  254. var $menu = $('#menu ul');
  255. var height = $menu.height();
  256. var lines = !height ? 0 : Math.round(height / parseInt($menu.css('line-height')));
  257. $('#menu').toggleClass('small', lines > 1);
  258. $('#menu .right').toggleClass('combo', lines > 1);
  259.  
  260. // Set body padding
  261. var padding = $('#menu').height();
  262. $('body').css('padding-top', width >= 768 ? padding - 2 : 0);
  263.  
  264. // Combo
  265. layout.change(function(width) {
  266. var $list = $('#menu ul');
  267. if (width <= 480)
  268. $list.hide();
  269. else
  270. $list.removeAttr('style');
  271. });
  272. }
  273. else {
  274. $('#menu').toggleClass('small', false);
  275. $('#menu .right').toggleClass('combo', false);
  276. }
  277. });
  278.  
  279. // Scroll to section
  280. $('#menu ul a[href*="#"]').on('click', function() {
  281. var $link = $(this);
  282. var top = $(this.hash).offset().top - $('#menu').height();
  283. $('html, body').animate({scrollTop: top}, 500, function() {
  284. $('#menu ul li').removeClass('active');
  285. $link.parent().addClass('active');
  286. });
  287. $('#menu .combo').trigger('click');
  288. return false;
  289. });
  290. },
  291.  
  292. // Waypoints
  293. waypoints: function() {
  294.  
  295. layout.change(function(width) {
  296.  
  297. // Select current section during scrolling
  298. $('#header, #works, #services, #members, #contact').waypoint({
  299. handler: function(event, direction) {
  300. var $item = $('#menu ul li')
  301. .removeClass('active')
  302. .find('[href*="#' + $(this).attr('id') + '"]')
  303. .parent()
  304. .addClass('active');
  305. },
  306. offset: width >= 768 ? $('#menu').height() : 0
  307. });
  308. });
  309. },
  310.  
  311. // Header
  312. header: function() {
  313. if (!$('#header').length)
  314. return;
  315. header.init();
  316. var $fallbacks = $('#header .fallback img');
  317. var $fallback = $([]);
  318. var $slide = $('#header li:eq(0)');
  319. var $content = $('> *', $slide);
  320. layout.change(function(width) {
  321. if ($fallback.length) {
  322. $fallback.remove();
  323. $content.appendTo($slide);
  324. }
  325. if (width == 960) {
  326. header.enabled(true);
  327. header.visible(true);
  328. }
  329. else {
  330. header.enabled(false);
  331. $fallback = $fallbacks.filter('[data-resolution="' + width + '"]');
  332. header.visible(!!$fallback.length);
  333. if ($fallback.length) {
  334. $content.detach();
  335. $fallback
  336. .appendTo($slide)
  337. .css({
  338. marginTop: Math.round(($slide.height() - $fallback.height()) / 2),
  339. marginLeft: Math.round(($slide.width() - $fallback.width()) / 2)
  340. });
  341. }
  342. }
  343.  
  344. });
  345. },
  346.  
  347. // Buttons
  348. buttons: function() {
  349.  
  350. // Required elements
  351. $('a.button').each(function() {
  352. $(this)
  353. .wrapInner('<span class="text" />')
  354. .prepend([
  355. '<span class="normal"></span>',
  356. '<span class="hover"></span>'
  357. ].join(''));
  358. });
  359.  
  360. // Hover effect
  361. $('body').on({
  362. mouseenter: function() {
  363. $('.hover', this).stop().fadeIn(250);
  364. },
  365. mouseleave: function() {
  366. $('.hover', this).stop().fadeOut(250);
  367. }
  368. }, 'a.button');
  369. },
  370.  
  371. // Works list
  372. works: function() {
  373. if (!$('#works').length)
  374. return;
  375. var $list = $('#works .list');
  376. var $cache = $('li', $list.clone());
  377. var steps = {
  378. 960: 12,
  379. 768: 12, //9,
  380. 480: 6,
  381. 320: 3
  382. };
  383. var count = steps[layout.width()];
  384. var $all = $('#works .all');
  385.  
  386. $('#works .menu').on('click', 'li a', function() {
  387.  
  388. // Filter list by selected category
  389. var $link = $(this);
  390. var category = $link.attr('data-category');
  391. var $filter = $([]);
  392. if (category == 'all')
  393. $filter = $cache;
  394. else
  395. $cache.each(function() {
  396. var categories = $(this).attr('data-category').split(',');
  397. if ($.inArray(category, categories) != -1)
  398. $filter = $filter.add(this);
  399. });
  400. $all.toggle($filter.length > count);
  401. $filter = $filter.filter('li:lt(' + count + ')');
  402. $list.quicksand($filter);
  403.  
  404. // Highlight current category in menu
  405. $link
  406. .closest('li')
  407. .addClass('active')
  408. .siblings()
  409. .removeClass('active');
  410.  
  411. // Close combo
  412. $('#works .combo.open').trigger('click');
  413. return false;
  414. });
  415. layout.change(function(width) {
  416.  
  417. // Switch menu appearance between list and combo
  418. $('#works .menu').toggleClass('combo', width <= 480);
  419.  
  420. // Change count of visible works
  421. count = steps[width];
  422. $('li:gt(' + (count - 1) + ')', $list).hide();
  423. $('#works .menu .active a').trigger('click');
  424. $all.toggle(count < 12);
  425. });
  426.  
  427. // Show all works
  428. $('a', $all).on('click', function() {
  429. count = 12;
  430. $('#works .menu .active a').trigger('click');
  431. $all.hide();
  432. return false;
  433. });
  434.  
  435. // Hover
  436. $('#works .list').on({
  437. mouseenter: function() {
  438. var $hover = $('.hover', this);
  439. if (!$hover.length)
  440. $hover = $('<div class="hover" />').appendTo(this);
  441. $hover
  442. .stop()
  443. .hide()
  444. .fadeIn();
  445. },
  446. mouseleave: function() {
  447. var $hover = $('.hover', this);
  448. $hover
  449. .stop()
  450. .fadeOut(250, function() {
  451. $hover.remove();
  452. });
  453. }
  454. }, 'a');
  455.  
  456. // Combo
  457. $('<p />')
  458. .text($('#works .menu li:eq(0)').text())
  459. .prependTo('#works .menu');
  460. $('#works .menu a').on('click', function() {
  461. $(this)
  462. .closest('.combo')
  463. .find('p')
  464. .text($(this).text());
  465. });
  466. layout.change(function(width) {
  467. var $list = $('#works .menu ul');
  468. if (width <= 480)
  469. $list.hide();
  470. else
  471. $list.removeAttr('style');
  472. });
  473. },
  474.  
  475. // Combobox
  476. combo: function() {
  477. $(document).on('click', '.combo', function(event) {
  478. $('.combo.open')
  479. .not(this)
  480. .trigger('click');
  481. var $combo = $(this);
  482. var $list = $('ul', this);
  483. var open = $list.is(':visible');
  484. $list
  485. .stop(true, true)
  486. .fadeToggle(250);
  487. $combo.toggleClass('open', !open);
  488. return $(event.target).is('a');
  489. });
  490. $(document).on('click', function() {
  491. $('.combo.open').trigger('click');
  492. });
  493. },
  494.  
  495. // Services
  496. services: function() {
  497. if (!$('#services').length)
  498. return;
  499.  
  500. // Services carousel
  501. layout.change(function(width) {
  502. $('#services .list .items').carouFredSel(
  503. {
  504. width: '100%',
  505. height: 'auto',
  506. align: width <= 480 ? 'left' : 'center',
  507. prev: '#services .list .left',
  508. next: '#services .list .right',
  509. scroll: {
  510. items: 1,
  511. pauseOnHover: true
  512. },
  513. auto: {
  514. play: width <= 480
  515. },
  516. items: {
  517. visible: width <= 480 ? 1 : 4
  518. }
  519. },
  520. {
  521. wrapper: {
  522. classname: 'wrapper'
  523. }
  524. }
  525. );
  526. $('#services .list li').css('opacity', 1);
  527. });
  528.  
  529. // Services slider
  530. $('#services .menu img').on('mouseenter', function() {
  531. var $item = $(this).closest('li');
  532. $item
  533. .siblings()
  534. .find('.spike:visible')
  535. .stop()
  536. .fadeOut(500);
  537. $item
  538. .find('.spike')
  539. .stop()
  540. .fadeIn(500);
  541. $('#services .list li')
  542. .filter(':visible')
  543. .stop()
  544. .animate({opacity: 0}, 500)
  545. .end()
  546. .eq($item.index())
  547. .stop()
  548. .animate({opacity: 1}, 500);
  549. });
  550. layout.change(function(width) {
  551. if (width == 768)
  552. $('#services .list li').removeAttr('style');
  553. });
  554.  
  555. // Pricing table
  556. if ($('#services .pricing').length)
  557. layout.change(function(width) {
  558. $('#services .pricing .items').carouFredSel(
  559. {
  560. width: '100%',
  561. height: 'auto',
  562. align: width <= 480 ? 'left' : 'center',
  563. prev: '#services .pricing .left',
  564. next: '#services .pricing .right',
  565. scroll: {
  566. items: 1,
  567. pauseOnHover: true
  568. },
  569. auto: {
  570. play: width <= 480
  571. },
  572. items: {
  573. visible: width <= 480 ? 1 : 4
  574. }
  575. },
  576. {
  577. wrapper: {
  578. classname: 'wrapper'
  579. }
  580. }
  581. );
  582. });
  583. },
  584.  
  585. // Team members slider
  586. members: function() {
  587. if (!$('#members').length)
  588. return;
  589. var items = $('#members li').length;
  590. layout.change(function(width) {
  591. $('#members .items').carouFredSel(
  592. {
  593. width: '100%',
  594. height: 'auto',
  595. align: width > 480 ? 'center' : (items == 1 ? 'center' : 'left'),
  596. prev: '#members .left',
  597. next: '#members .right',
  598. items: {
  599. visible: width == 320 ? 1 : 4
  600. },
  601. scroll: {
  602. items: 1,
  603. pauseOnHover: true
  604. },
  605. auto: {
  606. play: width == 320
  607. }
  608. },
  609. {
  610. wrapper: {
  611. classname: 'wrapper'
  612. }
  613. }
  614. );
  615. });
  616. },
  617.  
  618. // Clients slider
  619. clients: function() {
  620. if (!$('#clients').length)
  621. return;
  622. layout.change(function(width) {
  623. $('#clients .items').carouFredSel({
  624. width: '100%',
  625. align: 'left',
  626. prev: '#clients .left',
  627. next: '#clients .right',
  628. items: {
  629. visible: width <= 480 ? 1 : '+1'
  630. },
  631. scroll: {
  632. items: 1,
  633. pauseOnHover: true
  634. }
  635. },
  636. {
  637. wrapper: {
  638. classname: 'carousel'
  639. }
  640. });
  641. });
  642. },
  643.  
  644. // Contact form
  645. contact: function() {
  646. if (!$('#contact').length)
  647. return;
  648.  
  649. // Validation
  650. validation.init('#contact form');
  651.  
  652. // Scroll to contact
  653. $("#contact_us .button").on('click', function() {
  654. $('#menu a[href="#contact"]').trigger('click');
  655. return false;
  656. });
  657.  
  658. // Submit form
  659. $('#contact form .submit').on('click', function() {
  660. $('#contact form').trigger('submit');
  661. return false;
  662. });
  663.  
  664. // Get map position
  665. var $map = $('#contact .map');
  666. var latitude = parseFloat($map.attr('data-latitude').replace(',', '.'));
  667. var longtitude = parseFloat($map.attr('data-longtitude').replace(',', '.'));
  668. var center = new google.maps.LatLng(latitude - 0.003105999999997721, longtitude);
  669.  
  670. // Render map
  671. var map = new google.maps.Map($map[0], {
  672. zoom: 16,
  673. scrollwheel: false,
  674. center: center,
  675.  
  676. mapTypeId: google.maps.MapTypeId.ROADMAP,
  677. mapTypeControl: false,
  678. panControlOptions: {
  679. position: google.maps.ControlPosition.LEFT_CENTER
  680. },
  681. zoomControlOptions: {
  682. position: google.maps.ControlPosition.LEFT_CENTER
  683. },
  684. scaleControlOptions: {
  685. position: google.maps.ControlPosition.LEFT_CENTER
  686. }
  687. });
  688.  
  689. // Center map on window resize
  690. google.maps.event.addDomListener(window, 'resize', function() {
  691. map.setCenter(center);
  692. });
  693.  
  694. // Custom marker
  695. new google.maps.Marker({
  696. draggable: false,
  697. map: map,
  698. shape: {
  699. coord: [63, 0, 68, 1, 72, 2, 75, 3, 77, 4, 80, 5, 81, 6, 83, 7, 85, 8, 86, 9, 88, 10, 89, 11, 90, 12, 91, 13, 93, 14, 94, 15, 95, 16, 95, 17, 96, 18, 97, 19, 98, 20, 99, 21, 99, 22, 100, 23, 101, 24, 101, 25, 102, 26, 103, 27, 103, 28, 104, 29, 104, 30, 104, 31, 105, 32, 105, 33, 106, 34, 106, 35, 106, 36, 107, 37, 107, 38, 107, 39, 107, 40, 108, 41, 108, 42, 108, 43, 108, 44, 108, 45, 109, 46, 109, 47, 109, 48, 109, 49, 109, 50, 109, 51, 109, 52, 109, 53, 109, 54, 109, 55, 109, 56, 109, 57, 109, 58, 109, 59, 109, 60, 109, 61, 109, 62, 109, 63, 108, 64, 108, 65, 108, 66, 108, 67, 108, 68, 107, 69, 107, 70, 107, 71, 107, 72, 106, 73, 106, 74, 106, 75, 105, 76, 105, 77, 104, 78, 104, 79, 104, 80, 103, 81, 103, 82, 102, 83, 101, 84, 101, 85, 100, 86, 99, 87, 99, 88, 98, 89, 97, 90, 96, 91, 95, 92, 95, 93, 94, 94, 93, 95, 91, 96, 90, 97, 89, 98, 88, 99, 86, 100, 85, 101, 83, 102, 82, 103, 80, 104, 77, 105, 75, 106, 72, 107, 68, 108, 63, 109, 46, 109, 41, 108, 37, 107, 34, 106, 32, 105, 29, 104, 27, 103, 26, 102, 24, 101, 23, 100, 21, 99, 20, 98, 19, 97, 18, 96, 16, 95, 15, 94, 14, 93, 14, 92, 13, 91, 12, 90, 11, 89, 10, 88, 10, 87, 9, 86, 8, 85, 8, 84, 7, 83, 6, 82, 6, 81, 5, 80, 5, 79, 5, 78, 4, 77, 4, 76, 3, 75, 3, 74, 3, 73, 2, 72, 2, 71, 2, 70, 2, 69, 1, 68, 1, 67, 1, 66, 1, 65, 1, 64, 0, 63, 0, 62, 0, 61, 0, 60, 0, 59, 0, 58, 0, 57, 0, 56, 0, 55, 0, 54, 0, 53, 0, 52, 0, 51, 0, 50, 0, 49, 0, 48, 0, 47, 0, 46, 1, 45, 1, 44, 1, 43, 1, 42, 1, 41, 2, 40, 2, 39, 2, 38, 2, 37, 3, 36, 3, 35, 3, 34, 4, 33, 4, 32, 5, 31, 5, 30, 5, 29, 6, 28, 6, 27, 7, 26, 8, 25, 8, 24, 9, 23, 10, 22, 10, 21, 11, 20, 12, 19, 13, 18, 14, 17, 14, 16, 15, 15, 16, 14, 18, 13, 19, 12, 20, 11, 21, 10, 23, 9, 24, 8, 26, 7, 28, 6, 29, 5, 32, 4, 34, 3, 37, 2, 41, 1, 46, 0, 63, 0],
  700. type: 'poly'
  701. },
  702. icon: new google.maps.MarkerImage(
  703. template_directory_uri + '/img/marker.png',
  704. new google.maps.Size(110, 110),
  705. new google.maps.Point(0, 0),
  706. new google.maps.Point(55, 110)
  707. ),
  708. position: new google.maps.LatLng(latitude, longtitude)
  709. });
  710. },
  711.  
  712. // Input placeholders
  713. placeholders: function() {
  714. $(document).on({
  715. focus: function() {
  716. var $input = $(this);
  717. if ($.trim($input.val()) == $input.data('placeholder'))
  718. $input
  719. .val('')
  720. .removeClass('placeholder');
  721. },
  722. blur: function() {
  723. var $input = $(this);
  724. if (!$.trim($input.val()))
  725. $input
  726. .val($input.data('placeholder'))
  727. .addClass('placeholder');
  728. },
  729. change: function() {
  730. var $input = $(this);
  731. return $input.val() != $input.data('placeholder');
  732. },
  733. keydown: function(event) {
  734. if (event.which == 27)
  735. $(this)
  736. .val('')
  737. .trigger('keyup')
  738. .trigger('blur');
  739. }
  740. }, '[data-placeholder]');
  741. $('[data-placeholder]').each(function() {
  742. var $input = $(this);
  743. var value = $.trim($input.val());
  744. if (!value || value == $input.data('placeholder'))
  745. $input
  746. .val('')
  747. .trigger('blur');
  748. });
  749. },
  750.  
  751. // Social ico hover
  752. social: function() {
  753. $('a.social').each(function() {
  754. $(this).append('<span class="hover" />');
  755. });
  756. $(document).on({
  757. mouseenter: function() {
  758. $('.hover', this).stop().fadeIn(250);
  759. },
  760. mouseleave: function() {
  761. $('.hover', this).stop().fadeOut(250);
  762. }
  763. }, 'a.social');
  764. },
  765.  
  766. // Work detail page
  767. detail: function() {
  768. function refresh() {
  769. $('#slider .slider, #slider ul, #slider li').removeAttr('style');
  770. $('#slider ul').carouFredSel(
  771. {
  772. prev: '#slider .left',
  773. next: '#slider .right',
  774. responsive: true,
  775. align: 'center',
  776. items: {
  777. visible: 1,
  778. },
  779. scroll: {
  780. fx: 'crossfade',
  781. items: 1,
  782. pauseOnHover: true
  783. },
  784.  
  785. // Workaround due to issues with height after window resize
  786. height: $('#slider li:eq(0) img').height()
  787. },
  788. {
  789. wrapper: {
  790. classname: 'slider'
  791. }
  792. }
  793. );
  794. }
  795.  
  796. $('#slider img').imagesLoaded(function() {
  797. $('#slider').addClass('loaded');
  798. refresh();
  799. $(window).on('resize', refresh);
  800. });
  801. },
  802.  
  803. blog: function() {
  804.  
  805. // Navigation
  806. $('<p />')
  807. .text($('#navigation .menu li:eq(0)').text())
  808. .prependTo('#navigation .menu');
  809. $('#navigation .menu a').on('click', function() {
  810. $(this)
  811. .closest('.combo')
  812. .find('p')
  813. .text($(this).text());
  814. });
  815.  
  816. // Switch menu appearance between list and combo
  817. layout.change(function(width) {
  818. $('#navigation .menu').toggleClass('combo', width <= 480);
  819. var $list = $('#navigation .menu ul');
  820. if (width <= 480)
  821. $list.hide();
  822. else
  823. $list.removeAttr('style');
  824. });
  825.  
  826. // Validation
  827. validation.init('#commentform');
  828.  
  829. // Reply
  830. $('#commentform .send').on('click', function() {
  831. $(this)
  832. .closest('form')
  833. .find('[type="submit"]')
  834. .trigger('click');
  835. });
  836. }
  837. };
  838.  
  839. // Initialization
  840. switch ($('body').attr('id')) {
  841.  
  842. // Home page
  843. case 'home':
  844. init.menu();
  845. init.waypoints();
  846. init.header();
  847. init.buttons();
  848. init.works();
  849. init.combo();
  850. init.services();
  851. init.members();
  852. init.clients();
  853. init.contact();
  854. init.placeholders();
  855. init.social();
  856. break;
  857.  
  858. // Work detail page
  859. case 'detail':
  860. init.buttons();
  861. init.social();
  862. init.detail();
  863. break;
  864.  
  865. // Blog
  866. case 'blog':
  867. init.menu();
  868. init.header();
  869. init.buttons();
  870. init.combo();
  871. init.placeholders();
  872. init.social();
  873. init.blog();
  874. }
  875. });
  876. })(jQuery);
  877.  
  878. // Youtube videos
  879. var youtube = (function($) {
  880.  
  881. // Youtube player references
  882. var players = [];
  883. var count = 0;
  884.  
  885. // Loop through elements with video URL stored in attribute data-youtube and replace them with embedded videos
  886. function embed() {
  887. $('#header [data-youtube]').each(function() {
  888. var $placeholder = $(this);
  889. var playerId = 'youtubePlayer' + count++;
  890. var videoId = youtube.parse($placeholder.data('youtube'));
  891. $placeholder.attr('id', playerId);
  892. new YT.Player(playerId, {
  893. height: '100%',
  894. width: '100%',
  895. videoId: videoId,
  896. playerVars: {
  897. rel: 0
  898. },
  899. events: {
  900. onReady: ready,
  901. onStateChange: stateChange
  902. }
  903. });
  904. });
  905. }
  906.  
  907. // Load youtube video API
  908. function loadApi() {
  909. var script = document.createElement('script');
  910. script.src = "//www.youtube.com/iframe_api";
  911. var firstScript = document.getElementsByTagName('script')[0];
  912. firstScript.parentNode.insertBefore(script, firstScript);
  913. }
  914.  
  915. // Save referrence to youtube player
  916. function ready(event) {
  917. players.push(event.target);
  918. }
  919.  
  920. // On state change trigger event on document object
  921. function stateChange(event) {
  922. var state = (event.data == YT.PlayerState.PLAYING);
  923. $(document).trigger('youtubePlayerStateChange', state);
  924. }
  925.  
  926. // Interface
  927. return {
  928.  
  929. // Get video id from youtube video URL
  930. parse: function(url) {
  931. var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
  932. var match = url.match(regExp);
  933. if (match && match[7].length == 11)
  934. return match[7];
  935. else
  936. throw 'youtube.parse: "Incorrect URL' + (url ? '(' + url + ')' : '') + '"';
  937. },
  938.  
  939. // Get player instances
  940. get: function() {
  941. return players;
  942. },
  943.  
  944. // Youtube videos initialisation
  945. init: function() {
  946. if ($('#header [data-youtube]').length) {
  947. window.onYouTubeIframeAPIReady = function() {
  948. embed();
  949. };
  950. loadApi();
  951. }
  952. }
  953. };
  954. })(jQuery);
  955.  
  956. // Vimeo videos
  957. var vimeo = (function($) {
  958.  
  959. // Vimeo player references
  960. var players = [];
  961. var count = 0;
  962.  
  963. // Loop through elements with video URL stored in attribute data-vimeo and replace them with embedded videos
  964. function embed() {
  965. $('#header [data-vimeo]').each(function() {
  966. var $placeholder = $(this);
  967. var playerId = 'vimeoPlayer' + count++;
  968. var videoId = vimeo.parse($placeholder.data('vimeo'));
  969. $placeholder.attr('id', playerId);
  970. var $player = $('<iframe />').attr({
  971. src: 'http://player.vimeo.com/video/' + videoId + '?api=1&player_id=' + playerId,
  972. id: playerId,
  973. width: '100%',
  974. height: '100%',
  975. frameborder: 0,
  976. webkitAllowFullScreen: 'webkitAllowFullScreen',
  977. mozallowfullscreen: 'mozallowfullscreen',
  978. allowFullScreen: 'allowFullScreen'
  979. });
  980. $placeholder.replaceWith($player);
  981. var player = $f($player[0]);
  982. player.addEvent('ready', function() {
  983. ready(player);
  984. });
  985. });
  986. }
  987.  
  988. // Load vimeo video API
  989. function loadApi(callback) {
  990. $.getScript('http://a.vimeocdn.com/js/froogaloop2.min.js', function() {
  991. callback();
  992. });
  993. }
  994.  
  995. // Set events and save referrence to vimeo player
  996. function ready(player) {
  997. player.addEvent('play', function() {
  998. stateChange(true);
  999. });
  1000. player.addEvent('pause', function() {
  1001. stateChange(false);
  1002. });
  1003. player.addEvent('finish', function() {
  1004. stateChange(false);
  1005. });
  1006. players.push(player);
  1007. }
  1008.  
  1009. // On state change trigger event on document object
  1010. function stateChange(state) {
  1011. $(document).trigger('vimeoPlayerStateChange', state);
  1012. }
  1013.  
  1014. // Interface
  1015. return {
  1016.  
  1017. // Get video id from vimeo video URL
  1018. parse: function(url) {
  1019. var regExp = /^.*(vimeo\.com\/)((channels\/[A-z]+\/)|(groups\/[A-z]+\/videos\/))?([0-9]+)/;
  1020. var match = regExp.exec(url);
  1021. if (match && match[5].length == 8)
  1022. return match[5];
  1023. else
  1024. throw 'vimeo.parse: "Incorrect URL' + (url ? '(' + url + ')' : '') + '"';
  1025. },
  1026.  
  1027. // Get player instances
  1028. get: function() {
  1029. return players;
  1030. },
  1031.  
  1032. // Vimeo videos initialisation
  1033. init: function() {
  1034. if ($('#header [data-vimeo]').length)
  1035. loadApi(function() {
  1036. embed();
  1037. });
  1038. }
  1039. };
  1040. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!