Modern Gallery<\/title>\n <style>\n \n\n .gallery-container {\n max-width: 1200px;\n margin: 0 auto;\n background: white;\n border-radius: 20px;\n padding: 3rem;\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n }\n\n .gallery-header {\n text-align: center;\n margin-bottom: 3rem;\n }\n\n .gallery-title {\n font-size: 2.5rem;\n font-weight: 700;\n color: #04c1b5;\n margin-bottom: 1rem;\n position: relative;\n }\n\n .gallery-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 3px;\n background: #04c1b5;\n border-radius: 2px;\n }\n\n .gallery-subtitle {\n font-size: 1.1rem;\n color: #6c757d;\n font-weight: 400;\n }\n\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .gallery-item {\n background: white;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 8px 25px rgba(4, 193, 181, 0.1);\n transition: all 0.3s ease;\n position: relative;\n cursor: pointer;\n }\n\n .gallery-item:hover {\n transform: translateY(-10px);\n box-shadow: 0 20px 40px rgba(4, 193, 181, 0.2);\n }\n\n .gallery-item::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #04c1b5, #00a693);\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .gallery-item:hover::before {\n opacity: 1;\n }\n\n .gallery-image {\n width: 100%;\n height: 400px;\n background: #f8f9fa;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n\n .gallery-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n }\n\n .gallery-item:hover .gallery-image img {\n transform: scale(1.1);\n }\n\n .gallery-image video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n }\n\n .gallery-item:hover .gallery-image video {\n transform: scale(1.05);\n }\n\n .gallery-image::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(4, 193, 181, 0.0);\n transition: background 0.3s ease;\n z-index: 1;\n }\n\n .gallery-item:hover .gallery-image::before {\n background: rgba(4, 193, 181, 0.1);\n }\n\n .gallery-image-icon {\n font-size: 3rem;\n color: #04c1b5;\n opacity: 0.3;\n position: relative;\n z-index: 2;\n }\n\n .video-overlay {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(0, 0, 0, 0.7);\n color: white;\n border-radius: 50%;\n width: 60px;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n z-index: 3;\n opacity: 0;\n transition: opacity 0.3s ease;\n cursor: pointer;\n }\n\n .gallery-item:hover .video-overlay {\n opacity: 1;\n }\n\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.9);\n animation: fadeIn 0.3s ease;\n }\n\n .modal-content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 90%;\n max-height: 90%;\n border-radius: 10px;\n overflow: hidden;\n }\n\n .modal-content img,\n .modal-content video {\n width: 100%;\n height: auto;\n max-width: 100%;\n max-height: 90vh;\n object-fit: contain;\n }\n\n .modal-close {\n position: absolute;\n top: 20px;\n right: 35px;\n color: #fff;\n font-size: 40px;\n font-weight: bold;\n cursor: pointer;\n z-index: 1001;\n }\n\n .modal-close:hover {\n color: #04c1b5;\n }\n\n .gallery-content {\n padding: 1.5rem;\n }\n\n .gallery-item-title {\n font-size: 1.3rem;\n font-weight: 600;\n color: #333;\n margin-bottom: 0.5rem;\n }\n\n .gallery-item-description {\n color: #6c757d;\n font-size: 0.95rem;\n line-height: 1.6;\n margin-bottom: 1rem;\n }\n\n .gallery-item-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.85rem;\n color: #adb5bd;\n }\n\n .gallery-tag {\n background: rgba(4, 193, 181, 0.1);\n color: #04c1b5;\n padding: 0.3rem 0.8rem;\n border-radius: 15px;\n font-weight: 500;\n font-size: 0.8rem;\n }\n\n .gallery-stats {\n display: flex;\n gap: 1rem;\n margin-top: 2rem;\n padding: 1.5rem;\n background: rgba(4, 193, 181, 0.05);\n border-radius: 15px;\n justify-content: center;\n }\n\n .stat-item {\n text-align: center;\n }\n\n .stat-number {\n font-size: 2rem;\n font-weight: 700;\n color: #04c1b5;\n }\n\n .stat-label {\n font-size: 0.9rem;\n color: #6c757d;\n margin-top: 0.5rem;\n }\n\n .gallery-filters {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 2rem;\n flex-wrap: wrap;\n }\n\n .filter-btn {\n background: white;\n color: #6c757d;\n border: 2px solid #e9ecef;\n padding: 0.7rem 1.5rem;\n border-radius: 25px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-weight: 500;\n }\n\n .filter-btn:hover,\n .filter-btn.active {\n background: #04c1b5;\n color: white;\n border-color: #04c1b5;\n transform: translateY(-2px);\n }\n\n @media (max-width: 768px) {\n .gallery-container {\n padding: 1.5rem;\n }\n \n .gallery-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n \n .gallery-title {\n font-size: 2rem;\n }\n \n .gallery-stats {\n flex-direction: column;\n gap: 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"gallery-container\">\n <div class=\"gallery-header\">\n <h1 class=\"gallery-title\">\u0644\u0642\u0637\u0627\u062a \u0645\u062e\u062a\u0627\u0631\u0629<\/h1>\n <p class=\"gallery-subtitle translation-block\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u062e\u062a\u0627\u0631\u0629 \u0645\u0646 \u0627\u0644\u0644\u062d\u0638\u0627\u062a \u0627\u0644\u0641\u0631\u064a\u062f\u0629 \u0627\u0644\u062a\u064a \u062a\u0648\u0636\u062d \u0646\u0647\u062c\u0646\u0627 \u0627\u0644\u0625\u0646\u0633\u0627\u0646\u064a\u060c \u0648\u0642\u064a\u0645\u0646\u0627 \u0648\u0634\u063a\u0641\u0646\u0627 \u0627\u0644\u064a\u0648\u0645\u064a.<\/p>\n <\/div>\n\n <div class=\"gallery-filters\">\n <button class=\"filter-btn active\" data-filter=\"all\">\u0627\u0644\u062c\u0645\u064a\u0639<\/button>\n <button class=\"filter-btn\" data-filter=\"photography\">photo<\/button>\n <button class=\"filter-btn\" data-filter=\"design\">Vid\u00e9os<\/button>\n \n <\/div>\n\n <div class=\"gallery-grid\">\n <div class=\"gallery-item\" data-category=\"photography\">\n <div class=\"gallery-image\">\n <img decoding=\"async\" src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-30-at-11.51.26.png\" alt=\"Urban Photography\">\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"design\">\n <div class=\"gallery-image\">\n <video src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/SaveClip.App_AQOcw9C0nKxZmihXLDrhyuSTBKnH75dsJwxp7FktuMNKWvVop1_Y_pn5XxKhvFKSWcj9LfZrhfNRlG7Hm-qDvjKsPptvv0qgXo0bVSE.mp4\" muted loop poster=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-10-at-11.55.06.png\">\n Your browser does not support the video tag.\n <\/video>\n <div class=\"video-overlay\">\u25b6<\/div>\n <div class=\"reel-indicator\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"photography\">\n <div class=\"gallery-image\">\n <img decoding=\"async\" src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2022\/04\/171A8913.jpg\" alt=\"Digital Art\">\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"photography\">\n <div class=\"gallery-image\">\n <img decoding=\"async\" src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/06\/171A8996.jpg\" alt=\"Landscape\">\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"design\">\n <div class=\"gallery-image\">\n <video src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/SaveClip.App_AQPzYkyxVwLDvGVyAwZmJUDLrsVvZbnnBk5TCFO_n8t_2uPszEv5BQNlnj0XTWxzRt_MfbroDHCj1F9btkl0rS8O22kBSsjvvpN5LeA.mp4\" muted loop poster=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/SaveClip.App_502735768_18404012983111288_7397494757968973694_n-e1752145293184.jpg\">\n Your browser does not support the video tag.\n <\/video>\n <div class=\"video-overlay\">\u25b6<\/div>\n <div class=\"reel-indicator\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"photography\">\n <div class=\"gallery-image\">\n <img decoding=\"async\" src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/171A8961.jpg\" alt=\"Abstract Art\">\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"photography\">\n <div class=\"gallery-image\">\n <img decoding=\"async\" src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/0J0A7306.jpg\" alt=\"Nature\">\n <\/div>\n <\/div>\n\n \n\n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n <div id=\"modal\" class=\"modal\">\n <span class=\"modal-close\">×<\/span>\n <div class=\"modal-content\" id=\"modal-content\">\n \n <\/div>\n <\/div>\n\n \n <\/div>\n\n <script>\n \/\/ Filter functionality\n const filterBtns = document.querySelectorAll('.filter-btn');\n const galleryItems = document.querySelectorAll('.gallery-item');\n const modal = document.getElementById('modal');\n const modalContent = document.getElementById('modal-content');\n const modalClose = document.querySelector('.modal-close');\n\n \/\/ Modal functionality\n galleryItems.forEach(item => {\n const galleryImage = item.querySelector('.gallery-image');\n const img = galleryImage.querySelector('img');\n const video = galleryImage.querySelector('video');\n \n galleryImage.addEventListener('click', () => {\n modal.style.display = 'block';\n modalContent.innerHTML = '';\n \n if (img) {\n const modalImg = img.cloneNode(true);\n modalImg.style.maxWidth = '100%';\n modalImg.style.maxHeight = '90vh';\n modalContent.appendChild(modalImg);\n } else if (video) {\n const modalVideo = video.cloneNode(true);\n modalVideo.controls = true;\n modalVideo.autoplay = true;\n modalVideo.style.maxWidth = '100%';\n modalVideo.style.maxHeight = '90vh';\n modalContent.appendChild(modalVideo);\n }\n });\n });\n\n \/\/ Close modal\n modalClose.addEventListener('click', () => {\n modal.style.display = 'none';\n const videos = modalContent.querySelectorAll('video');\n videos.forEach(video => {\n video.pause();\n video.currentTime = 0;\n });\n });\n\n \/\/ Close modal when clicking outside\n modal.addEventListener('click', (e) => {\n if (e.target === modal) {\n modal.style.display = 'none';\n const videos = modalContent.querySelectorAll('video');\n videos.forEach(video => {\n video.pause();\n video.currentTime = 0;\n });\n }\n });\n\n \/\/ Auto-play videos on hover\n const videos = document.querySelectorAll('.gallery-image video');\n videos.forEach(video => {\n video.addEventListener('mouseenter', () => {\n video.play();\n });\n \n video.addEventListener('mouseleave', () => {\n video.pause();\n video.currentTime = 0;\n });\n });\n\n filterBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n \/\/ Remove active class from all buttons\n filterBtns.forEach(b => b.classList.remove('active'));\n \/\/ Add active class to clicked button\n btn.classList.add('active');\n\n const filter = btn.dataset.filter;\n\n galleryItems.forEach(item => {\n if (filter === 'all' || item.dataset.category === filter) {\n item.style.display = 'block';\n item.style.animation = 'fadeIn 0.5s ease';\n } else {\n item.style.display = 'none';\n }\n });\n });\n });\n\n \/\/ Add hover effects\n galleryItems.forEach(item => {\n item.addEventListener('mouseenter', () => {\n item.style.transform = 'translateY(-10px) scale(1.02)';\n });\n\n item.addEventListener('mouseleave', () => {\n item.style.transform = 'translateY(0) scale(1)';\n });\n });\n\n \/\/ Add CSS animation for fade in\n const style = document.createElement('style');\n style.textContent = `\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n `;\n document.head.appendChild(style);\n <\/script>\n<\/body>\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>\n\t\t\n <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n <ul>\n\t\t\t <\/ul>\n <\/div>","protected":false},"excerpt":{"rendered":"<p>Modern Gallery Instant Captur\u00e9 Une s\u00e9lection de moments uniques qui illustrent notre approche humaine, nos valeurs et notre passion au quotidien. Toute photo Vid\u00e9os Your browser does not support the video tag. \u25b6 Your browser does not support the video tag. \u25b6 ×<\/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-6351","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/pages\/6351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/comments?post=6351"}],"version-history":[{"count":43,"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/pages\/6351\/revisions"}],"predecessor-version":[{"id":6470,"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/pages\/6351\/revisions\/6470"}],"wp:attachment":[{"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/media?parent=6351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Modern Gallery<\/title>\n <style>\n \n\n .gallery-container {\n max-width: 1200px;\n margin: 0 auto;\n background: white;\n border-radius: 20px;\n padding: 3rem;\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n }\n\n .gallery-header {\n text-align: center;\n margin-bottom: 3rem;\n }\n\n .gallery-title {\n font-size: 2.5rem;\n font-weight: 700;\n color: #04c1b5;\n margin-bottom: 1rem;\n position: relative;\n }\n\n .gallery-title::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 50%;\n transform: translateX(-50%);\n width: 60px;\n height: 3px;\n background: #04c1b5;\n border-radius: 2px;\n }\n\n .gallery-subtitle {\n font-size: 1.1rem;\n color: #6c757d;\n font-weight: 400;\n }\n\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n }\n\n .gallery-item {\n background: white;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 8px 25px rgba(4, 193, 181, 0.1);\n transition: all 0.3s ease;\n position: relative;\n cursor: pointer;\n }\n\n .gallery-item:hover {\n transform: translateY(-10px);\n box-shadow: 0 20px 40px rgba(4, 193, 181, 0.2);\n }\n\n .gallery-item::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, #04c1b5, #00a693);\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .gallery-item:hover::before {\n opacity: 1;\n }\n\n .gallery-image {\n width: 100%;\n height: 400px;\n background: #f8f9fa;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n\n .gallery-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n }\n\n .gallery-item:hover .gallery-image img {\n transform: scale(1.1);\n }\n\n .gallery-image video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.3s ease;\n }\n\n .gallery-item:hover .gallery-image video {\n transform: scale(1.05);\n }\n\n .gallery-image::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(4, 193, 181, 0.0);\n transition: background 0.3s ease;\n z-index: 1;\n }\n\n .gallery-item:hover .gallery-image::before {\n background: rgba(4, 193, 181, 0.1);\n }\n\n .gallery-image-icon {\n font-size: 3rem;\n color: #04c1b5;\n opacity: 0.3;\n position: relative;\n z-index: 2;\n }\n\n .video-overlay {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(0, 0, 0, 0.7);\n color: white;\n border-radius: 50%;\n width: 60px;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n z-index: 3;\n opacity: 0;\n transition: opacity 0.3s ease;\n cursor: pointer;\n }\n\n .gallery-item:hover .video-overlay {\n opacity: 1;\n }\n\n .modal {\n display: none;\n position: fixed;\n z-index: 1000;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.9);\n animation: fadeIn 0.3s ease;\n }\n\n .modal-content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 90%;\n max-height: 90%;\n border-radius: 10px;\n overflow: hidden;\n }\n\n .modal-content img,\n .modal-content video {\n width: 100%;\n height: auto;\n max-width: 100%;\n max-height: 90vh;\n object-fit: contain;\n }\n\n .modal-close {\n position: absolute;\n top: 20px;\n right: 35px;\n color: #fff;\n font-size: 40px;\n font-weight: bold;\n cursor: pointer;\n z-index: 1001;\n }\n\n .modal-close:hover {\n color: #04c1b5;\n }\n\n .gallery-content {\n padding: 1.5rem;\n }\n\n .gallery-item-title {\n font-size: 1.3rem;\n font-weight: 600;\n color: #333;\n margin-bottom: 0.5rem;\n }\n\n .gallery-item-description {\n color: #6c757d;\n font-size: 0.95rem;\n line-height: 1.6;\n margin-bottom: 1rem;\n }\n\n .gallery-item-meta {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.85rem;\n color: #adb5bd;\n }\n\n .gallery-tag {\n background: rgba(4, 193, 181, 0.1);\n color: #04c1b5;\n padding: 0.3rem 0.8rem;\n border-radius: 15px;\n font-weight: 500;\n font-size: 0.8rem;\n }\n\n .gallery-stats {\n display: flex;\n gap: 1rem;\n margin-top: 2rem;\n padding: 1.5rem;\n background: rgba(4, 193, 181, 0.05);\n border-radius: 15px;\n justify-content: center;\n }\n\n .stat-item {\n text-align: center;\n }\n\n .stat-number {\n font-size: 2rem;\n font-weight: 700;\n color: #04c1b5;\n }\n\n .stat-label {\n font-size: 0.9rem;\n color: #6c757d;\n margin-top: 0.5rem;\n }\n\n .gallery-filters {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-bottom: 2rem;\n flex-wrap: wrap;\n }\n\n .filter-btn {\n background: white;\n color: #6c757d;\n border: 2px solid #e9ecef;\n padding: 0.7rem 1.5rem;\n border-radius: 25px;\n cursor: pointer;\n transition: all 0.3s ease;\n font-weight: 500;\n }\n\n .filter-btn:hover,\n .filter-btn.active {\n background: #04c1b5;\n color: white;\n border-color: #04c1b5;\n transform: translateY(-2px);\n }\n\n @media (max-width: 768px) {\n .gallery-container {\n padding: 1.5rem;\n }\n \n .gallery-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n \n .gallery-title {\n font-size: 2rem;\n }\n \n .gallery-stats {\n flex-direction: column;\n gap: 1rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"gallery-container\">\n <div class=\"gallery-header\">\n <h1 class=\"gallery-title\">\u0644\u0642\u0637\u0627\u062a \u0645\u062e\u062a\u0627\u0631\u0629<\/h1>\n <p class=\"gallery-subtitle translation-block\">\u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u062e\u062a\u0627\u0631\u0629 \u0645\u0646 \u0627\u0644\u0644\u062d\u0638\u0627\u062a \u0627\u0644\u0641\u0631\u064a\u062f\u0629 \u0627\u0644\u062a\u064a \u062a\u0648\u0636\u062d \u0646\u0647\u062c\u0646\u0627 \u0627\u0644\u0625\u0646\u0633\u0627\u0646\u064a\u060c \u0648\u0642\u064a\u0645\u0646\u0627 \u0648\u0634\u063a\u0641\u0646\u0627 \u0627\u0644\u064a\u0648\u0645\u064a.<\/p>\n <\/div>\n\n <div class=\"gallery-filters\">\n <button class=\"filter-btn active\" data-filter=\"all\">\u0627\u0644\u062c\u0645\u064a\u0639<\/button>\n <button class=\"filter-btn\" data-filter=\"photography\">photo<\/button>\n <button class=\"filter-btn\" data-filter=\"design\">Vid\u00e9os<\/button>\n \n <\/div>\n\n <div class=\"gallery-grid\">\n <div class=\"gallery-item\" data-category=\"photography\">\n <div class=\"gallery-image\">\n <img decoding=\"async\" src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/06\/Screenshot-2025-06-30-at-11.51.26.png\" alt=\"Urban Photography\">\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"design\">\n <div class=\"gallery-image\">\n <video src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/SaveClip.App_AQOcw9C0nKxZmihXLDrhyuSTBKnH75dsJwxp7FktuMNKWvVop1_Y_pn5XxKhvFKSWcj9LfZrhfNRlG7Hm-qDvjKsPptvv0qgXo0bVSE.mp4\" muted loop poster=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/Screenshot-2025-07-10-at-11.55.06.png\">\n Your browser does not support the video tag.\n <\/video>\n <div class=\"video-overlay\">\u25b6<\/div>\n <div class=\"reel-indicator\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"photography\">\n <div class=\"gallery-image\">\n <img decoding=\"async\" src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2022\/04\/171A8913.jpg\" alt=\"Digital Art\">\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"photography\">\n <div class=\"gallery-image\">\n <img decoding=\"async\" src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/06\/171A8996.jpg\" alt=\"Landscape\">\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"design\">\n <div class=\"gallery-image\">\n <video src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/SaveClip.App_AQPzYkyxVwLDvGVyAwZmJUDLrsVvZbnnBk5TCFO_n8t_2uPszEv5BQNlnj0XTWxzRt_MfbroDHCj1F9btkl0rS8O22kBSsjvvpN5LeA.mp4\" muted loop poster=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/SaveClip.App_502735768_18404012983111288_7397494757968973694_n-e1752145293184.jpg\">\n Your browser does not support the video tag.\n <\/video>\n <div class=\"video-overlay\">\u25b6<\/div>\n <div class=\"reel-indicator\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"photography\">\n <div class=\"gallery-image\">\n <img decoding=\"async\" src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/171A8961.jpg\" alt=\"Abstract Art\">\n <\/div>\n <\/div>\n\n <div class=\"gallery-item\" data-category=\"photography\">\n <div class=\"gallery-image\">\n <img decoding=\"async\" src=\"https:\/\/drchamadaoudi.com\/wp-content\/uploads\/2025\/07\/0J0A7306.jpg\" alt=\"Nature\">\n <\/div>\n <\/div>\n\n \n\n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n <div id=\"modal\" class=\"modal\">\n <span class=\"modal-close\">×<\/span>\n <div class=\"modal-content\" id=\"modal-content\">\n \n <\/div>\n <\/div>\n\n \n <\/div>\n\n <script>\n \/\/ Filter functionality\n const filterBtns = document.querySelectorAll('.filter-btn');\n const galleryItems = document.querySelectorAll('.gallery-item');\n const modal = document.getElementById('modal');\n const modalContent = document.getElementById('modal-content');\n const modalClose = document.querySelector('.modal-close');\n\n \/\/ Modal functionality\n galleryItems.forEach(item => {\n const galleryImage = item.querySelector('.gallery-image');\n const img = galleryImage.querySelector('img');\n const video = galleryImage.querySelector('video');\n \n galleryImage.addEventListener('click', () => {\n modal.style.display = 'block';\n modalContent.innerHTML = '';\n \n if (img) {\n const modalImg = img.cloneNode(true);\n modalImg.style.maxWidth = '100%';\n modalImg.style.maxHeight = '90vh';\n modalContent.appendChild(modalImg);\n } else if (video) {\n const modalVideo = video.cloneNode(true);\n modalVideo.controls = true;\n modalVideo.autoplay = true;\n modalVideo.style.maxWidth = '100%';\n modalVideo.style.maxHeight = '90vh';\n modalContent.appendChild(modalVideo);\n }\n });\n });\n\n \/\/ Close modal\n modalClose.addEventListener('click', () => {\n modal.style.display = 'none';\n const videos = modalContent.querySelectorAll('video');\n videos.forEach(video => {\n video.pause();\n video.currentTime = 0;\n });\n });\n\n \/\/ Close modal when clicking outside\n modal.addEventListener('click', (e) => {\n if (e.target === modal) {\n modal.style.display = 'none';\n const videos = modalContent.querySelectorAll('video');\n videos.forEach(video => {\n video.pause();\n video.currentTime = 0;\n });\n }\n });\n\n \/\/ Auto-play videos on hover\n const videos = document.querySelectorAll('.gallery-image video');\n videos.forEach(video => {\n video.addEventListener('mouseenter', () => {\n video.play();\n });\n \n video.addEventListener('mouseleave', () => {\n video.pause();\n video.currentTime = 0;\n });\n });\n\n filterBtns.forEach(btn => {\n btn.addEventListener('click', () => {\n \/\/ Remove active class from all buttons\n filterBtns.forEach(b => b.classList.remove('active'));\n \/\/ Add active class to clicked button\n btn.classList.add('active');\n\n const filter = btn.dataset.filter;\n\n galleryItems.forEach(item => {\n if (filter === 'all' || item.dataset.category === filter) {\n item.style.display = 'block';\n item.style.animation = 'fadeIn 0.5s ease';\n } else {\n item.style.display = 'none';\n }\n });\n });\n });\n\n \/\/ Add hover effects\n galleryItems.forEach(item => {\n item.addEventListener('mouseenter', () => {\n item.style.transform = 'translateY(-10px) scale(1.02)';\n });\n\n item.addEventListener('mouseleave', () => {\n item.style.transform = 'translateY(0) scale(1)';\n });\n });\n\n \/\/ Add CSS animation for fade in\n const style = document.createElement('style');\n style.textContent = `\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n `;\n document.head.appendChild(style);\n <\/script>\n<\/body>\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>\n\t\t\n <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n <ul>\n\t\t\t <\/ul>\n <\/div>","protected":false},"excerpt":{"rendered":"<p>Modern Gallery Instant Captur\u00e9 Une s\u00e9lection de moments uniques qui illustrent notre approche humaine, nos valeurs et notre passion au quotidien. Toute photo Vid\u00e9os Your browser does not support the video tag. \u25b6 Your browser does not support the video tag. \u25b6 ×<\/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-6351","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/pages\/6351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/comments?post=6351"}],"version-history":[{"count":43,"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/pages\/6351\/revisions"}],"predecessor-version":[{"id":6470,"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/pages\/6351\/revisions\/6470"}],"wp:attachment":[{"href":"https:\/\/drchamadaoudi.com\/ar\/wp-json\/wp\/v2\/media?parent=6351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}