JAVASCRIPT   17

js.js

Guest on 9th June 2021 04:13:28 AM

  1. (function ($) { // by ROKO CB
  2.     $.fn.overlayGallery = function () {
  3.  
  4.         var n = 0, c = 0, $callers = $(), $gal, $galImg;
  5.  
  6.         $galImg = $("<div/>", {
  7.             css: {
  8.                 position: "absolute",
  9.                 left: "50%", top: "50%",
  10.                 transform: "translate(-50%, -50%)",
  11.                 background: "none 50% no-repeat",
  12.                 backgroundSize: "contain",
  13.                 width: "calc(100% - 48px)",
  14.                 height: "calc(100% - 48px)",
  15.                 transition: "0.3s"
  16.             },
  17.             on: {
  18.                 showImage: function () {
  19.                     c = c < 0 ? n - 1 : c % n;
  20.                     var $that = $(this);
  21.                     var src = $callers.eq(c).attr("href");
  22.                     $("<img/>").on("load", function () {
  23.                         $that.css({backgroundImage: "url(" + src + ")"});
  24.                     }).attr("src", src);
  25.                 }
  26.             }
  27.         });
  28.  
  29.         $gal = $("<div/>", {
  30.             append: $galImg,
  31.             appendTo: "body",
  32.             css: {
  33.                 visibility: "hidden",
  34.                 opacity: 0,
  35.                 position: "fixed",
  36.                 zIndex: 999,
  37.                 background: "rgba(0,0,0,0.8)",
  38.                 top: 0,
  39.                 left: 0,
  40.                 width: "100%",
  41.                 height: "100%",
  42.                 transition: "0.3s"
  43.             },
  44.             on: {
  45.                 show: function () {
  46.                     $(this).css({opacity: 1, visibility: "visible"});
  47.                     galw = $(this).width();
  48.                     galh = $(this).height();
  49.                     $galImg.trigger("showImage");
  50.                 },
  51.                 hide: function () {
  52.                     $(this).css({opacity: 0, visibility: "hidden"});
  53.                 },
  54.                 click: function () {
  55.                     $(this).trigger("hide");
  56.                 }
  57.             }
  58.         });
  59.  
  60.         $prev = $("<div/>", {
  61.             id: "__prev",
  62.             css: {
  63.                 left: 12,
  64.                 transform: "rotate(-135deg)"
  65.             }
  66.         });
  67.  
  68.         $next = $("<div/>", {
  69.             id: "__next",
  70.             css: {
  71.                 right: 12,
  72.                 transform: "rotate(45deg)"
  73.             }
  74.         });
  75.  
  76.         $next.add($prev).css({
  77.             width: 20, height: 20,
  78.             position: "absolute",
  79.             top: "50%",
  80.             border: "4px solid #fff",
  81.             borderWidth: "4px 4px 0 0",
  82.             marginTop: -10
  83.         }).on("click", function (e) {
  84.             e.stopPropagation();
  85.             c = this.id === "__next" ? ++c : --c;
  86.             $galImg.trigger("showImage");
  87.         }).appendTo($gal);
  88.  
  89.  
  90.         return this.each(function () {
  91.             var $tmb = $(this).find("a");
  92.  
  93.             $tmb.on("click", function (e) {
  94.                 e.preventDefault(); // Don't follow image link
  95.                 $callers = $tmb;
  96.                 n = $callers.length;
  97.                 c = $callers.index(this);
  98.                 $gal.trigger("show");
  99.             });
  100.         });
  101.  
  102.     };
  103. }(jQuery));
  104.  
  105.  
  106. $("#gallery").overlayGallery();
  107.  
  108.  
  109.  
  110.  
  111. function removeHash() {
  112.     history.pushState(
  113.             "",
  114.             document.title,
  115.             window.location.pathname + window.location.search
  116.             );
  117. }
  118.  
  119. jQuery(function ($) {
  120.  
  121.  
  122.     // /////
  123.     // ::: DATA-HREF @Roko C Buljan
  124.     $(document).on('click', '[data-href]', function (e) {
  125.         e.preventDefault();
  126.         e.stopPropagation();
  127.         console.log($(this).data('href'));
  128.         window.location.href = $(this).data('href');
  129.     });
  130.     $('[data-href]').find("a").on("click", function (e) {
  131.         // If link inside data-href is clicked, allow to follow that link
  132.         e.stopPropagation();
  133.     });
  134.  
  135.     // /////
  136.     // SCROLL TO
  137.     $("[href^='#']").click(function (e) {
  138.         e.preventDefault();
  139.         var hash = $(this).attr("href");
  140.         var targ = $(hash)[0];
  141.         if (hash.length > 1 && targ) { // If is not just href="#"
  142.             //$("#nav-toggler").click(); // Close menu if opened on mobile
  143.             $('html,body').stop().animate({scrollTop: $(hash).offset().top}, 1000, function () {
  144.                 //window.location.hash = hash;
  145.                 removeHash();
  146.             });
  147.         }
  148.     });
  149.  
  150.  
  151.  
  152.     // SUB NAVIGATION MENU
  153.     $(".page-navMenu").on("touchstart", function (e) {
  154.         e.stopPropagation();
  155.     }).find("li").on("touchstart", function (e) {
  156.         e.stopPropagation();
  157.         $(this).closest(".navMenu").removeClass("open");
  158.     });
  159.    
  160.     $(".navMenu-title").on("touchstart", function (e) {
  161.         $(this).parent().find(".navMenu").toggleClass("open");
  162.     });
  163.  
  164.     $("#mainMenu, #mainMenu-icon").on("touchstart", function (e) {
  165.         e.stopPropagation();
  166.     });
  167.  
  168.     $(document).on("touchstart", function () {
  169.         $(".navMenu").removeClass("open");
  170.         $("#mainMenu-toggler").prop("checked", false);
  171.     });
  172.  
  173.  
  174.  
  175.     // CMS tables - Remove strange user styles...
  176.     $(".cms td").removeAttr("bgcolor");
  177.  
  178.  
  179.  
  180.     function getRandomColor(opacity) {
  181.         var color = [];
  182.         for (var i = 0; i < 3; i++) {
  183.             color.push(Math.floor(Math.random() * 255));
  184.         }
  185.         color = color.join(",");
  186.         return "rgba(" + color + ", " + opacity + ")";
  187.     }
  188.  
  189.     $(".article-short-thumb img").each(function () {
  190.         $(this).css({backgroundColor: getRandomColor(0.22)});
  191.     });
  192.  
  193.  
  194.  
  195.  
  196.     // /////
  197.     // ::: AJAX MAILER
  198.     function mailer($form, $infoEl) {
  199.         //console.log("mailer");
  200.  
  201.         $.ajax({
  202.             url: hostaddress + '/mail-send.php',
  203.             type: "POST",
  204.             data: $form.serialize(),
  205.             success: function (info) {
  206.                 var infoArr = JSON.parse(info);
  207.                 var ok = infoArr[0] === "OK";
  208.                 if (ok) {
  209.                     $form[0].reset();
  210.                     //googleTrackConversion(); // CONVERSION
  211.                 }
  212.                 $infoEl.show().text(infoArr[1]).css({
  213.                     background: ok ? "#088" : "red"
  214.                 }).delay(4000).slideUp();
  215.             },
  216.             error: function (a, b, c) {
  217.                 console.log(a, b, c);
  218.             }
  219.         });
  220.  
  221.     }
  222.     $(document).on("click", ".mail-send-submit", function (e) {
  223.         e.preventDefault();
  224.         var $parentForm = $(this).closest("form");
  225.         var $infoEl = $parentForm.find('.mail-send-info');
  226.         mailer($parentForm, $infoEl);
  227.     });
  228.     $(".form-clear").click(function () {
  229.         $(this).closest("form")[0].reset();
  230.     });
  231.  
  232.  
  233.  
  234.  
  235.     // To Top Floating button
  236.     var $toTopBtn = $("#toTopBtn");
  237.     function toggleToTopBtn() {
  238.         $toTopBtn.toggleClass("show", $(window).scrollTop() >= 200);
  239.     }
  240.     $(window).on("load resize scroll", toggleToTopBtn);
  241.  
  242. }); // DOM ready

Raw Paste


Login or Register to edit or fork this paste. It's free.