{"id":1391,"date":"2026-03-29T18:57:25","date_gmt":"2026-03-29T18:57:25","guid":{"rendered":"https:\/\/www.ecegulensoy.com\/?page_id=1391"},"modified":"2026-03-29T18:58:23","modified_gmt":"2026-03-29T18:58:23","slug":"galeri","status":"publish","type":"page","link":"https:\/\/www.ecegulensoy.com\/index.php\/galeri\/","title":{"rendered":"GALER\u0130"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1391\" class=\"elementor elementor-1391\">\n\t\t\t\t<div class=\"elementor-element elementor-element-495a9f1 e-flex e-con-boxed e-con e-parent\" data-id=\"495a9f1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-62ece87 elementor-widget elementor-widget-html\" data-id=\"62ece87\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Konser Kolaj ve Pop-up Galerisi<\/title>\n    <style>\n        body {\n            margin: 0;\n            padding: 20px;\n            background-color: #050505;\n            background-image: radial-gradient(#333 1px, transparent 1px);\n            background-size: 10px 10px;\n            font-family: sans-serif;\n        }\n\n        \/* 1. KISIM: ARKADAK\u0130 KUSURSUZ KOLAJ D\u00dcZEN\u0130 *\/\n        .gallery {\n            column-count: 4; \/* Yan yana 4 s\u00fctun *\/\n            column-gap: 15px; \/* S\u00fctunlar aras\u0131 bo\u015fluk *\/\n            max-width: 1400px;\n            margin: 0 auto;\n        }\n\n        .gallery-item {\n            break-inside: avoid; \/* Resimlerin ortadan b\u00f6l\u00fcnmesini engeller *\/\n            margin-bottom: 15px; \/* Alt alta bo\u015fluk *\/\n            cursor: pointer;\n            position: relative;\n            overflow: hidden;\n            border: 2px solid transparent;\n            transition: all 0.3s ease;\n        }\n\n        .gallery-item img {\n            width: 100%;\n            height: auto;\n            display: block;\n            filter: grayscale(100%); \/* Siyah beyaz konsept *\/\n            transition: all 0.4s ease;\n        }\n\n        \/* \u00dczerine gelince hafif mavi parlama ve renklenme *\/\n        .gallery-item:hover {\n            border-color: #00d2ff;\n            box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);\n        }\n\n        .gallery-item:hover img {\n            filter: grayscale(0%);\n            transform: scale(1.03); \/* \u00c7ok hafif bir yak\u0131nla\u015fma efekti *\/\n        }\n\n\n        \/* 2. KISIM: TIKLANINCA A\u00c7ILAN AYRI PENCERE (LIGHTBOX) *\/\n        .lightbox {\n            display: none; \/* Normalde gizli, JS ile a\u00e7\u0131lacak *\/\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: rgba(5, 5, 5, 0.95); \/* Arka plan\u0131 koyula\u015ft\u0131r\u0131r *\/\n            z-index: 9999;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .lightbox-content {\n            position: relative;\n            width: 90%;\n            height: 90%;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n        }\n\n        \/* B\u00fcy\u00fck G\u00f6rsel - Asla s\u00fcnmez, orijinal oran\u0131nda kal\u0131r! *\/\n        .lightbox-img {\n            max-width: 100%;\n            max-height: 85vh; \/* Ekran\u0131n %85'inden uzun olamaz *\/\n            object-fit: contain; \/* Resmi bozmadan \u00e7er\u00e7eveye s\u0131\u011fd\u0131r\u0131r *\/\n            box-shadow: 0 0 40px rgba(0,0,0,1);\n            border: 1px solid #333; \/* \u015e\u0131k ince bir \u00e7er\u00e7eve *\/\n        }\n\n        \/* Navigasyon ve Kapatma Butonlar\u0131 *\/\n        .close-btn, .prev-btn, .next-btn {\n            position: absolute;\n            color: #fff;\n            background: rgba(0, 0, 0, 0.6);\n            border: 1px solid #00d2ff;\n            cursor: pointer;\n            user-select: none;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            transition: all 0.2s;\n            z-index: 10000;\n        }\n\n        .close-btn:hover, .prev-btn:hover, .next-btn:hover {\n            background: #00d2ff;\n            color: #000;\n        }\n\n        .close-btn {\n            top: 20px;\n            right: 40px;\n            font-size: 35px;\n            width: 50px;\n            height: 50px;\n            border-radius: 5px;\n            border: none;\n            background: transparent;\n        }\n\n        .close-btn:hover {\n            background: transparent;\n            color: #00d2ff;\n            transform: scale(1.1);\n        }\n\n        .prev-btn, .next-btn {\n            top: 50%;\n            transform: translateY(-50%);\n            width: 50px;\n            height: 50px;\n            border-radius: 50%;\n            font-size: 24px;\n        }\n\n        .prev-btn { left: 5%; }\n        .next-btn { right: 5%; }\n\n        \/* Mobil uyumluluk *\/\n        @media (max-width: 1024px) { .gallery { column-count: 3; } }\n        @media (max-width: 768px) { \n            .gallery { column-count: 2; } \n            .prev-btn { left: 10px; }\n            .next-btn { right: 10px; }\n        }\n        @media (max-width: 480px) { .gallery { column-count: 1; } }\n    <\/style>\n<\/head>\n<body data-rsssl=1>\n\n    <div class=\"gallery\" id=\"gallery\">\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/2020_0309_17021000-rotated.jpg\" alt=\"Konser 1\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/IMG_20220204_020023_057.jpg\" alt=\"Konser 2\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/2022_0317_02074700.jpg\" alt=\"Konser 3\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/2020_0309_17310500.jpg\" alt=\"Konser 4\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/schumann-scaled.jpg\" alt=\"Konser 5\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/IMG_20210117_234844_867.jpg\" alt=\"Konser 6\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/IMG_20191005_223352_358.jpg\" alt=\"Konser 7\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/2022_0317_02083000-rotated.jpg\" alt=\"Konser 8\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/2020_0309_17290700-rotated.jpg\" alt=\"Konser 9\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/IMG-20220317-WA0023.jpg\" alt=\"Konser 10\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/IMG_5897-scaled.jpg\" alt=\"Konser 11\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/IMG_5868-scaled.jpg\" alt=\"Konser 12\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/2022_0317_02071600-rotated.jpg\" alt=\"Konser 13\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/2020_0309_17515000-rotated.jpg\" alt=\"Konser 14\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/2020_0309_17495700-rotated.jpg\" alt=\"Konser 15\"><\/div>\n        <div class=\"gallery-item\"><img decoding=\"async\" src=\"https:\/\/www.ecegulensoy.com\/wp-content\/uploads\/2025\/11\/1583772700470_2020_0309_17112600-rotated.jpg\" alt=\"Konser 16\"><\/div>\n    <\/div>\n\n    <div class=\"lightbox\" id=\"lightbox\">\n        <span class=\"close-btn\" id=\"close-btn\">&times;<\/span>\n        <div class=\"lightbox-content\">\n            <div class=\"prev-btn\" id=\"prev-btn\">&#10094;<\/div>\n            <img decoding=\"async\" class=\"lightbox-img\" id=\"lightbox-img\" src=\"\" alt=\"B\u00fcy\u00fck G\u00f6rsel\">\n            <div class=\"next-btn\" id=\"next-btn\">&#10095;<\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const galleryItems = document.querySelectorAll('.gallery-item img');\n            const lightbox = document.getElementById('lightbox');\n            const lightboxImg = document.getElementById('lightbox-img');\n            const closeBtn = document.getElementById('close-btn');\n            const prevBtn = document.getElementById('prev-btn');\n            const nextBtn = document.getElementById('next-btn');\n            \n            let currentIndex = 0;\n            const imagesArray = Array.from(galleryItems);\n\n            \/\/ Kolajdaki resimlere t\u0131klan\u0131nca pencereyi a\u00e7\n            imagesArray.forEach((img, index) => {\n                img.parentElement.addEventListener('click', () => {\n                    currentIndex = index;\n                    openLightbox(currentIndex);\n                });\n            });\n\n            function openLightbox(index) {\n                lightboxImg.src = imagesArray[index].src;\n                lightbox.style.display = 'flex'; \/\/ Pencereyi g\u00f6r\u00fcn\u00fcr yap\n            }\n\n            \/\/ Kapatma \u0130\u015flemleri\n            function closeLightbox() {\n                lightbox.style.display = 'none';\n            }\n\n            closeBtn.addEventListener('click', closeLightbox);\n            \n            \/\/ Bo\u015flu\u011fa t\u0131klay\u0131nca da kapans\u0131n\n            lightbox.addEventListener('click', (e) => {\n                if (e.target === lightbox || e.target === document.querySelector('.lightbox-content')) {\n                    closeLightbox();\n                }\n            });\n\n            \/\/ \u0130leri - Geri Ok Butonlar\u0131\n            prevBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                currentIndex = (currentIndex - 1 + imagesArray.length) % imagesArray.length;\n                openLightbox(currentIndex);\n            });\n\n            nextBtn.addEventListener('click', (e) => {\n                e.stopPropagation();\n                currentIndex = (currentIndex + 1) % imagesArray.length;\n                openLightbox(currentIndex);\n            });\n\n            \/\/ Klavye ile kontrol\n            document.addEventListener('keydown', (e) => {\n                if (lightbox.style.display === 'flex') {\n                    if (e.key === 'ArrowRight') {\n                        currentIndex = (currentIndex + 1) % imagesArray.length;\n                        openLightbox(currentIndex);\n                    } else if (e.key === 'ArrowLeft') {\n                        currentIndex = (currentIndex - 1 + imagesArray.length) % imagesArray.length;\n                        openLightbox(currentIndex);\n                    } else if (e.key === 'Escape') {\n                        closeLightbox();\n                    }\n                }\n            });\n        });\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\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>Konser Kolaj ve Pop-up Galerisi &times; &#10094; &#10095;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1391","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ecegulensoy.com\/index.php\/wp-json\/wp\/v2\/pages\/1391","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ecegulensoy.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ecegulensoy.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ecegulensoy.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ecegulensoy.com\/index.php\/wp-json\/wp\/v2\/comments?post=1391"}],"version-history":[{"count":4,"href":"https:\/\/www.ecegulensoy.com\/index.php\/wp-json\/wp\/v2\/pages\/1391\/revisions"}],"predecessor-version":[{"id":1396,"href":"https:\/\/www.ecegulensoy.com\/index.php\/wp-json\/wp\/v2\/pages\/1391\/revisions\/1396"}],"wp:attachment":[{"href":"https:\/\/www.ecegulensoy.com\/index.php\/wp-json\/wp\/v2\/media?parent=1391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}