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.

258 lines
6.9 KiB

4 years ago
  1. (function($) {
  2. 'use strict';
  3. /* jQuery MeanMenu */
  4. $('#mobile-menu-active').meanmenu({
  5. meanScreenWidth: "991",
  6. meanMenuContainer: ".mobile-menu-area .mobile-menu",
  7. });
  8. /* cart */
  9. $(".icon-cart").on("click", function() {
  10. $(this).parent().find('.shopping-cart-content').slideToggle('medium');
  11. })
  12. /*--
  13. Header Search Toggle
  14. -----------------------------------*/
  15. var searchToggle = $('.search-toggle');
  16. searchToggle.on('click', function(){
  17. if($(this).hasClass('open')){
  18. $(this).removeClass('open');
  19. $(this).siblings('.search-content').removeClass('open');
  20. }else{
  21. $(this).addClass('open');
  22. $(this).siblings('.search-content').addClass('open');
  23. }
  24. })
  25. /* slider active */
  26. $('.slider-active').owlCarousel({
  27. loop: true,
  28. navText: ['<i class="icon-arrow-left"></i>', '<i class="icon-arrow-right"></i>'],
  29. nav: true,
  30. autoplay: false,
  31. autoplayTimeout: 5000,
  32. animateOut: 'fadeOut',
  33. animateIn: 'fadeIn',
  34. item: 1,
  35. responsive: {
  36. 0: {
  37. items: 1
  38. },
  39. 768: {
  40. items: 1
  41. },
  42. 1000: {
  43. items: 1
  44. }
  45. }
  46. })
  47. /*------ Wow Active ----*/
  48. new WOW().init();
  49. /*----------------------------
  50. Cart Plus Minus Button
  51. ------------------------------ */
  52. var CartPlusMinus = $('.cart-plus-minus');
  53. CartPlusMinus.prepend('<div class="dec qtybutton">-</div>');
  54. CartPlusMinus.append('<div class="inc qtybutton">+</div>');
  55. $(".qtybutton").on("click", function() {
  56. var $button = $(this);
  57. var oldValue = $button.parent().find("input").val();
  58. if ($button.text() === "+") {
  59. var newVal = parseFloat(oldValue) + 1;
  60. } else {
  61. // Don't allow decrementing below zero
  62. if (oldValue > 0) {
  63. var newVal = parseFloat(oldValue) - 1;
  64. } else {
  65. newVal = 1;
  66. }
  67. }
  68. $button.parent().find("input").val(newVal);
  69. });
  70. /*---------------------
  71. price slider
  72. --------------------- */
  73. var sliderrange = $('#slider-range');
  74. var amountprice = $('#amount');
  75. $(function() {
  76. sliderrange.slider({
  77. range: true,
  78. min: 0,
  79. max: 1200,
  80. values: [35, 540],
  81. slide: function(event, ui) {
  82. amountprice.val("$" + ui.values[0] + " - $" + ui.values[1]);
  83. }
  84. });
  85. amountprice.val("$" + sliderrange.slider("values", 0) +
  86. " - $" + sliderrange.slider("values", 1));
  87. });
  88. /*---------------------
  89. shop grid list
  90. --------------------- */
  91. $('.view-mode li a').on('click', function() {
  92. var $proStyle = $(this).data('view');
  93. $('.view-mode li').removeClass('active');
  94. $(this).parent('li').addClass('active');
  95. $('.product-view').removeClass('product-grid product-list').addClass($proStyle);
  96. })
  97. /* counterUp */
  98. $('.count').counterUp({
  99. delay: 10,
  100. time: 1000
  101. });
  102. /* product-dec-slider active */
  103. $('.product-dec-slider').owlCarousel({
  104. loop: true,
  105. autoplay: false,
  106. autoplayTimeout: 5000,
  107. navText: ['<i class="ti-arrow-left"></i>', '<i class="ti-arrow-right"></i>'],
  108. nav: true,
  109. item: 4,
  110. margin: 12,
  111. responsive: {
  112. 0: {
  113. items: 2
  114. },
  115. 576: {
  116. items: 3
  117. },
  118. 768: {
  119. items: 3
  120. },
  121. 1000: {
  122. items: 4
  123. }
  124. }
  125. })
  126. /* related-product-active active */
  127. $('.related-product-active').owlCarousel({
  128. loop: true,
  129. autoplay: false,
  130. autoplayTimeout: 5000,
  131. nav: false,
  132. item: 4,
  133. margin: 30,
  134. responsive: {
  135. 0: {
  136. items: 1
  137. },
  138. 576: {
  139. items: 2
  140. },
  141. 768: {
  142. items: 3
  143. },
  144. 1000: {
  145. items: 4
  146. }
  147. }
  148. })
  149. /*--------------------------
  150. Zoom
  151. ---------------------------- */
  152. $("#zoompro").elevateZoom({
  153. gallery : "gallery",
  154. galleryActiveClass: "active",
  155. zoomWindowWidth:300,
  156. zoomWindowHeight:100,
  157. scrollZoom : false,
  158. zoomType : "inner",
  159. cursor: "crosshair"
  160. });
  161. /*--
  162. Menu Stick
  163. -----------------------------------*/
  164. var header = $('.transparent-bar');
  165. var win = $(window);
  166. win.on('scroll', function() {
  167. var scroll = win.scrollTop();
  168. if (scroll < 200) {
  169. header.removeClass('stick');
  170. } else {
  171. header.addClass('stick');
  172. }
  173. });
  174. /*--------------------------
  175. ScrollUp
  176. ---------------------------- */
  177. $.scrollUp({
  178. scrollText: '<i class="ti-arrow-up"></i>',
  179. easingType: 'linear',
  180. scrollSpeed: 900,
  181. animation: 'fade'
  182. });
  183. /*---------------------
  184. Countdown
  185. --------------------- */
  186. $('[data-countdown]').each(function() {
  187. var $this = $(this),
  188. finalDate = $(this).data('countdown');
  189. $this.countdown(finalDate, function(event) {
  190. $this.html(event.strftime('<span class="cdown day">%-D <p>Days</p></span> <span class="cdown hour">%-H <p>Hour</p></span> <span class="cdown minutes">%M <p>Min</p></span class="cdown second"> <span>%S <p>Sec</p></span>'));
  191. });
  192. });
  193. /*--
  194. Testimonial Slick Carousel
  195. -----------------------------------*/
  196. $('.testimonial-text-slider').slick({
  197. slidesToShow: 1,
  198. slidesToScroll: 1,
  199. arrows: false,
  200. draggable: false,
  201. fade: true,
  202. asNavFor: '.slider-nav',
  203. });
  204. /*--
  205. Testimonial Slick Carousel as Nav
  206. -----------------------------------*/
  207. $('.testimonial-image-slider').slick({
  208. slidesToShow: 3,
  209. slidesToScroll: 1,
  210. asNavFor: '.testimonial-text-slider',
  211. dots: false,
  212. arrows: false,
  213. centerMode: true,
  214. focusOnSelect: true,
  215. centerPadding: '0px',
  216. responsive: [
  217. {
  218. breakpoint: 767,
  219. settings: {
  220. dots: false,
  221. centerPadding: '0px',
  222. }
  223. },
  224. {
  225. breakpoint: 420,
  226. settings: {
  227. autoplay: true,
  228. dots: false,
  229. slidesToShow: 1,
  230. centerMode: false,
  231. }
  232. }
  233. ]
  234. });
  235. })(jQuery);