{"id":915,"date":"2026-06-18T18:46:09","date_gmt":"2026-06-18T18:46:09","guid":{"rendered":"https:\/\/photoboothvan.gr\/?page_id=915"},"modified":"2026-09-12T09:50:19","modified_gmt":"2026-09-12T06:50:19","slug":"gallery","status":"publish","type":"page","link":"https:\/\/photoboothvan.gr\/en\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"915\" class=\"elementor elementor-915\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-487d5d3 e-con-full e-flex e-con e-parent\" data-id=\"487d5d3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-872fe58 elementor-widget elementor-widget-html\" data-id=\"872fe58\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"pv-moments-page\" aria-label=\"\u03a3\u03c4\u03b9\u03b3\u03bc\u03ad\u03c2\">\r\n  <div class=\"pv-moments-hero\">\r\n    <h1>\u03a0\u03b1\u03bd\u03c4\u03bf\u03c4\u03b9\u03bd\u03ad\u03c2 \u03b1\u03bd\u03b1\u03bc\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2<\/h1>\r\n\r\n    <p class=\"pv-moments-subtitle\">\r\n      \u0391\u03c5\u03b8\u03cc\u03c1\u03bc\u03b7\u03c4\u03b1 \u03c7\u03b1\u03bc\u03cc\u03b3\u03b5\u03bb\u03b1, \u03c0\u03cc\u03b6\u03b5\u03c2, \u03c6\u03af\u03bb\u03bf\u03b9, \u03b3\u03ad\u03bb\u03b9\u03b1 \u03ba\u03b1\u03b9 \u03bc\u03b9\u03ba\u03c1\u03ad\u03c2 \u03b9\u03c3\u03c4\u03bf\u03c1\u03af\u03b5\u03c2 \u03b1\u03c0\u03cc \u03ba\u03bf\u03c1\u03c5\u03c6\u03b1\u03af\u03b1 events.\r\n    <\/p>\r\n\r\n    <p class=\"pv-moments-instruction\">\r\n      \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03c4\u03b7 \u03b4\u03b5\u03b9\u03c2 \u03bf\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03b7.\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <div class=\"pv-memory-wall\" id=\"pvMemoryWall\"><\/div>\r\n\r\n  <div class=\"pv-load-more-wrap\">\r\n    <button class=\"pv-load-more-btn\" id=\"pvLoadMoreBtn\" type=\"button\">\r\n      Load more\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <div\r\n    class=\"pv-lightbox\"\r\n    id=\"pvLightbox\"\r\n    aria-hidden=\"true\"\r\n    role=\"dialog\"\r\n    aria-label=\"\u03a0\u03c1\u03bf\u03b2\u03bf\u03bb\u03ae \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1\u03c2\"\r\n  >\r\n    <button\r\n      class=\"pv-lightbox-close\"\r\n      type=\"button\"\r\n      aria-label=\"\u039a\u03bb\u03b5\u03af\u03c3\u03b9\u03bc\u03bf\"\r\n    >\r\n      \u00d7\r\n    <\/button>\r\n\r\n    <button\r\n      class=\"pv-lightbox-nav pv-lightbox-prev\"\r\n      type=\"button\"\r\n      aria-label=\"\u03a0\u03c1\u03bf\u03b7\u03b3\u03bf\u03cd\u03bc\u03b5\u03bd\u03b7 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1\"\r\n    >\r\n      \u2039\r\n    <\/button>\r\n\r\n    <figure class=\"pv-lightbox-figure\">\r\n      <img decoding=\"async\" id=\"pvLightboxImage\" src=\"\" alt=\"\">\r\n      <figcaption id=\"pvLightboxCaption\"><\/figcaption>\r\n    <\/figure>\r\n\r\n    <button\r\n      class=\"pv-lightbox-nav pv-lightbox-next\"\r\n      type=\"button\"\r\n      aria-label=\"\u0395\u03c0\u03cc\u03bc\u03b5\u03bd\u03b7 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1\"\r\n    >\r\n      \u203a\r\n    <\/button>\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n\/* DESKTOP DRAG + THROW *\/\r\n\r\n@media (min-width: 1025px) {\r\n  .pv-memory-card.pv-draggable {\r\n    cursor: grab !important;\r\n    touch-action: none;\r\n  }\r\n\r\n  .pv-memory-card.pv-draggable.is-dragging,\r\n  .pv-memory-card.pv-draggable.is-throwing,\r\n  .pv-memory-card.pv-draggable.is-returning {\r\n    animation: none !important;\r\n  }\r\n\r\n  .pv-memory-card.pv-draggable.is-dragging {\r\n    cursor: grabbing !important;\r\n    z-index: 1000 !important;\r\n\r\n    box-shadow:\r\n      0 42px 90px rgba(32, 22, 15, 0.34),\r\n      0 14px 32px rgba(32, 22, 15, 0.18) !important;\r\n  }\r\n\r\n  .pv-memory-card.pv-draggable.is-throwing,\r\n  .pv-memory-card.pv-draggable.is-returning {\r\n    pointer-events: none !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function () {\r\n  const imageBaseUrl =\r\n    \"https:\/\/photoboothvan.gr\/wp-content\/uploads\/2026\/07\/\";\r\n\r\n  const imageExtension = \"jpg\";\r\n  const imagePrefix = \"moments-v2-\";\r\n  const imageSuffix = \"-scaled\";\r\n  const imageCount = 63;\r\n\r\n  function buildImageUrl(index, useScaled) {\r\n    const number = String(index + 1).padStart(2, \"0\");\r\n    const suffix = useScaled ? imageSuffix : \"\";\r\n\r\n    return `${imageBaseUrl}${imagePrefix}${number}${suffix}.${imageExtension}`;\r\n  }\r\n\r\n  \/* \u03a6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b5\u03c2 \u03c0\u03bf\u03c5 \u03b4\u03b5\u03bd \u03b5\u03bc\u03c6\u03b1\u03bd\u03af\u03b6\u03bf\u03bd\u03c4\u03b1\u03b9 *\/\r\n  const excludedImages = new Set([13, 39, 43]);\r\n\r\n  const imageNumbers = Array.from(\r\n    { length: imageCount },\r\n    function (_, index) {\r\n      return index + 1;\r\n    }\r\n  ).filter(function (number) {\r\n    return !excludedImages.has(number);\r\n  });\r\n\r\n  const moments = imageNumbers.map(function (number) {\r\n    const index = number - 1;\r\n\r\n    return {\r\n      src: buildImageUrl(index, true),\r\n      fallback: buildImageUrl(index, false),\r\n      full: buildImageUrl(index, true),\r\n      fullFallback: buildImageUrl(index, false)\r\n    };\r\n  });\r\n\r\n  const baseLayouts = [\r\n    [\"2%\", \"30px\", \"340px\", \"4 \/ 5\", \"-4deg\", \"9\", \"45px\", \"12s\", \"-1s\", \"11px\"],\r\n    [\"25%\", \"125px\", \"455px\", \"16 \/ 10\", \"2deg\", \"5\", \"-20px\", \"14s\", \"-4s\", \"9px\"],\r\n    [\"61%\", \"25px\", \"330px\", \"1 \/ 1\", \"-1.5deg\", \"11\", \"80px\", \"11s\", \"-2s\", \"13px\"],\r\n    [\"78%\", \"185px\", \"345px\", \"4 \/ 5\", \"4deg\", \"7\", \"10px\", \"15s\", \"-6s\", \"10px\"],\r\n    [\"7%\", \"485px\", \"445px\", \"16 \/ 11\", \"3deg\", \"4\", \"-45px\", \"16s\", \"-3s\", \"8px\"],\r\n\r\n    [\"41%\", \"470px\", \"350px\", \"3 \/ 4\", \"-3deg\", \"10\", \"70px\", \"13s\", \"-5s\", \"13px\"],\r\n    [\"67%\", \"590px\", \"420px\", \"1 \/ 1\", \"1.5deg\", \"6\", \"-10px\", \"14s\", \"-7s\", \"9px\"],\r\n    [\"1%\", \"910px\", \"325px\", \"4 \/ 5\", \"-2deg\", \"8\", \"25px\", \"12s\", \"-8s\", \"12px\"],\r\n    [\"24%\", \"955px\", \"395px\", \"5 \/ 4\", \"4.5deg\", \"12\", \"95px\", \"11s\", \"-2.5s\", \"14px\"],\r\n    [\"53%\", \"965px\", \"340px\", \"1 \/ 1\", \"-5deg\", \"3\", \"-55px\", \"17s\", \"-9s\", \"7px\"],\r\n\r\n    [\"74%\", \"1045px\", \"360px\", \"4 \/ 5\", \"2deg\", \"9\", \"35px\", \"13s\", \"-4.5s\", \"11px\"],\r\n    [\"8%\", \"1380px\", \"450px\", \"16 \/ 10\", \"1deg\", \"5\", \"-25px\", \"15s\", \"-10s\", \"8px\"],\r\n    [\"41%\", \"1370px\", \"350px\", \"1 \/ 1\", \"-2.5deg\", \"10\", \"75px\", \"12s\", \"-6.5s\", \"13px\"],\r\n    [\"62%\", \"1490px\", \"465px\", \"16 \/ 11\", \"3.5deg\", \"7\", \"-5px\", \"16s\", \"-3.5s\", \"10px\"],\r\n    [\"3%\", \"1815px\", \"340px\", \"4 \/ 5\", \"-4.5deg\", \"9\", \"55px\", \"13s\", \"-11s\", \"12px\"],\r\n\r\n    [\"27%\", \"1835px\", \"380px\", \"4 \/ 5\", \"2deg\", \"4\", \"-35px\", \"18s\", \"-5.5s\", \"7px\"],\r\n    [\"52%\", \"1930px\", \"375px\", \"1 \/ 1\", \"-1deg\", \"12\", \"90px\", \"11s\", \"-8.5s\", \"14px\"],\r\n    [\"75%\", \"1900px\", \"340px\", \"16 \/ 10\", \"4deg\", \"8\", \"15px\", \"14s\", \"-12s\", \"9px\"],\r\n    [\"13%\", \"2320px\", \"455px\", \"4 \/ 5\", \"-2deg\", \"7\", \"20px\", \"15s\", \"-7.5s\", \"10px\"],\r\n    [\"55%\", \"2350px\", \"420px\", \"1 \/ 1\", \"2.5deg\", \"6\", \"-15px\", \"17s\", \"-13s\", \"8px\"],\r\n\r\n    [\"4%\", \"2740px\", \"360px\", \"4 \/ 5\", \"3deg\", \"9\", \"45px\", \"12s\", \"-3s\", \"10px\"],\r\n    [\"31%\", \"2790px\", \"450px\", \"16 \/ 11\", \"-3.5deg\", \"5\", \"-30px\", \"16s\", \"-9s\", \"8px\"],\r\n    [\"63%\", \"2730px\", \"340px\", \"1 \/ 1\", \"2deg\", \"11\", \"80px\", \"13s\", \"-6s\", \"12px\"],\r\n    [\"78%\", \"2935px\", \"335px\", \"4 \/ 5\", \"-2deg\", \"7\", \"25px\", \"15s\", \"-11s\", \"9px\"],\r\n    [\"11%\", \"3240px\", \"465px\", \"16 \/ 10\", \"2.5deg\", \"4\", \"-40px\", \"17s\", \"-2s\", \"7px\"],\r\n\r\n    [\"44%\", \"3275px\", \"350px\", \"1 \/ 1\", \"-4deg\", \"10\", \"70px\", \"12s\", \"-5s\", \"13px\"],\r\n    [\"67%\", \"3405px\", \"420px\", \"4 \/ 5\", \"3deg\", \"6\", \"-15px\", \"15s\", \"-8s\", \"9px\"],\r\n    [\"1%\", \"3745px\", \"330px\", \"16 \/ 10\", \"-1.5deg\", \"8\", \"20px\", \"14s\", \"-12s\", \"11px\"],\r\n    [\"24%\", \"3810px\", \"400px\", \"1 \/ 1\", \"4deg\", \"12\", \"95px\", \"11s\", \"-4s\", \"14px\"],\r\n    [\"56%\", \"3790px\", \"465px\", \"4 \/ 5\", \"-2.5deg\", \"5\", \"-35px\", \"18s\", \"-10s\", \"7px\"]\r\n  ];\r\n\r\n  const layouts = Array.from(\r\n    { length: moments.length },\r\n    function (_, index) {\r\n      const base =\r\n        baseLayouts[index % baseLayouts.length];\r\n\r\n      const repeat =\r\n        Math.floor(index \/ baseLayouts.length);\r\n\r\n      const y =\r\n        parseInt(base[1], 10) +\r\n        repeat * 4170;\r\n\r\n      return [\r\n        base[0],\r\n        `${y}px`,\r\n        base[2],\r\n        base[3],\r\n        base[4],\r\n        base[5],\r\n        base[6],\r\n        base[7],\r\n        base[8],\r\n        base[9]\r\n      ];\r\n    }\r\n  );\r\n\r\n  const wall =\r\n    document.getElementById(\"pvMemoryWall\");\r\n\r\n  const loadMoreBtn =\r\n    document.getElementById(\"pvLoadMoreBtn\");\r\n\r\n  const lightbox =\r\n    document.getElementById(\"pvLightbox\");\r\n\r\n  const lightboxImage =\r\n    document.getElementById(\"pvLightboxImage\");\r\n\r\n  const lightboxCaption =\r\n    document.getElementById(\"pvLightboxCaption\");\r\n\r\n  const closeBtn =\r\n    document.querySelector(\".pv-lightbox-close\");\r\n\r\n  const nextBtn =\r\n    document.querySelector(\".pv-lightbox-next\");\r\n\r\n  const prevBtn =\r\n    document.querySelector(\".pv-lightbox-prev\");\r\n\r\n  if (\r\n    !wall ||\r\n    !loadMoreBtn ||\r\n    !lightbox ||\r\n    !lightboxImage ||\r\n    !closeBtn ||\r\n    !nextBtn ||\r\n    !prevBtn\r\n  ) {\r\n    return;\r\n  }\r\n\r\n  if (lightboxCaption) {\r\n    lightboxCaption.textContent = \"\";\r\n    lightboxCaption.style.display = \"none\";\r\n  }\r\n\r\n  const tabletMobileQuery =\r\n    window.matchMedia(\"(max-width: 1024px)\");\r\n\r\n  let visibleCount =\r\n    tabletMobileQuery.matches\r\n      ? 5\r\n      : moments.length;\r\n\r\n  let currentIndex = 0;\r\n\r\n  function isTabletOrMobile() {\r\n    return tabletMobileQuery.matches;\r\n  }\r\n\r\n  \/* ========================================\r\n     DESKTOP DRAG \/ THROW\r\n  ======================================== *\/\r\n\r\n  function enableDesktopDrag(card) {\r\n    if (isTabletOrMobile()) {\r\n      return;\r\n    }\r\n\r\n    card.classList.add(\"pv-draggable\");\r\n\r\n    let dragging = false;\r\n    let suppressClick = false;\r\n\r\n    let pointerId = null;\r\n\r\n    let startX = 0;\r\n    let startY = 0;\r\n\r\n    let currentX = 0;\r\n    let currentY = 0;\r\n\r\n    let lastX = 0;\r\n    let lastY = 0;\r\n    let lastTime = 0;\r\n\r\n    let velocityX = 0;\r\n    let velocityY = 0;\r\n\r\n    function dragTransform(x, y) {\r\n      const rotation =\r\n        Math.max(\r\n          -8,\r\n          Math.min(8, x * 0.018)\r\n        );\r\n\r\n      return `\r\n        translate3d(\r\n          ${x}px,\r\n          ${y}px,\r\n          var(--depth)\r\n        )\r\n        rotate(\r\n          calc(var(--r) + ${rotation}deg)\r\n        )\r\n        scale(1.045)\r\n      `;\r\n    }\r\n\r\n    function normalTransform() {\r\n      return `\r\n        translate3d(\r\n          0,\r\n          0,\r\n          var(--depth)\r\n        )\r\n        rotate(var(--r))\r\n        scale(1)\r\n      `;\r\n    }\r\n\r\n    function resetInlineStyles() {\r\n      card.style.removeProperty(\"transform\");\r\n      card.style.removeProperty(\"transition\");\r\n      card.style.removeProperty(\"opacity\");\r\n      card.style.removeProperty(\"will-change\");\r\n\r\n      card.classList.remove(\r\n        \"is-dragging\",\r\n        \"is-throwing\",\r\n        \"is-returning\"\r\n      );\r\n    }\r\n\r\n    function springBack() {\r\n      card.classList.remove(\"is-dragging\");\r\n\r\n      card.style.transition =\r\n        \"transform 520ms cubic-bezier(.22, .9, .3, 1)\";\r\n\r\n      card.style.transform =\r\n        normalTransform();\r\n\r\n      setTimeout(function () {\r\n        resetInlineStyles();\r\n      }, 540);\r\n    }\r\n\r\n    function throwCard() {\r\n      card.classList.remove(\"is-dragging\");\r\n      card.classList.add(\"is-throwing\");\r\n\r\n      const projectedX =\r\n        currentX + velocityX * 220;\r\n\r\n      const projectedY =\r\n        currentY + velocityY * 220;\r\n\r\n      let directionX = projectedX;\r\n      let directionY = projectedY;\r\n\r\n      let magnitude = Math.hypot(\r\n        directionX,\r\n        directionY\r\n      );\r\n\r\n      if (magnitude < 1) {\r\n        directionX =\r\n          currentX >= 0 ? 1 : -1;\r\n\r\n        directionY = 0;\r\n\r\n        magnitude = 1;\r\n      }\r\n\r\n      directionX \/= magnitude;\r\n      directionY \/= magnitude;\r\n\r\n      const throwDistance =\r\n        Math.hypot(\r\n          window.innerWidth,\r\n          window.innerHeight\r\n        ) * 1.25;\r\n\r\n      const targetX =\r\n        currentX +\r\n        directionX * throwDistance;\r\n\r\n      const targetY =\r\n        currentY +\r\n        directionY * throwDistance;\r\n\r\n      const finalRotation =\r\n        Math.max(\r\n          -22,\r\n          Math.min(\r\n            22,\r\n            targetX * 0.01\r\n          )\r\n        );\r\n\r\n      card.style.transition =\r\n        \"transform 620ms cubic-bezier(.18,.75,.25,1), opacity 500ms ease\";\r\n\r\n      card.style.transform = `\r\n        translate3d(\r\n          ${targetX}px,\r\n          ${targetY}px,\r\n          var(--depth)\r\n        )\r\n        rotate(\r\n          calc(var(--r) + ${finalRotation}deg)\r\n        )\r\n        scale(.96)\r\n      `;\r\n\r\n      card.style.opacity = \"0\";\r\n\r\n      \/*\r\n        \u0391\u03c6\u03bf\u03cd \u03c6\u03cd\u03b3\u03b5\u03b9 \u03b1\u03c0\u03cc \u03c4\u03b7\u03bd \u03bf\u03b8\u03cc\u03bd\u03b7,\r\n        \u03b5\u03c0\u03b9\u03c3\u03c4\u03c1\u03ad\u03c6\u03b5\u03b9 \u03b1\u03c0\u03cc \u03ba\u03ac\u03c4\u03c9.\r\n      *\/\r\n      setTimeout(function () {\r\n        card.classList.remove(\"is-throwing\");\r\n        card.classList.add(\"is-returning\");\r\n\r\n        card.style.transition = \"none\";\r\n\r\n        card.style.opacity = \"0\";\r\n\r\n        card.style.transform = `\r\n          translate3d(\r\n            0,\r\n            480px,\r\n            var(--depth)\r\n          )\r\n          rotate(var(--r))\r\n          scale(.94)\r\n        `;\r\n\r\n        requestAnimationFrame(function () {\r\n          requestAnimationFrame(function () {\r\n            card.style.transition =\r\n              \"transform 760ms cubic-bezier(.16,.85,.28,1), opacity 520ms ease\";\r\n\r\n            card.style.opacity = \"1\";\r\n\r\n            card.style.transform =\r\n              normalTransform();\r\n          });\r\n        });\r\n\r\n        setTimeout(function () {\r\n          resetInlineStyles();\r\n        }, 800);\r\n\r\n      }, 720);\r\n    }\r\n\r\n    card.addEventListener(\r\n      \"pointerdown\",\r\n      function (event) {\r\n        if (isTabletOrMobile()) {\r\n          return;\r\n        }\r\n\r\n        if (\r\n          event.pointerType === \"mouse\" &&\r\n          event.button !== 0\r\n        ) {\r\n          return;\r\n        }\r\n\r\n        dragging = true;\r\n        suppressClick = false;\r\n\r\n        pointerId = event.pointerId;\r\n\r\n        startX = event.clientX;\r\n        startY = event.clientY;\r\n\r\n        currentX = 0;\r\n        currentY = 0;\r\n\r\n        lastX = event.clientX;\r\n        lastY = event.clientY;\r\n        lastTime = performance.now();\r\n\r\n        velocityX = 0;\r\n        velocityY = 0;\r\n\r\n        card.classList.add(\"is-dragging\");\r\n\r\n        card.style.willChange =\r\n          \"transform, opacity\";\r\n\r\n        card.style.transition = \"none\";\r\n\r\n        try {\r\n          card.setPointerCapture(pointerId);\r\n        } catch (error) {\r\n          \/* \u0394\u03b5\u03bd \u03c7\u03c1\u03b5\u03b9\u03ac\u03b6\u03b5\u03c4\u03b1\u03b9 fallback *\/\r\n        }\r\n      }\r\n    );\r\n\r\n    card.addEventListener(\r\n      \"pointermove\",\r\n      function (event) {\r\n        if (\r\n          !dragging ||\r\n          event.pointerId !== pointerId\r\n        ) {\r\n          return;\r\n        }\r\n\r\n        const now = performance.now();\r\n\r\n        const deltaTime =\r\n          Math.max(\r\n            1,\r\n            now - lastTime\r\n          );\r\n\r\n        currentX =\r\n          event.clientX - startX;\r\n\r\n        currentY =\r\n          event.clientY - startY;\r\n\r\n        const instantVelocityX =\r\n          (event.clientX - lastX) \/\r\n          deltaTime;\r\n\r\n        const instantVelocityY =\r\n          (event.clientY - lastY) \/\r\n          deltaTime;\r\n\r\n        velocityX =\r\n          velocityX * 0.65 +\r\n          instantVelocityX * 0.35;\r\n\r\n        velocityY =\r\n          velocityY * 0.65 +\r\n          instantVelocityY * 0.35;\r\n\r\n        lastX = event.clientX;\r\n        lastY = event.clientY;\r\n        lastTime = now;\r\n\r\n        const distance =\r\n          Math.hypot(\r\n            currentX,\r\n            currentY\r\n          );\r\n\r\n        if (distance > 8) {\r\n          suppressClick = true;\r\n        }\r\n\r\n        card.style.transform =\r\n          dragTransform(\r\n            currentX,\r\n            currentY\r\n          );\r\n\r\n        event.preventDefault();\r\n      }\r\n    );\r\n\r\n    function finishDrag(event) {\r\n      if (\r\n        !dragging ||\r\n        event.pointerId !== pointerId\r\n      ) {\r\n        return;\r\n      }\r\n\r\n      dragging = false;\r\n\r\n      try {\r\n        card.releasePointerCapture(\r\n          pointerId\r\n        );\r\n      } catch (error) {\r\n        \/* \u0394\u03b5\u03bd \u03c7\u03c1\u03b5\u03b9\u03ac\u03b6\u03b5\u03c4\u03b1\u03b9 fallback *\/\r\n      }\r\n\r\n      const distance =\r\n        Math.hypot(\r\n          currentX,\r\n          currentY\r\n        );\r\n\r\n      const speed =\r\n        Math.hypot(\r\n          velocityX,\r\n          velocityY\r\n        );\r\n\r\n      \/*\r\n        \u03a0\u03c1\u03ad\u03c0\u03b5\u03b9 \u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03ad\u03c7\u03b5\u03b9 \u03c4\u03c1\u03b1\u03b2\u03b7\u03c7\u03c4\u03b5\u03af \u03b1\u03c1\u03ba\u03b5\u03c4\u03ac\r\n        \u03b5\u03af\u03c4\u03b5 \u03bd\u03b1 \u03ad\u03c7\u03b5\u03b9 \u03c0\u03b5\u03c4\u03b1\u03c7\u03c4\u03b5\u03af \u03bc\u03b5 \u03c4\u03b1\u03c7\u03cd\u03c4\u03b7\u03c4\u03b1.\r\n      *\/\r\n      const shouldThrow =\r\n        distance > 135 ||\r\n        speed > 0.72;\r\n\r\n      if (shouldThrow) {\r\n        suppressClick = true;\r\n        throwCard();\r\n      } else {\r\n        springBack();\r\n      }\r\n\r\n      setTimeout(function () {\r\n        suppressClick = false;\r\n      }, 0);\r\n    }\r\n\r\n    card.addEventListener(\r\n      \"pointerup\",\r\n      finishDrag\r\n    );\r\n\r\n    card.addEventListener(\r\n      \"pointercancel\",\r\n      function (event) {\r\n        if (\r\n          !dragging ||\r\n          event.pointerId !== pointerId\r\n        ) {\r\n          return;\r\n        }\r\n\r\n        dragging = false;\r\n        suppressClick = true;\r\n\r\n        springBack();\r\n\r\n        setTimeout(function () {\r\n          suppressClick = false;\r\n        }, 0);\r\n      }\r\n    );\r\n\r\n    \/*\r\n      \u0391\u03bd \u03ad\u03b3\u03b9\u03bd\u03b5 drag, \u03b4\u03b5\u03bd \u03b1\u03bd\u03bf\u03af\u03b3\u03b5\u03b9 \u03c4\u03bf lightbox.\r\n      \u0391\u03bd \u03ad\u03b3\u03b9\u03bd\u03b5 \u03b1\u03c0\u03bb\u03cc click, \u03b1\u03bd\u03bf\u03af\u03b3\u03b5\u03b9 \u03ba\u03b1\u03bd\u03bf\u03bd\u03b9\u03ba\u03ac.\r\n    *\/\r\n    card.addEventListener(\r\n      \"click\",\r\n      function (event) {\r\n        if (suppressClick) {\r\n          event.preventDefault();\r\n          event.stopImmediatePropagation();\r\n        }\r\n      },\r\n      true\r\n    );\r\n  }\r\n\r\n  \/* ========================================\r\n     CREATE CARD\r\n  ======================================== *\/\r\n\r\n  function createCard(item, index) {\r\n    const layout = layouts[index];\r\n\r\n    const card =\r\n      document.createElement(\"button\");\r\n\r\n    card.className =\r\n      \"pv-memory-card\";\r\n\r\n    card.type = \"button\";\r\n    card.dataset.index = index;\r\n\r\n    card.style.setProperty(\r\n      \"--x\",\r\n      layout[0]\r\n    );\r\n\r\n    card.style.setProperty(\r\n      \"--y\",\r\n      layout[1]\r\n    );\r\n\r\n    card.style.setProperty(\r\n      \"--w\",\r\n      layout[2]\r\n    );\r\n\r\n    card.style.setProperty(\r\n      \"--ratio\",\r\n      layout[3]\r\n    );\r\n\r\n    card.style.setProperty(\r\n      \"--r\",\r\n      layout[4]\r\n    );\r\n\r\n    card.style.setProperty(\r\n      \"--z\",\r\n      layout[5]\r\n    );\r\n\r\n    card.style.setProperty(\r\n      \"--depth\",\r\n      layout[6]\r\n    );\r\n\r\n    card.style.setProperty(\r\n      \"--duration\",\r\n      layout[7]\r\n    );\r\n\r\n    card.style.setProperty(\r\n      \"--delay\",\r\n      layout[8]\r\n    );\r\n\r\n    card.style.setProperty(\r\n      \"--float\",\r\n      layout[9]\r\n    );\r\n\r\n    const img =\r\n      document.createElement(\"img\");\r\n\r\n    img.loading = \"lazy\";\r\n    img.decoding = \"async\";\r\n    img.draggable = false;\r\n\r\n    img.src = item.src;\r\n    img.alt = \"\";\r\n\r\n    img.addEventListener(\r\n      \"error\",\r\n      function () {\r\n        if (\r\n          img.src !==\r\n          item.fallback\r\n        ) {\r\n          img.src =\r\n            item.fallback;\r\n        }\r\n      }\r\n    );\r\n\r\n    card.appendChild(img);\r\n\r\n    \/*\r\n      Desktop-only drag.\r\n      Tablet\/mobile \u03b4\u03b5\u03bd \u03c0\u03b1\u03af\u03c1\u03bd\u03bf\u03c5\u03bd \u03ba\u03b1\u03bd listeners.\r\n    *\/\r\n    enableDesktopDrag(card);\r\n\r\n    card.addEventListener(\r\n      \"click\",\r\n      function () {\r\n        openLightbox(index);\r\n      }\r\n    );\r\n\r\n    return card;\r\n  }\r\n\r\n  \/* ========================================\r\n     RENDER\r\n  ======================================== *\/\r\n\r\n  function renderWall() {\r\n    wall.innerHTML = \"\";\r\n\r\n    const itemsToRender =\r\n      isTabletOrMobile()\r\n        ? moments.slice(\r\n            0,\r\n            visibleCount\r\n          )\r\n        : moments;\r\n\r\n    itemsToRender.forEach(\r\n      function (item, index) {\r\n        wall.appendChild(\r\n          createCard(item, index)\r\n        );\r\n      }\r\n    );\r\n\r\n    if (\r\n      isTabletOrMobile() &&\r\n      visibleCount < moments.length\r\n    ) {\r\n      loadMoreBtn.style.display =\r\n        \"inline-flex\";\r\n    } else {\r\n      loadMoreBtn.style.display =\r\n        \"none\";\r\n    }\r\n  }\r\n\r\n  \/* ========================================\r\n     LIGHTBOX\r\n  ======================================== *\/\r\n\r\n  function openLightbox(index) {\r\n    const item =\r\n      moments[index];\r\n\r\n    currentIndex = index;\r\n\r\n    lightboxImage.src =\r\n      item.full;\r\n\r\n    lightboxImage.alt = \"\";\r\n\r\n    lightboxImage.onerror =\r\n      function () {\r\n        if (\r\n          lightboxImage.src !==\r\n          item.fullFallback\r\n        ) {\r\n          lightboxImage.src =\r\n            item.fullFallback;\r\n        }\r\n      };\r\n\r\n    if (lightboxCaption) {\r\n      lightboxCaption.textContent = \"\";\r\n      lightboxCaption.style.display =\r\n        \"none\";\r\n    }\r\n\r\n    lightbox.classList.add(\r\n      \"is-open\"\r\n    );\r\n\r\n    lightbox.setAttribute(\r\n      \"aria-hidden\",\r\n      \"false\"\r\n    );\r\n\r\n    document.body.classList.add(\r\n      \"pv-lightbox-open\"\r\n    );\r\n  }\r\n\r\n  function closeLightbox() {\r\n    lightbox.classList.remove(\r\n      \"is-open\"\r\n    );\r\n\r\n    lightbox.setAttribute(\r\n      \"aria-hidden\",\r\n      \"true\"\r\n    );\r\n\r\n    document.body.classList.remove(\r\n      \"pv-lightbox-open\"\r\n    );\r\n\r\n    setTimeout(function () {\r\n      if (\r\n        !lightbox.classList.contains(\r\n          \"is-open\"\r\n        )\r\n      ) {\r\n        lightboxImage.src = \"\";\r\n      }\r\n    }, 250);\r\n  }\r\n\r\n  function getLightboxLimit() {\r\n    return isTabletOrMobile()\r\n      ? Math.min(\r\n          visibleCount,\r\n          moments.length\r\n        )\r\n      : moments.length;\r\n  }\r\n\r\n  function showNext() {\r\n    const limit =\r\n      getLightboxLimit();\r\n\r\n    currentIndex =\r\n      (currentIndex + 1) %\r\n      limit;\r\n\r\n    openLightbox(\r\n      currentIndex\r\n    );\r\n  }\r\n\r\n  function showPrev() {\r\n    const limit =\r\n      getLightboxLimit();\r\n\r\n    currentIndex =\r\n      (\r\n        currentIndex -\r\n        1 +\r\n        limit\r\n      ) % limit;\r\n\r\n    openLightbox(\r\n      currentIndex\r\n    );\r\n  }\r\n\r\n  \/* ========================================\r\n     LOAD MORE\r\n  ======================================== *\/\r\n\r\n  loadMoreBtn.addEventListener(\r\n    \"click\",\r\n    function () {\r\n      visibleCount =\r\n        Math.min(\r\n          visibleCount + 5,\r\n          moments.length\r\n        );\r\n\r\n      renderWall();\r\n    }\r\n  );\r\n\r\n  \/* ========================================\r\n     LIGHTBOX EVENTS\r\n  ======================================== *\/\r\n\r\n  closeBtn.addEventListener(\r\n    \"click\",\r\n    closeLightbox\r\n  );\r\n\r\n  nextBtn.addEventListener(\r\n    \"click\",\r\n    showNext\r\n  );\r\n\r\n  prevBtn.addEventListener(\r\n    \"click\",\r\n    showPrev\r\n  );\r\n\r\n  lightbox.addEventListener(\r\n    \"click\",\r\n    function (event) {\r\n      if (\r\n        event.target ===\r\n        lightbox\r\n      ) {\r\n        closeLightbox();\r\n      }\r\n    }\r\n  );\r\n\r\n  document.addEventListener(\r\n    \"keydown\",\r\n    function (event) {\r\n      if (\r\n        !lightbox.classList.contains(\r\n          \"is-open\"\r\n        )\r\n      ) {\r\n        return;\r\n      }\r\n\r\n      if (event.key === \"Escape\") {\r\n        closeLightbox();\r\n      }\r\n\r\n      if (\r\n        event.key ===\r\n        \"ArrowRight\"\r\n      ) {\r\n        showNext();\r\n      }\r\n\r\n      if (\r\n        event.key ===\r\n        \"ArrowLeft\"\r\n      ) {\r\n        showPrev();\r\n      }\r\n    }\r\n  );\r\n\r\n  \/* ========================================\r\n     RESPONSIVE CHANGE\r\n  ======================================== *\/\r\n\r\n  tabletMobileQuery.addEventListener(\r\n    \"change\",\r\n    function () {\r\n      visibleCount =\r\n        isTabletOrMobile()\r\n          ? 5\r\n          : moments.length;\r\n\r\n      renderWall();\r\n    }\r\n  );\r\n\r\n  renderWall();\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u03a0\u03b1\u03bd\u03c4\u03bf\u03c4\u03b9\u03bd\u03ad\u03c2 \u03b1\u03bd\u03b1\u03bc\u03bd\u03ae\u03c3\u03b5\u03b9\u03c2 \u0391\u03c5\u03b8\u03cc\u03c1\u03bc\u03b7\u03c4\u03b1 \u03c7\u03b1\u03bc\u03cc\u03b3\u03b5\u03bb\u03b1, \u03c0\u03cc\u03b6\u03b5\u03c2, \u03c6\u03af\u03bb\u03bf\u03b9, \u03b3\u03ad\u03bb\u03b9\u03b1 \u03ba\u03b1\u03b9 \u03bc\u03b9\u03ba\u03c1\u03ad\u03c2 \u03b9\u03c3\u03c4\u03bf\u03c1\u03af\u03b5\u03c2 \u03b1\u03c0\u03cc \u03ba\u03bf\u03c1\u03c5\u03c6\u03b1\u03af\u03b1 events. \u039a\u03ac\u03bd\u03b5 \u03ba\u03bb\u03b9\u03ba \u03c3\u03b5 \u03bc\u03b9\u03b1 \u03c6\u03c9\u03c4\u03bf\u03b3\u03c1\u03b1\u03c6\u03af\u03b1 \u03b3\u03b9\u03b1 \u03bd\u03b1 \u03c4\u03b7 \u03b4\u03b5\u03b9\u03c2 \u03bf\u03bb\u03cc\u03ba\u03bb\u03b7\u03c1\u03b7. Load more \u00d7 \u2039 \u203a<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-915","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/photoboothvan.gr\/en\/wp-json\/wp\/v2\/pages\/915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/photoboothvan.gr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/photoboothvan.gr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/photoboothvan.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/photoboothvan.gr\/en\/wp-json\/wp\/v2\/comments?post=915"}],"version-history":[{"count":29,"href":"https:\/\/photoboothvan.gr\/en\/wp-json\/wp\/v2\/pages\/915\/revisions"}],"predecessor-version":[{"id":1996,"href":"https:\/\/photoboothvan.gr\/en\/wp-json\/wp\/v2\/pages\/915\/revisions\/1996"}],"wp:attachment":[{"href":"https:\/\/photoboothvan.gr\/en\/wp-json\/wp\/v2\/media?parent=915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}