https://www.zeedoors.com/assets/js/script.js

1$(document).ready(function () {
2  $(".Nav-list").clone().appendTo(".mob-nav-here");
3
4  $(".menu-btn-cstm , .crss-btn").click(function () {
5    $(".mobile-nav-cstm").toggleClass("active");
6  });
7
8  $(".plus-icn").click(function () {
9    $(this).siblings(".sub-menu").toggleClass("active");
10  });
11
12  $(".exOne").click(function () {
13    // Find the child element with class 'exTwo' and add the 'active' class
14    $(this).find(".exTwo").addClass("active");
15  });
16
17  // navbar scticky and scroll top btn
18  $(window).scroll(function () {
19    var sticky = $(".navCustom"),
20      scroll = $(window).scrollTop();
21
22    if (scroll >= 500) {
23      sticky.addClass("pos-sticky");
24      $(".scroll-top-btn").addClass("active");
25    } else {
26      sticky.removeClass("pos-sticky");
27      $(".scroll-top-btn").removeClass("active");
28    }
29  });
30
31  //   scroll top btn
32  $(".scroll-top-btn").click(function () {
33    $("html, body").animate({ scrollTop: 0 }, "slow");
34    return false;
35  });
36
37  //   Slider banner
38  var swiper = new Swiper(".home-banner", {
39    slidesPerView: 1,
40    loop: true,
41    autoplay: true,
42    speed: 1800,
43    autoplay: {
44      delay: 7500,
45      disableOnInteraction: false,
46    },
47    navigation: {
48      nextEl: ".swiper-button-next",
49      prevEl: ".swiper-button-prev",
50    },
51
52    // spaceBetween: 10,
53    // pagination: {
54    //   el: ".swiper-pagination",
55    //   clickable: true,
56    // },
57    // breakpoints: {
58    //   640: {
59    //     slidesPerView: 2,
60    //     spaceBetween: 20,
61    //   },
62    //   768: {
63    //     slidesPerView: 4,
64    //     spaceBetween: 40,
65    //   },
66    //   1024: {
67    //     slidesPerView: 5,
68    //     spaceBetween: 50,
69    //   },
70    // },
71  });
72
73  //   Slider banner
74  var swiper = new Swiper(".product-slider", {
75    slidesPerView: 3,
76    spaceBetween: 10,
77    loop: true,
78    autoplay: true,
79    speed: 1200,
80    autoplay: {
81      delay: 7500,
82      disableOnInteraction: false,
83    },
84    navigation: {
85      nextEl: ".swiper-button-next",
86      prevEl: ".swiper-button-prev",
87    },
88    pagination: {
89      el: ".swiper-pagination",
90      clickable: true,
91    },
92    breakpoints: {
93      500: {
94        slidesPerView: 1,
95        spaceBetween: 20,
96      },
97      850: {
98        slidesPerView: 2,
99        spaceBetween: 30,
100      },
101      1024: {
102        slidesPerView: 3,
103        spaceBetween: 30,
104      },
105    },
106  });
107
108// Product Details Thumb
109var swiper = new Swiper(".productDetailThumb", {
110  direction: "vertical", // Makes the slider vertical
111  spaceBetween: 10,
112  slidesPerView: 3, // Default slides per view
113  freeMode: true,
114  watchSlidesProgress: true,
115  breakpoints: {
116    768: {
117      slidesPerView: 3, // For screens 768px and above
118    },
119    0: {
120      slidesPerView: 3, // For screens below 768px
121    }
122  }
123});
124
125  var swiper2 = new Swiper(".productDetail", {
126    spaceBetween: 10,
127    navigation: {
128      nextEl: ".swiper-button-next",
129      prevEl: ".swiper-button-prev",
130    },
131    thumbs: {
132      swiper: swiper,
133    },
134  });
135
136  //   Brands Slider
137  var swiper = new Swiper(".related-pd-slider", {
138    slidesPerView: 4,
139    spaceBetween: 10,
140    loop: true,
141    autoplay: true,
142    speed: 2500,
143    autoplay: {
144      delay: 1100,
145      disableOnInteraction: false,
146    },
147    navigation: {
148      nextEl: ".swiper-button-next",
149      prevEl: ".swiper-button-prev",
150    },
151    pagination: {
152      el: ".swiper-pagination",
153      clickable: true,
154    },
155    breakpoints: {
156      500: {
157        slidesPerView: 1,
158        spaceBetween: 20,
159      },
160      850: {
161        slidesPerView: 3,
162        spaceBetween: 30,
163      },
164      1024: {
165        slidesPerView: 3,
166        spaceBetween: 30,
167      },
168      1424: {
169        slidesPerView: 4,
170        spaceBetween: 30,
171      },
172    },
173  });
174  
175    // Fancybox Config
176  $('[data-fancybox="gallery"]').fancybox({
177    buttons: ["slideShow", "thumbs", "zoom", "fullScreen", "share", "close"],
178    loop: false,
179    protect: true,
180  });
181
182    // Elements Animation
183    if ($(".wow").length) {
184      var wow = new WOW({
185        boxClass: "wow", // animated element css class (default is wow)
186        animateClass: "animated", // animation css class (default is animated)
187        offset: 150, // distance to the element when triggering the animation (default is 0)
188        mobile: true, // trigger animations on mobile devices (default is true)
189        live: true, // act on asynchronously loaded content (default is true)
190      });
191      wow.init();
192    }
193
194  // zoom product
195  try{
196    
197  const Default = {
198    initialZoom: 3,
199    minZoom: 1.25,
200    maxZoom: 4,
201    zoomSpeed: 0.01,
202  };
203
204  /*
205   * Class definition
206   */
207
208  class Zoomable {
209    constructor(element, config) {
210      this.element = element;
211      this.config = this._mergeConfig(config);
212
213      const { initialZoom, minZoom, maxZoom } = this.config;
214
215      this.zoomed = false;
216      this.initialZoom = Math.max(Math.min(initialZoom, maxZoom), minZ

216oom);
217      this.zoom = this.initialZoom;
218
219      this.img = element.querySelector(".zoomable__img");
220      this.img.draggable = false;
221      this.element.style.setProperty("--zoom", this.initialZoom);
222
223      this._addEventListeners();
224    }
225
226    static get Default() {
227      return Default;
228    }
229
230    _addEventListeners() {
231      this.element.addEventListener("mouseover", () => this._handleMouseover());
232      this.element.addEventListener("mousemove", (evt) =>
233        this._handleMousemove(evt)
234      );
235      this.element.addEventListener("mouseout", () => this._handleMouseout());
236      this.element.addEventListener("wheel", (evt) => this._handleWheel(evt));
237
238      this.element.addEventListener("touchstart", (evt) =>
239        this._handleTouchstart(evt)
240      );
241      this.element.addEventListener("touchmove", (evt) =>
242        this._handleTouchmove(evt)
243      );
244      this.element.addEventListener("touchend", () => this._handleTouchend());
245    }
246
247    _handleMouseover() {
248      if (this.zoomed) {
249        return;
250      }
251
252      this.element.classList.add("zoomable--zoomed");
253
254      this.zoomed = true;
255    }
256
257    _handleMousemove(evt) {
258      if (!this.zoomed) {
259        return;
260      }
261
262      const elPos = this.element.getBoundingClientRect();
263
264      const percentageX = `${
265        ((evt.clientX - elPos.left) * 100) / elPos.width
266      }%`;
267      const percentageY = `${
268        ((evt.clientY - elPos.top) * 100) / elPos.height
269      }%`;
270
271      this.element.style.setProperty("--zoom-pos-x", percentageX);
272      this.element.style.setProperty("--zoom-pos-y", percentageY);
273    }
274
275    _handleMouseout() {
276      if (!this.zoomed) {
277        return;
278      }
279
280      this.element.style.setProperty("--zoom", this.initialZoom);
281      this.element.classList.remove("zoomable--zoomed");
282
283      this.zoomed = false;
284    }
285
286    _handleWheel(evt) {
287      if (!this.zoomed) {
288        return;
289      }
290
291      evt.preventDefault();
292

293      const newZoom = this.zoom + evt.deltaY * (this.config.zoomSpeed * -1);
294      const { minZoom, maxZoom } = this.config;
295
296      this.zoom = Math.max(Math.min(newZoom, maxZoom), minZoom);
297      this.element.style.setProperty("--zoom", this.zoom);
298    }
299
300    _handleTouchstart(evt) {
301      evt.preventDefault();
302
303      this._handleMouseover();
304    }
305
306    _handleTouchmove(evt) {
307      if (!this.zoomed) {
308        return;
309      }
310
311      const elPos = this.element.getBoundingClientRect();
312
313      let percentageX =
314        ((evt.touches[0].clientX - elPos.left) * 100) / elPos.width;
315      let percentageY =
316        ((evt.touches[0].clientY - elPos.top) * 100) / elPos.height;
317
318      percentageX = Math.max(Math.min(percentageX, 100), 0);
319      percentageY = Math.max(Math.min(percentageY, 100), 0);
320
321      this.element.style.setProperty("--zoom-pos-x", `${percentageX}%`);
322      this.element.style.setProperty("--zoom-pos-y", `${percentageY}%`);
323    }
324
325    _handleTouchend(evt) {
326      this._handleMouseout();
327    }
328
329    _mergeConfig(config) {
330      return {
331        ...this.constructor.Default,
332        ...(typeof config === "object" ? config : {}),
333      };
334    }
335  }
336
337  /*
338   * Implementation
339   */
340
341  const zoomables = document.querySelectorAll(".zoomable");
342
343  for (const el of zoomables) {
344    new Zoomable(el);
345  }
346
347  } catch{
348    console.log("Element not available")
349  }
350
351
352  // Accordion
353  try{
354    var accItem = document.getElementsByClassName("accord_item");
355    var accHD = document.getElementsByClassName("accord_title");
356    for (i = 0; i < accHD.length; i++) {
357      accHD[i].addEventListener("click", toggleItem);
358    }
359    function toggleItem() {
360      var itemClass = this.parentNode.className;
361      for (i = 0; i < accItem.length; i++) {
362        accItem[i].className = "accord_item close";
363      }
364      if (itemClass == "accord_item close") {
365        this.parentNode.className = "accord_item open";
366      }
367    }
368  } catch{
369    console.log("Element not found")
370  }
371
372  // Pagination
373  try {
374    const cardsPerPage = 4; // Number of cards to show per page
375    const dataContainer = document.getElementById("data-container");
376    const pagination = document.getElementById("pagination");
377    const prevButton = document.getElementById("prev");
378    const nextButton = document.getElementById("next");
379    const pageNumbers = document.getElementById("page-numbers");
380    const pageLinks = document.querySelectorAll(".page-link");
381
382    const cards = Array.from(dataContainer.getElementsByClassName("card-pd"));
383
384    // Calculate the total number of pages
385    const totalPages = Math.ceil(cards.length / cardsPerPage);
386    let currentPage = 1;
387
388    // Function to display cards for a specific page
389    function displayPage(page) {
390      const startIndex = (page - 1) * cardsPerPage;
391      const endIndex = startIndex + cardsPerPage;
392      cards.forEach((card, index) => {
393        if (index >= startIndex && index < endIndex) {
394          card.style.display = "block";
395        } else {
396          card.style.display = "none";
397        }
398      });
399    }
400
401    // Function to update pagination buttons and page numbers
402    function updatePagination() {
403      pageNumbers.textContent = `Page ${currentPage} of ${totalPages}`;
404      prevButton.disabled = currentPage === 1;
405      nextButton.disabled = currentPage === totalPages;
406      pageLinks.forEach((link) => {
407        const page = parseInt(link.getAttribute("data-page"));
408        link.classList.toggle("active", page === currentPage);
409      });
410    }
411
412    // Event listener for "Previous" button
413    prevButton.addEventListener("click", () => {
414      if (currentPage > 1) {
415        currentPage--;
416        displayPage(currentPage);
417        updatePagination();
418      }
419    });
420
421    // Event listener for "Next" button
422    nextButton.addEventListener("click", () => {
423      if (currentPage < totalPages) {
424        currentPage++;
425        displayPage(currentPage);
426        updatePagination();
427      }
428    });

429
430    // Event listener for page number buttons
431    pageLinks.forEach((link) => {
432      link.addEventListener("click", (e) => {
433        e.preventDefault();
434        const page = parseInt(link.getAttribute("data-page"));
435        if (page !== currentPage) {
436          currentPage = page;
437          displayPage(currentPage);
438          updatePagination();
439        }
440      });
441    });
442
443    // Initial page load
444    displayPage(currentPage);
445    updatePagination();
446  } catch {
447    console.log("Element cant find");
448  }
449
450
451// Disable right-click
452    $(document).on("contextmenu", function () {
453        return false;
454    });
455
456    // Disable specific key combinations
457    $(document).on("keydown", function (event) {
458        // Prevent Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+U (View Source), and F12
459        if (
460            (event.ctrlKey && event.shiftKey && (event.key === "I" || event.key === "J")) || 
461            event.key === "F12" || 
462            (event.ctrlKey && event.key === "U")
463        ) {
464            event.preventDefault();
465        }
466    });
467
468
469});