{"id":1120,"date":"2026-01-20T11:04:51","date_gmt":"2026-01-20T11:04:51","guid":{"rendered":"https:\/\/kindpaws.devinprogress.net\/?page_id=1120"},"modified":"2026-01-23T13:58:49","modified_gmt":"2026-01-23T13:58:49","slug":"halereya","status":"publish","type":"page","link":"https:\/\/kindpaws.devinprogress.net\/cs\/halereya\/","title":{"rendered":"Galerie"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1120\" class=\"elementor elementor-1120\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-682d068 e-flex e-con-boxed e-con e-parent\" data-id=\"682d068\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2e3cbfa e-con-full e-flex e-con e-child\" data-id=\"2e3cbfa\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-4d8ffe1 e-con-full e-flex e-con e-child\" data-id=\"4d8ffe1\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d4cc0f6 elementor-icon-list--layout-inline elementor-align-center elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"d4cc0f6\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items elementor-inline-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/kindpaws.devinprogress.net\/cs\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Home<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"9\" height=\"16\" viewbox=\"0 0 9 16\" fill=\"none\"><path d=\"M0.281485 1.60429C-0.093894 1.23723 -0.093751 0.633188 0.281801 0.266305C0.64535 -0.0888529 1.22596 -0.0887661 1.5894 0.2665L8.22633 6.7541C8.34385 6.86829 8.43712 7.00409 8.50076 7.15366C8.5644 7.30324 8.59717 7.46364 8.59717 7.62565C8.59717 7.78766 8.5644 7.94806 8.50076 8.09764C8.43712 8.24722 8.34385 8.38301 8.22633 8.4972L1.58935 14.9882C1.22601 15.3436 0.645356 15.3436 0.281984 14.9883C-0.0930405 14.6216 -0.0930681 14.0181 0.281923 13.6514L6.07567 7.98499C6.27622 7.78886 6.2762 7.46616 6.07564 7.27004L0.281485 1.60429Z\" fill=\"#404040\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Galerie<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ab9b1c6 e-con-full e-flex e-con e-child\" data-id=\"ab9b1c6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-401b9c3 elementor-widget elementor-widget-heading\" data-id=\"401b9c3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Galerie<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c0d59f3 e-con-full e-flex e-con e-child\" data-id=\"c0d59f3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-091fe67 elementor-widget elementor-widget-text-editor\" data-id=\"091fe67\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Okam\u017eiky ze \u017eivota na\u0161ich oc\u00e1sk\u016f na fotografi\u00edch a vide\u00edch<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a387ec1 e-flex e-con-boxed e-con e-parent\" data-id=\"a387ec1\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-1d06c78 e-con-full e-flex e-con e-child\" data-id=\"1d06c78\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-743a838 elementor-widget elementor-widget-html\" data-id=\"743a838\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"custom-art-gallery\">\r\n    <div id=\"gallery-grid\" class=\"gallery-grid\"><\/div>\r\n    <div id=\"gallery-pagination\" class=\"gallery-pagination\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst photoList = [\r\n    \"https:\/\/kindpaws.devinprogress.net\/wp-content\/uploads\/2026\/01\/\u0418\u0440\u043c\u0430.jpg\", \/\/1\r\n    \"https:\/\/kindpaws.devinprogress.net\/wp-content\/uploads\/2026\/01\/\u041d\u0456\u043a\u0430.png\", \/\/2\r\n    \"https:\/\/kindpaws.devinprogress.net\/wp-content\/uploads\/2026\/01\/\u0411\u043b\u0430\u043d\u043a\u0430-1.jpg\", \/\/3\r\n    \"https:\/\/kindpaws.devinprogress.net\/wp-content\/uploads\/2026\/01\/\u0416\u0443\u0436\u0430.png\", \/\/4\r\n    \"https:\/\/kindpaws.devinprogress.net\/wp-content\/uploads\/2026\/01\/\u0414\u0438\u0430\u043d\u0430.jpg\", \/\/5\r\n    \"https:\/\/kindpaws.devinprogress.net\/wp-content\/uploads\/2026\/01\/\u0421\u043e\u043d\u044f.png\", \/\/6\r\n    \"https:\/\/kindpaws.devinprogress.net\/wp-content\/uploads\/2026\/01\/\u0428\u043e\u043d\u0430.jpg\", \/\/7\r\n    \"https:\/\/kindpaws.devinprogress.net\/wp-content\/uploads\/2026\/01\/\u041d\u043e\u0440\u0430.png\", \/\/8\r\n    \"https:\/\/kindpaws.devinprogress.net\/wp-content\/uploads\/2026\/01\/\u0421\u0442\u0435\u0448\u0430.jpg\", \/\/9\r\n    \"https:\/\/kindpaws.devinprogress.net\/wp-content\/uploads\/2026\/01\/\u041b\u044e\u0441\u044f2.jpg\", \/\/10\r\n    \"https:\/\/kindpaws.devinprogress.net\/wp-content\/uploads\/2026\/01\/\u0414\u0436\u0435\u0441\u0456\u043a\u04302.jpg\" \/\/11\r\n];\r\n\r\nconst itemsPerPage = 9;\r\nlet currentPage = 1;\r\n\r\nfunction renderGallery(page) {\r\n    const grid = document.getElementById('gallery-grid');\r\n    grid.innerHTML = '';\r\n    \r\n    const start = (page - 1) * itemsPerPage;\r\n    const end = start + itemsPerPage;\r\n    const pageItems = photoList.slice(start, end);\r\n\r\n    pageItems.forEach((url, index) => {\r\n        const slotIndex = index;\r\n        const slot = document.createElement('div');\r\n        slot.className = `gallery-slot slot-${slotIndex + 1}`;\r\n        \r\n        let content = '';\r\n        \r\n        const imgHtml = `<div class=\"img-wrapper\"><a href=\"${url}\" data-elementor-open-lightbox=\"yes\" data-elementor-lightbox-slideshow=\"gallery-1\"><img decoding=\"async\" src=\"${url}\"><\/a><\/div>`;\r\n        const bigCircle = '<div class=\"circle c-200\"><\/div>';\r\n        const smallCircle = '<div class=\"circle c-114\"><\/div>';\r\n\r\n        switch(slotIndex) {\r\n            case 0:\r\n                content = `<div class=\"group-v\"><div class=\"group-h\" style=\"justify-content: space-between;\">${bigCircle}${smallCircle}<\/div>${imgHtml}<\/div>`; break;\r\n            case 1:\r\n                content = imgHtml; break;\r\n            case 2:\r\n                content = `<div class=\"group-v\">${bigCircle}${imgHtml}<\/div>`; break;\r\n            case 3:\r\n                content = `<div class=\"group-v align-left\">${smallCircle}${imgHtml}<\/div>`; break;\r\n            case 4:\r\n                content = `<div class=\"group-v\" style=\"width: 100%;\">${imgHtml}<div style=\"display: flex; flex-direction: column; width:100%;\"><div style=\"align-self: flex-start;\">${bigCircle}<\/div><div style=\"align-self: flex-end;\">${smallCircle}<\/div><\/div><\/div>`; \r\n                break;\r\n            case 5:\r\n                content = `<div class=\"group-v align-right\">${smallCircle}${imgHtml}<\/div>`; break;\r\n            case 6:\r\n                content = `<div class=\"group-v align-right\">${bigCircle}${imgHtml}<\/div>`; break;\r\n            case 7:\r\n                content = imgHtml; break;\r\n            case 8:\r\n                content = `<div class=\"group-v\">${imgHtml}<div class=\"group-h\">${bigCircle}${smallCircle}<\/div><\/div>`; break;\r\n        }\r\n        \r\n        slot.innerHTML = content;\r\n        grid.appendChild(slot);\r\n    });\r\n    \r\n    renderPagination();\r\n}\r\n\r\nfunction renderPagination() {\r\n    const paginContainer = document.getElementById('gallery-pagination');\r\n    paginContainer.innerHTML = '';\r\n    const totalPages = Math.ceil(photoList.length \/ itemsPerPage);\r\n    \r\n    for (let i = 1; i <= totalPages; i++) {\r\n        const btn = document.createElement('button');\r\n        btn.innerText = i;\r\n        btn.className = (i === currentPage) ? 'active' : '';\r\n        btn.onclick = () => {\r\n            currentPage = i;\r\n            renderGallery(i);\r\n            window.scrollTo({ top: document.getElementById('custom-art-gallery').offsetTop - 100, behavior: 'smooth' });\r\n        };\r\n        paginContainer.appendChild(btn);\r\n    }\r\n}\r\n\r\nrenderGallery(currentPage);\r\n<\/script>\r\n\r\n<style>\r\n.gallery-grid {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 40px;\r\n    padding: 40px 0;\r\n    width: 100%;\r\n    max-width: 1440px;\r\n    margin: 0 auto; \r\n}\r\n\r\n.gallery-slot {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    position: relative;\r\n    flex: 0 0 auto; \r\n}\r\n\r\n.group-v { display: flex; flex-direction: column; align-items: center; gap: 15px; }\r\n.group-h { display: flex; flex-direction: row; gap: 10px; width: 100%; justify-content: center; }\r\n.align-left { align-items: flex-start; }\r\n.align-right { align-items: flex-end; }\r\n\r\n.circle { border-radius: 50%; flex-shrink: 0; }\r\n.c-200 { width: 200px; height: 200px; background-color: #FFCBA1; }\r\n.c-114 { width: 114px; height: 114px; background-color: #FF8C23; }\r\n\r\n.img-wrapper { border-radius: 50%; overflow: hidden; cursor: pointer; transition: transform 0.3s; }\r\n.img-wrapper:hover { transform: scale(1.02); }\r\n\r\n\/* \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 wrapper, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u043d\u0435 \u043b\u043e\u043c\u0430\u043b\u0430 \u0432\u0435\u0440\u0441\u0442\u043a\u0443 *\/\r\n.img-wrapper a { display: block; width: 100%; height: 100%; }\r\n.img-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }\r\n\r\n.slot-1 .img-wrapper { width: 400px; height: 400px; }\r\n.slot-2 .img-wrapper, .slot-8 .img-wrapper { width: 600px; height: 600px; }\r\n.slot-3 .img-wrapper, .slot-5 .img-wrapper, .slot-9 .img-wrapper { width: 321px; height: 321px; }\r\n.slot-4 .img-wrapper, .slot-6 .img-wrapper { width: 488px; height: 488px; }\r\n.slot-7 .img-wrapper { width: 398px; height: 398px; }\r\n\r\n.gallery-pagination {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 15px;\r\n    margin-top: 50px;\r\n}\r\n.gallery-pagination button {\r\n    padding: 10px 18px;\r\n    border: 1px solid #FF8C23;\r\n    background: white;\r\n    color: #FF8C23;\r\n    border-radius: 5px;\r\n    cursor: pointer;\r\n    font-weight: bold;\r\n    transition: 0.3s;\r\n}\r\n.gallery-pagination button.active, .gallery-pagination button:hover {\r\n    background: #FF8C23;\r\n    color: white;\r\n}\r\n\r\n@media (max-width: 1440px) {\r\n    .img-wrapper { \r\n        width: 300px !important; \r\n        height: 300px !important; \r\n    }\r\n    .c-200 { \r\n        width: 80px; \r\n        height: 80px; \r\n    }\r\n    .c-114 { \r\n        width: 50px; \r\n        height: 50px; \r\n    }\r\n    .gallery-grid { gap: 30px; }\r\n    .group-v { gap: 10px; }\r\n    .group-h { gap: 5px; }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0413\u043e\u043b\u043e\u0432\u043d\u0430 \u0413\u0430\u043b\u0435\u0440\u0435\u044f \u0413\u0430\u043b\u0435\u0440\u0435\u044f \u041c\u043e\u043c\u0435\u043d\u0442\u0438 \u0436\u0438\u0442\u0442\u044f \u043d\u0430\u0448\u0438\u0445 \u0445\u0432\u043e\u0441\u0442\u0438\u043a\u0456\u0432 \u0443 \u0444\u043e\u0442\u043e \u0442\u0430 \u0432\u0456\u0434\u0435\u043e<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1120","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/kindpaws.devinprogress.net\/cs\/wp-json\/wp\/v2\/pages\/1120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindpaws.devinprogress.net\/cs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kindpaws.devinprogress.net\/cs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kindpaws.devinprogress.net\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindpaws.devinprogress.net\/cs\/wp-json\/wp\/v2\/comments?post=1120"}],"version-history":[{"count":0,"href":"https:\/\/kindpaws.devinprogress.net\/cs\/wp-json\/wp\/v2\/pages\/1120\/revisions"}],"wp:attachment":[{"href":"https:\/\/kindpaws.devinprogress.net\/cs\/wp-json\/wp\/v2\/media?parent=1120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}