Refined Coverflow Gallery V2<\/title>\r\n <style>\r\n :root {\r\n --primary-color: #007bff;\r\n --primary-hover-color: #0056b3;\r\n --light-bg-color: #f8f9fa;\r\n --content-bg-color: #ffffff;\r\n --text-color: #333;\r\n --border-color: #e0e0e0;\r\n --shadow-color-light: rgba(0, 0, 0, 0.08);\r\n --shadow-color-medium: rgba(0, 0, 0, 0.12);\r\n --shadow-color-dark: rgba(0, 0, 0, 0.20); \r\n \r\n --soft-light-blue-core: rgba(150, 200, 255, 0.45);\r\n --soft-light-blue-mid: rgba(150, 200, 255, 0.25);\r\n --soft-light-blue-outer: rgba(150, 200, 255, 0.1);\r\n --soft-light-blue-fade: rgba(150, 200, 255, 0);\r\n\r\n --transition-speed: 0.5s;\r\n --transition-timing: ease-out; \r\n --light-animation-speed: calc(var(--transition-speed) * 1.8); \r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n margin: 0;\r\n padding: 0; \r\n background-color: var(--light-bg-color);\r\n color: var(--text-color);\r\n line-height: 1.6;\r\n overflow-x: hidden; \r\n }\r\n\r\n .main-container {\r\n width: 100%;\r\n max-width: 1200px; \r\n margin: 20px auto;\r\n background-color: var(--content-bg-color);\r\n border-radius: 12px;\r\n box-shadow: 0 5px 20px var(--shadow-color-light);\r\n padding: 25px;\r\n box-sizing: border-box;\r\n transition: max-width 0.3s ease-in-out;\r\n }\r\n\r\n .section-navigation {\r\n display: flex;\r\n justify-content: center; \/* Center links if they don't overflow *\/\r\n flex-wrap: nowrap; \r\n overflow-x: auto; \r\n -webkit-overflow-scrolling: touch; \r\n padding: 5px 0 15px 0; \r\n margin-bottom: 25px; \r\n border-bottom: 1px solid var(--border-color);\r\n scrollbar-width: thin; \r\n scrollbar-color: var(--primary-color) var(--light-bg-color); \r\n }\r\n .section-navigation::-webkit-scrollbar {\r\n height: 5px; \r\n }\r\n .section-navigation::-webkit-scrollbar-track {\r\n background: var(--light-bg-color);\r\n border-radius: 3px;\r\n }\r\n .section-navigation::-webkit-scrollbar-thumb {\r\n background-color: var(--primary-color);\r\n border-radius: 3px;\r\n }\r\n\r\n .section-link {\r\n background-color: transparent;\r\n color: var(--primary-color);\r\n border: 2px solid var(--primary-color);\r\n padding: 8px 18px; \r\n margin: 5px 8px; \r\n border-radius: 50px;\r\n cursor: pointer;\r\n font-size: 15px; \r\n font-weight: 500;\r\n transition: background-color 0.3s, color 0.3s;\r\n white-space: nowrap; \r\n flex-shrink: 0; \r\n }\r\n\r\n .section-link:hover, .section-link.active {\r\n background-color: var(--primary-color);\r\n color: white;\r\n }\r\n\r\n .gallery-content-wrapper { display: none; }\r\n .gallery-content-wrapper.active { display: block; }\r\n\r\n .coverflow-area {\r\n padding: 10px 0 20px 0; \r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .coverflow-container {\r\n width: 100%;\r\n height: 320px; \r\n position: relative;\r\n perspective: 1300px; \r\n overflow: hidden; \r\n user-select: none; \r\n -webkit-user-select: none; -ms-user-select: none;\r\n margin-top: 10px; \r\n cursor: grab; \r\n }\r\n .coverflow-container:active { cursor: grabbing; }\r\n\r\n .coverflow-item {\r\n position: absolute;\r\n width: 220px; \r\n height: 260px; \r\n top: calc(50% - 130px); \r\n left: calc(50% - 110px);\r\n background-size: cover;\r\n background-position: center;\r\n border-radius: 10px; \r\n box-shadow: 0 5px 15px var(--shadow-color-medium); \r\n transform-style: preserve-3d; \r\n transition: transform var(--transition-speed) var(--transition-timing),\r\n opacity var(--transition-speed) ease,\r\n box-shadow var(--transition-speed) ease,\r\n z-index 0s linear var(--transition-speed); \r\n opacity: 0.4; \r\n transform: translateX(0) translateZ(-450px) rotateY(0deg) scale(0.65); \r\n z-index: 1;\r\n }\r\n\r\n .coverflow-item.is-center {\r\n opacity: 1;\r\n transform: translateX(0) translateZ(0px) rotateY(0deg) scale(1.15); \r\n z-index: 10;\r\n box-shadow: 0 10px 35px var(--shadow-color-dark); \r\n }\r\n\r\n .coverflow-item.is-center::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%; left: 50%;\r\n width: 180%; \r\n height: 180%;\r\n background: radial-gradient(ellipse at center, \r\n var(--soft-light-blue-core) 0%, \r\n var(--soft-light-blue-mid) 20%, \r\n var(--soft-light-blue-outer) 45%,\r\n var(--soft-light-blue-fade) 70% \r\n );\r\n border-radius: 50%;\r\n transform: translate(-50%, -50%); \r\n z-index: -1; \r\n opacity: 0; \r\n animation: fadeInSoftLight var(--light-animation-speed) ease-out forwards;\r\n }\r\n\r\n @keyframes fadeInSoftLight {\r\n 0% { opacity: 0.1; transform: translate(-50%, -50%) scale(0.6); }\r\n 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(1); } \r\n }\r\n\r\n .coverflow-item.is-left-1 {\r\n opacity: 0.75;\r\n transform: translateX(-150px) translateZ(-100px) rotateY(45deg) scale(0.9);\r\n z-index: 8;\r\n }\r\n .coverflow-item.is-right-1 {\r\n opacity: 0.75;\r\n transform: translateX(150px) translateZ(-100px) rotateY(-45deg) scale(0.9);\r\n z-index: 8;\r\n }\r\n .coverflow-item.is-left-2 {\r\n opacity: 0.6; \r\n transform: translateX(-300px) translateZ(-250px) rotateY(55deg) scale(0.75);\r\n z-index: 6;\r\n }\r\n .coverflow-item.is-right-2 {\r\n opacity: 0.6;\r\n transform: translateX(300px) translateZ(-250px) rotateY(-55deg) scale(0.75);\r\n z-index: 6;\r\n }\r\n .coverflow-item.is-left-3 {\r\n opacity: 0.45;\r\n transform: translateX(-450px) translateZ(-400px) rotateY(65deg) scale(0.6);\r\n z-index: 4;\r\n }\r\n .coverflow-item.is-right-3 {\r\n opacity: 0.45;\r\n transform: translateX(450px) translateZ(-400px) rotateY(-65deg) scale(0.6);\r\n z-index: 4;\r\n }\r\n .coverflow-item.is-hidden { \r\n opacity: 0;\r\n transform: translateX(0px) translateZ(-800px) rotateY(0deg) scale(0.2); \r\n z-index: 0;\r\n pointer-events: none; \r\n }\r\n\r\n .image-popup-modal {\r\n display: none; position: fixed; z-index: 1000; left: 0; top: 0;\r\n width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.85);\r\n justify-content: center; align-items: center; padding: 20px; box-sizing: border-box;\r\n }\r\n .popup-content {\r\n position: relative; background-color: var(--content-bg-color); padding: 15px;\r\n border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.4);\r\n width: auto; max-width: 90%; max-height: 90%;\r\n }\r\n .popup-frame {\r\n border: 6px solid var(--primary-color); padding: 4px; background-color: white;\r\n display: inline-block; border-radius: 4px;\r\n }\r\n .popup-image {\r\n display: block; max-width: calc(90vw - 60px); max-height: calc(90vh - 80px);\r\n border-radius: 2px; object-fit: contain;\r\n }\r\n .popup-close-button {\r\n position: absolute; top: -18px; right: -18px; color: white; background-color: var(--primary-color);\r\n font-size: 26px; font-weight: bold; width: 40px; height: 40px; line-height: 38px;\r\n text-align: center; border-radius: 50%; cursor: pointer; border: 2px solid white;\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: background-color 0.3s, transform 0.2s;\r\n }\r\n .popup-close-button:hover { background-color: var(--primary-hover-color); transform: scale(1.1); }\r\n\r\n @media (min-width: 1600px) {\r\n .main-container { max-width: 1800px; }\r\n .coverflow-container { height: 450px; perspective: 2000px; }\r\n .coverflow-item {\r\n width: 320px; height: 375px; \r\n top: calc(50% - 187.5px); left: calc(50% - 160px);\r\n }\r\n .coverflow-item.is-center { transform: translateX(0) translateZ(0px) rotateY(0deg) scale(1.22); } \r\n .coverflow-item.is-center::after { width: 240%; height: 240%; } \r\n .coverflow-item.is-left-1 { transform: translateX(-220px) translateZ(-180px) rotateY(40deg) scale(0.95); }\r\n .coverflow-item.is-right-1 { transform: translateX(220px) translateZ(-180px) rotateY(-40deg) scale(0.95); }\r\n .coverflow-item.is-left-2 { transform: translateX(-440px) translateZ(-400px) rotateY(50deg) scale(0.82); }\r\n .coverflow-item.is-right-2 { transform: translateX(440px) translateZ(-400px) rotateY(-50deg) scale(0.82); }\r\n .coverflow-item.is-left-3 { transform: translateX(-660px) translateZ(-600px) rotateY(60deg) scale(0.7); opacity: 0.5; }\r\n .coverflow-item.is-right-3 { transform: translateX(660px) translateZ(-600px) rotateY(-60deg) scale(0.7); opacity: 0.5; }\r\n }\r\n\r\n @media (min-width: 1200px) and (max-width: 1599px) {\r\n .main-container { max-width: 1400px; } \r\n .coverflow-container { height: 400px; perspective: 1600px; }\r\n .coverflow-item {\r\n width: 280px; height: 330px; \r\n top: calc(50% - 165px); left: calc(50% - 140px);\r\n }\r\n .coverflow-item.is-center { transform: translateX(0) translateZ(0px) rotateY(0deg) scale(1.2); } \r\n .coverflow-item.is-center::after { width: 220%; height: 220%; } \r\n .coverflow-item.is-left-1 { transform: translateX(-200px) translateZ(-150px) rotateY(40deg) scale(0.92); }\r\n .coverflow-item.is-right-1 { transform: translateX(200px) translateZ(-150px) rotateY(-40deg) scale(0.92); }\r\n .coverflow-item.is-left-2 { transform: translateX(-400px) translateZ(-350px) rotateY(50deg) scale(0.8); opacity: 0.7; }\r\n .coverflow-item.is-right-2 { transform: translateX(400px) translateZ(-350px) rotateY(-50deg) scale(0.8); opacity: 0.7; }\r\n .coverflow-item.is-left-3 { transform: translateX(-600px) translateZ(-550px) rotateY(60deg) scale(0.65); opacity: 0.55; }\r\n .coverflow-item.is-right-3 { transform: translateX(600px) translateZ(-550px) rotateY(-60deg) scale(0.65); opacity: 0.55; }\r\n }\r\n\r\n @media (max-width: 768px) { \/* Base styles effectively target 769px-1199px *\/\r\n .coverflow-container { height: 260px; perspective: 1000px; }\r\n .coverflow-item {\r\n width: 180px; height: 210px; \r\n top: calc(50% - 105px); left: calc(50% - 90px);\r\n }\r\n .coverflow-item.is-center { transform: translateX(0) translateZ(0px) rotateY(0deg) scale(1.12); } \r\n .coverflow-item.is-center::after { width: 170%; height: 170%; } \r\n .coverflow-item.is-left-1 { transform: translateX(-115px) translateZ(-80px) rotateY(38deg) scale(0.85); }\r\n .coverflow-item.is-right-1 { transform: translateX(115px) translateZ(-80px) rotateY(-38deg) scale(0.85); }\r\n .coverflow-item.is-left-2 { transform: translateX(-230px) translateZ(-200px) rotateY(48deg) scale(0.68); opacity: 0.6; }\r\n .coverflow-item.is-right-2 { transform: translateX(230px) translateZ(-200px) rotateY(-48deg) scale(0.68); opacity: 0.6; }\r\n .coverflow-item.is-left-3, .coverflow-item.is-right-3 { opacity: 0; pointer-events: none; } \r\n }\r\n\r\n @media (max-width: 480px) {\r\n .main-container { padding: 15px; }\r\n .section-navigation{display: flex; flex-wrap: wrap;}\r\n .section-link { font-size: 16px; padding: 6px 12px; margin: 5px; }\r\n .coverflow-container { height: 267px; }\r\n .coverflow-item {\r\n width: 200px;\r\n height: 230px;\r\n top: calc(50% - 115px);\r\n left: calc(50% - 100px);\r\n }\r\n .coverflow-item.is-center { transform: translateX(0) translateZ(0px) rotateY(0deg) scale(1.1); }\r\n .coverflow-item.is-center::after {\r\n width: 160%; height: 160%; \r\n background: radial-gradient(ellipse at center, \r\n var(--soft-light-blue-core) 0%, \r\n var(--soft-light-blue-mid) 15%, \r\n var(--soft-light-blue-outer) 35%,\r\n var(--soft-light-blue-fade) 60% \r\n );\r\n }\r\n .coverflow-item.is-left-1 { transform: translateX(-90px) translateZ(-70px) rotateY(35deg) scale(0.82); }\r\n .coverflow-item.is-right-1 { transform: translateX(90px) translateZ(-70px) rotateY(-35deg) scale(0.82); }\r\n .coverflow-item.is-left-2, .coverflow-item.is-right-2,\r\n .coverflow-item.is-left-3, .coverflow-item.is-right-3 { \r\n opacity: 0; pointer-events: none; \r\n transform: translateX(0px) translateZ(-300px) rotateY(0deg) scale(0.2); \r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"main-container\">\r\n <nav class=\"section-navigation\">\r\n <button class=\"section-link active\" data-section=\"sectionCoverflow2\">Kitchens and interior decoration<\/button>\r\n <\/nav>\r\n\r\n <div class=\"galleries-container\">\r\n <div id=\"sectionCoverflow1\" class=\"gallery-content-wrapper active\">\r\n <div class=\"coverflow-area\">\r\n <div class=\"coverflow-container\" data-current-center-index=\"0\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"sectionCoverflow2\" class=\"gallery-content-wrapper\">\r\n <div class=\"coverflow-area\">\r\n <div class=\"coverflow-container\" data-current-center-index=\"0\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div id=\"sectionCoverflow3\" class=\"gallery-content-wrapper\">\r\n <div class=\"coverflow-area\">\r\n <div class=\"coverflow-container\" data-current-center-index=\"0\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"imagePopup\" class=\"image-popup-modal\">\r\n <div class=\"popup-content\">\r\n <span class=\"popup-close-button\" title=\"Close\">×<\/span>\r\n <div class=\"popup-frame\">\r\n <img decoding=\"async\" id=\"popupImageElement\" src=\"\" alt=\"Popup Image\" class=\"popup-image\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n const sectionLinks = document.querySelectorAll('.section-link');\r\n const galleryWrappers = document.querySelectorAll('.gallery-content-wrapper');\r\n const imagePopupModal = document.getElementById('imagePopup');\r\n const popupImageElement = document.getElementById('popupImageElement');\r\n const popupCloseButton = document.querySelector('.popup-close-button');\r\n\r\n const galleriesData = { \r\n sectionCoverflow2: [ \/\/ Corresponds to your first section\/category button\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/0a7cd626-6e24-4a3d-b119-a0a63db62705.jpg', alt: 'A descriptive caption for photo 1' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/00f57602-a0e4-4296-a8e3-483fbbddbfbe.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/0c5bb091-4e77-4c5f-8bb5-76b8e0e278e2.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/0e2f771e-f84c-4abe-bf55-03c62622673d.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/0e56f2ef-d240-46ed-a3db-a9b87f83ca3d.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/0e151b3e-12be-49d2-89b2-220a54254261.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/1e261c2d-ec80-43b1-abf4-fbe8cd05c466.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/2bcc7ec5-a393-4172-a304-4ac3e0ca9c8e.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/2cab4724-e6b6-41a5-917a-a11b584fe575.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/2fd04cea-baa6-4e0b-be02-45dec9d9c211.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/03cc32c3-7a98-488e-9f98-592019175c59.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/3a2d8692-bac3-4243-be92-9dd6cc9f7d5b.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/3c6faa52-9e0d-4a65-9f96-c7e1230bebc9.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/3c042ce7-c127-4197-b82a-fd0ba6d3a1b5.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/3d5ba34e-3be2-46cf-befc-948e75a4b649.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/3e9ce6d1-7506-4581-9416-2327f082021c.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/4b031794-773d-4f5b-8422-65dbbadae577.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/4e940f6c-09fc-4fb3-89e6-8fa44393369f.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/4f78ede9-7675-4914-8e73-b6fdbb455dac.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/5ab6dbdf-190a-43a8-9457-75b45e950a76.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/5d039d02-9c77-40ae-816e-811dcfe9e811.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/006b5d17-fbde-48f0-ae8b-bcaf73850a7e.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/6c4275f0-e65a-4547-a261-c995e73acb61.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/6e040516-a743-47d9-a703-f68d1a9cb5ff.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/7bc0a4d8-3178-403f-b6fc-fbd562642f3c.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/7de1c148-32ea-4474-a4f8-251a960fbcdc.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/7e49a066-a7a9-4949-8266-fb74777f7b57.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/008cc7b4-c160-4b9d-9541-742aa3138b14.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/8b8e046d-92c6-4153-a7e1-ebc0b61b53cc.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/8bdb3461-7b09-475b-b4d7-1669a2486a90.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/8cc8fb68-e0b2-45c3-bbdb-4d370d90a430.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/8f73746f-ea67-4526-af3c-b29faf57471a.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/9a7d1726-af3a-4828-ad26-2ef44e7e0ec0.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/9c2678a7-9ed5-43f7-a781-589e5533fcfe.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/9e0bc4fd-3d9b-4c30-9a94-733922d96501.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/9f5fff8c-670f-428d-b750-32e34f8570af.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/14bc2915-a967-4ab7-8bc4-ed2ca274fa37.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/20b2fbf9-2f8f-4da7-a5ed-cb41a633a0b7.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/26bc28ec-4618-4266-b32f-5f11245d3071.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/30a7d78c-1171-4042-9f65-15d7b5408526.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/30b23dcb-1ca3-47d0-af25-20b7945c4e55.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/32cb177f-d0ad-469a-a32d-abcd0153e5ce.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/37c1732e-1515-4bf0-8c2a-5067330ed336.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/42edd5d6-24bd-4afc-9ddf-7f56faded1a1.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/62cb0004-dd58-4a1d-b865-adb68e11d4ee.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/73fb2b34-95a5-4524-8a8e-950a1e86218f.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/93e98806-9cf1-427d-a947-4e9605d288b2.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/095c7167-dd7a-4c69-a365-1518e3767600.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/95dca60f-8b6d-4b04-a0c7-3ce389580c67.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/99c27e3f-b44b-4c76-8dcb-29efe5a817cb.jpg', alt: 'Integrated interior decor' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/277ac6ec-8728-4f3e-ad92-206fac78e6bb.jpg', alt: 'A descriptive caption for photo 1' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/497c9bdb-a2bb-4c84-8177-ab6fd421623a.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/545e726b-53c5-4344-a9d3-d004e735b115.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/557c394f-30a2-4d2b-b3c4-2f8d33c803d9.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/690d4fd8-a81c-4e62-b863-9d3478d949bf.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/794cbc0d-97e7-4330-80cd-6fd87cbfa92f.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/819d83c1-1d5e-4fb5-b9dc-9a4d278c297a.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/925a76fd-400a-4d62-b960-225489400817.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/1216a64b-8c41-4d2e-bf0b-a97f36dac55b.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/2227f46e-f061-46bc-8b5c-2f4d252ab8fd.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/2282e683-9808-4965-9cd1-7ab40806a054.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/2708bede-747f-49bf-909a-29eff3e42250.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/3578cf85-9fc7-42d3-9dbc-51be798ff285.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/5425b200-4260-4b49-9056-c9f8f4fb8d6a.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/09505c1b-a756-408c-997e-8cec47b7ad00.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/45564af5-6ea2-4b68-9648-ec56a8349ce5.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/69437ab8-f1d9-4442-b9b4-55bbe65bd6cc.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/76947a0f-6452-44a0-bea0-fa57e51984df.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/77179f8f-936c-443e-9151-ef2160de6aae.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/372823c7-30f5-43c4-94d3-b9202949e997.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/597144df-b9a6-4020-a5eb-1a37fc747fa3.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/1277358c-1de3-44db-bad2-6609e346faaa.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/6623960b-ae7d-40fe-95a3-835e8021fb2a.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/8273324f-0b21-4293-8c5d-d5c156ca1a90.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/37535600-914c-4acd-95c6-b1ef100d6d0b.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/98750125-0543-4327-969c-1025f7a7555e.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/a2d18835-46f4-4456-a286-3f6ea3c320f3.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/a4c1bb60-7c06-4e4d-b703-8e9ab91f217d.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/a17bbe2c-2246-4b0c-a383-25b431b26451.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/a55ce268-ab74-40c0-8d58-dfc571e47a29.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/a217aadc-2150-42f2-b7c5-0e7107a8fd1c.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/a7120ae8-e7c3-4584-96ab-1c4a88ee1a85.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/ac610724-dd9b-4e22-a6e5-b4c4818c0693.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/acfaf15e-ae9d-4e3b-8282-72468af74073.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/b2bd6309-fa05-4cec-9e26-2827f5311054.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/b6d6c055-9921-4360-9d12-07a8204684c7.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/b10f092d-5402-45ff-afd6-bdb6c267e420.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/b31a88a9-5cef-44f5-ba35-834acaf52757.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/b2702431-7bc1-4772-a535-81070fbc5296.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/ba34c34a-5eb7-4e09-b93f-48c6aded0d6e.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/c7f30c8b-b8ad-4dc8-abda-f99233b7992c.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/c731ed8b-5324-4220-be31-20138673d01d.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/c4810218-7a88-4670-a92f-2515efe04c9e.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/cce1f5a1-4ba9-45ba-ae8f-c38ff5c2607a.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/d5c03910-2499-402b-8ded-76a3137ba8c5.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/d48abaea-65c9-4652-b97f-642a2d23ed32.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/d817e4b9-5d39-4ec9-ab71-af7f38164ebe.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/d2019c27-e57e-4032-9909-239d6e52d6be.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/d945842e-52ac-4759-9b56-9e680654f97f.jpg', alt: 'Integrated interior decor' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/e6f4b43f-e387-4f31-9b4b-98a999df96cd.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/e9b76d86-e5d7-4065-a7b5-e7fd0152f5c5.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/e55c3b6b-0b2a-4e13-83d4-90035d61352e.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/e71ff2d6-17c9-45bd-821b-47764292d211.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/e1692a08-5518-4e1c-95f3-ef6f29d4b1db.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/e793717b-de6a-4b7f-a257-807784eac330.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/ec10a8f2-c9f2-4823-a768-ec284fa52461.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/ef231c96-d90d-41c7-af4d-de3c1a8271ca.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/f42ef67c-f20f-4fb7-9d59-de123a1ec725.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/fa023314-878c-48d1-87b2-ef4166b8ae87.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/fb4acfb0-36ee-4e25-b778-b8e9b630188a.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/fc491984-41ca-4563-bb80-3b93deb4b72c.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/fea76c4e-cccd-41d7-a4eb-3afbae82ee1e.jpg', alt: 'Beautiful scenery from my trip' },\r\n { src: 'https:\/\/nukhbat-aliabtikar.com.iq\/wp-content\/uploads\/2025\/06\/ffbb42d6-a6ac-4670-bd9f-23726292566d.jpg', alt: 'Beautiful scenery from my trip' },\r\n ], \r\n };\r\n\r\n const positionClasses = ['is-center', 'is-left-1', 'is-right-1', 'is-left-2', 'is-right-2', 'is-left-3', 'is-right-3', 'is-hidden'];\r\n\r\n function openImagePopup(src, alt) { \r\n popupImageElement.src = src;\r\n popupImageElement.alt = alt;\r\n imagePopupModal.style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n }\r\n function closeImagePopup() { \r\n imagePopupModal.style.display = 'none';\r\n popupImageElement.src = '';\r\n popupImageElement.alt = '';\r\n document.body.style.overflow = '';\r\n }\r\n popupCloseButton.addEventListener('click', closeImagePopup);\r\n imagePopupModal.addEventListener('click', (e) => { if (e.target === imagePopupModal) closeImagePopup(); });\r\n document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && imagePopupModal.style.display === 'flex') closeImagePopup(); });\r\n\r\n function populateCoverflow(coverflowContainer, imagesDataArray) {\r\n coverflowContainer.innerHTML = ''; \r\n imagesDataArray.forEach((data, index) => {\r\n const item = document.createElement('div');\r\n item.classList.add('coverflow-item');\r\n item.style.backgroundImage = `url(${data.src})`;\r\n item.dataset.index = index;\r\n item.dataset.src = data.src; \r\n item.dataset.alt = data.alt; \r\n item.setAttribute('role', 'button');\r\n item.setAttribute('tabindex', '-1'); \r\n item.setAttribute('aria-label', `View ${data.alt}`);\r\n coverflowContainer.appendChild(item);\r\n });\r\n }\r\n \r\n function updateCoverflowLayout(coverflowContainer, centerIndex) {\r\n const items = Array.from(coverflowContainer.children);\r\n const numItems = items.length;\r\n if (numItems === 0) return;\r\n\r\n centerIndex = (centerIndex % numItems + numItems) % numItems; \r\n coverflowContainer.dataset.currentCenterIndex = centerIndex;\r\n\r\n items.forEach((item, i) => {\r\n positionClasses.forEach(cls => item.classList.remove(cls));\r\n item.setAttribute('tabindex', '-1'); \r\n\r\n const diff = i - centerIndex;\r\n let targetClass = 'is-hidden'; \r\n\r\n if (diff === 0) targetClass = 'is-center';\r\n else if (diff === 1) targetClass = 'is-right-1';\r\n else if (diff === -1) targetClass = 'is-left-1';\r\n else if (diff === 2) targetClass = 'is-right-2';\r\n else if (diff === -2) targetClass = 'is-left-2';\r\n else if (diff === 3) targetClass = 'is-right-3';\r\n else if (diff === -3) targetClass = 'is-left-3';\r\n \r\n item.classList.add(targetClass);\r\n if (targetClass === 'is-center') {\r\n item.setAttribute('tabindex', '0'); \r\n }\r\n });\r\n }\r\n\r\n function switchSection(sectionId) {\r\n galleryWrappers.forEach(wrapper => {\r\n const isActive = wrapper.id === sectionId;\r\n wrapper.classList.toggle('active', isActive);\r\n if (isActive) {\r\n const coverflowContainer = wrapper.querySelector('.coverflow-container');\r\n const imageList = galleriesData[sectionId] || [];\r\n \r\n if (!coverflowContainer.dataset.initialized || coverflowContainer.children.length !== imageList.length) {\r\n populateCoverflow(coverflowContainer, imageList);\r\n coverflowContainer.dataset.initialized = \"true\";\r\n }\r\n \r\n let currentCenter = parseInt(coverflowContainer.dataset.currentCenterIndex) || 0;\r\n if (currentCenter >= imageList.length || isNaN(currentCenter) || currentCenter < 0) currentCenter = 0;\r\n coverflowContainer.dataset.currentCenterIndex = currentCenter;\r\n \r\n requestAnimationFrame(() => {\r\n updateCoverflowLayout(coverflowContainer, currentCenter);\r\n });\r\n }\r\n });\r\n sectionLinks.forEach(link => {\r\n link.classList.toggle('active', link.dataset.section === sectionId);\r\n });\r\n }\r\n\r\n sectionLinks.forEach(link => {\r\n link.addEventListener('click', () => switchSection(link.dataset.section));\r\n });\r\n\r\n galleryWrappers.forEach(wrapper => {\r\n const coverflowContainer = wrapper.querySelector('.coverflow-container');\r\n const sectionId = wrapper.id;\r\n\r\n function navigateCoverflow(direction) {\r\n const imageList = galleriesData[sectionId] || [];\r\n if (imageList.length === 0) return;\r\n let currentIndex = parseInt(coverflowContainer.dataset.currentCenterIndex);\r\n currentIndex = (currentIndex + direction + imageList.length) % imageList.length;\r\n updateCoverflowLayout(coverflowContainer, currentIndex);\r\n }\r\n\r\n let startX = 0;\r\n let currentX = 0; \/\/ Tracks current X during move, primarily for delta calculation\r\n let isPointerDown = false;\r\n \/\/ No more isSwipeAction flag here, logic simplified in pointerUpHandler\r\n const swipeThreshold = 30; \/\/ Pixels to be considered a swipe\r\n\r\n function pointerDownHandler(e) {\r\n isPointerDown = true;\r\n startX = e.screenX || e.changedTouches[0].screenX;\r\n currentX = startX; \/\/ Initialize currentX at the start of interaction\r\n coverflowContainer.style.cursor = 'grabbing';\r\n if (e.type === 'mousedown') {\r\n e.preventDefault(); \r\n }\r\n }\r\n\r\n function pointerMoveHandler(e) {\r\n if (!isPointerDown) return;\r\n currentX = e.screenX || e.changedTouches[0].screenX; \/\/ Update currentX\r\n if (isPointerDown && e.type === 'mousemove') { \r\n e.preventDefault(); \/\/ Prevent text selection during mouse drag\r\n }\r\n }\r\n\r\n function pointerUpHandler(e) {\r\n if (!isPointerDown) return;\r\n isPointerDown = false;\r\n coverflowContainer.style.cursor = 'grab';\r\n \r\n \/\/ Use currentX for delta, as endX from e.changedTouches[0] might not exist on mouseup\r\n const deltaX = currentX - startX; \r\n\r\n if (Math.abs(deltaX) > swipeThreshold) { \/\/ Swipe\r\n if (deltaX < 0) { \r\n navigateCoverflow(1); \r\n } else { \r\n navigateCoverflow(-1); \r\n }\r\n } else { \/\/ Tap (deltaX is small enough not to be a swipe)\r\n let clickedItem = e.target.closest('.coverflow-item');\r\n const isPrimaryMouseClick = (e.type === 'mouseup' && e.button === 0);\r\n const isTouchTap = (e.type === 'touchend');\r\n\r\n if (clickedItem && !clickedItem.classList.contains('is-hidden') && (isPrimaryMouseClick || isTouchTap) ) {\r\n \/\/ Open the clicked item directly, regardless of whether it's center or side\r\n openImagePopup(clickedItem.dataset.src, clickedItem.dataset.alt);\r\n }\r\n }\r\n startX = 0; \r\n currentX = 0; \r\n }\r\n\r\n coverflowContainer.addEventListener('touchstart', pointerDownHandler, { passive: true });\r\n coverflowContainer.addEventListener('touchmove', pointerMoveHandler, { passive: true }); \r\n coverflowContainer.addEventListener('touchend', pointerUpHandler);\r\n coverflowContainer.addEventListener('touchcancel', pointerUpHandler);\r\n\r\n coverflowContainer.addEventListener('mousedown', pointerDownHandler);\r\n document.addEventListener('mousemove', (e) => { \r\n if(isPointerDown) { \r\n if (e.buttons !== 1 && isPointerDown) {\r\n pointerUpHandler(e); \r\n return;\r\n }\r\n pointerMoveHandler(e); \r\n }\r\n });\r\n document.addEventListener('mouseup', (e) => { \r\n if(isPointerDown) { \r\n pointerUpHandler(e); \r\n }\r\n }); \r\n });\r\n\r\n if (sectionLinks.length > 0) {\r\n switchSection(sectionLinks[0].dataset.section);\r\n }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\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>\u0635\u0648\u0631 \u0645\u0637\u0627\u0628\u062e \u0648\u062f\u064a\u0643\u0648\u0631\u0627\u062a \u062f\u0627\u062e\u0644\u064a\u0629 Refined Coverflow Gallery V2 \u0627\u0644\u0645\u0637\u0627\u0628\u062e \u0648\u0627\u0644\u062f\u064a\u0643\u0648\u0631 \u0627\u0644\u062f\u0627\u062e\u0644\u064a ×<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2197","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/pages\/2197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/comments?post=2197"}],"version-history":[{"count":16,"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/pages\/2197\/revisions"}],"predecessor-version":[{"id":2674,"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/pages\/2197\/revisions\/2674"}],"wp:attachment":[{"href":"https:\/\/nukhbat-aliabtikar.com.iq\/en\/wp-json\/wp\/v2\/media?parent=2197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}