main.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. /*
  2. Projection by TEMPLATED
  3. templated.co @templatedco
  4. Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
  5. */
  6. (function($) {
  7. // Breakpoints.
  8. skel.breakpoints({
  9. xlarge: '(max-width: 1680px)',
  10. large: '(max-width: 1280px)',
  11. medium: '(max-width: 980px)',
  12. small: '(max-width: 736px)',
  13. xsmall: '(max-width: 480px)'
  14. });
  15. $(function() {
  16. var $window = $(window),
  17. $body = $('body');
  18. // Disable animations/transitions until the page has loaded.
  19. $body.addClass('is-loading');
  20. $window.on('load', function() {
  21. window.setTimeout(function() {
  22. $body.removeClass('is-loading');
  23. }, 100);
  24. });
  25. // Prioritize "important" elements on medium.
  26. skel.on('+medium -medium', function() {
  27. $.prioritize(
  28. '.important\\28 medium\\29',
  29. skel.breakpoint('medium').active
  30. );
  31. });
  32. // Off-Canvas Navigation.
  33. // Navigation Panel.
  34. $(
  35. '<div id="navPanel">' +
  36. $('#nav').html() +
  37. '<a href="#navPanel" class="close"></a>' +
  38. '</div>'
  39. )
  40. .appendTo($body)
  41. .panel({
  42. delay: 500,
  43. hideOnClick: true,
  44. hideOnSwipe: true,
  45. resetScroll: true,
  46. resetForms: true,
  47. side: 'left'
  48. });
  49. // Fix: Remove transitions on WP<10 (poor/buggy performance).
  50. if (skel.vars.os == 'wp' && skel.vars.osVersion < 10)
  51. $('#navPanel')
  52. .css('transition', 'none');
  53. });
  54. })(jQuery);
  55. $( document ).ready(function() {
  56. // When the user scrolls down 20px from the top of the document, show the button
  57. window.onscroll = function() {scrollFunction()};
  58. function scrollFunction() {
  59. if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
  60. document.getElementById("scrolltop").style.display = "block";
  61. } else {
  62. document.getElementById("scrolltop").style.display = "none";
  63. }
  64. }
  65. $("#scrolltop").on("click", function() {
  66. $('html, body').animate( { scrollTop: $('html').offset().top }, 'fast' );
  67. });
  68. $(".btn-bar").removeClass("disabled");
  69. $(".galerie").addClass("galerie-mask");
  70. function cardWidth() {
  71. return $('.galerie .card:first').outerWidth(true)
  72. }
  73. function updateScrollArrow() {
  74. if ($('.galerie').scrollLeft() == 0) {
  75. $('#realisations header .btn-left').addClass("disabled");
  76. }else{
  77. $('#realisations header .btn-left').removeClass("disabled");
  78. }
  79. if (($('.galerie').scrollLeft() + $('.galerie').width() + 5) >= (cardWidth() * $('.galerie').children(".card").length)) {
  80. $('#realisations header .btn-right').addClass("disabled");
  81. }else{
  82. $('#realisations header .btn-right').removeClass("disabled");
  83. }
  84. }
  85. $("#realisations header .btn-left").on("click", function() {
  86. $('.galerie').animate({
  87. scrollLeft: "-=" + cardWidth() + "px"
  88. }, "fast", function(){
  89. updateScrollArrow();
  90. });
  91. });
  92. $("#realisations header .btn-right").on("click", function() {
  93. $('.galerie').animate({
  94. scrollLeft: "+=" + cardWidth() + "px"
  95. }, "fast", function(){
  96. updateScrollArrow();
  97. });
  98. });
  99. $(window).resize(function() {
  100. $(".galerie").scrollLeft(0);
  101. updateScrollArrow();
  102. });
  103. updateScrollArrow();
  104. $('.scroll').on('click', function() {
  105. var page = $(this).attr('href');
  106. $('html, body').animate( { scrollTop: $(page).offset().top }, 'fast' );
  107. return false;
  108. });
  109. $('.galerie img').on('click', function() {
  110. var card = $(this).closest('.card');
  111. var img = $(this);
  112. var caption = card.find('p');
  113. console.log(caption.html());
  114. var modal = $("#img-modal");
  115. modal.find('img').attr("src",img.attr("src"));
  116. modal.find('.caption').html(caption.html());
  117. modal.show();
  118. $("#scrolltop").hide();
  119. });
  120. $('#img-modal').on('click', '.close', function() {
  121. $("#img-modal").hide();
  122. $("#scrolltop").show();
  123. });
  124. });