{"id":63,"date":"2026-02-01T10:56:22","date_gmt":"2026-02-01T10:56:22","guid":{"rendered":"https:\/\/ssnmmi.org.sa\/?page_id=63"},"modified":"2026-02-02T13:46:20","modified_gmt":"2026-02-02T13:46:20","slug":"media-gallery","status":"publish","type":"page","link":"https:\/\/ssnmmi.org.sa\/ar\/media-gallery\/","title":{"rendered":"\u0645\u0639\u0631\u0636 \u0627\u0644\u0648\u0633\u0627\u0626\u0637"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"63\" class=\"elementor elementor-63\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-401f64a e-con-full e-flex e-con e-parent\" data-id=\"401f64a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e515608 elementor-widget elementor-widget-html\" data-id=\"e515608\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"ssnmmi-hero-block gallery-hero\">\r\n    <div class=\"hero-shape\"><\/div>\r\n    <div class=\"hero-inner\">\r\n        <div class=\"hero-content-box\">\r\n            <span class=\"hero-tag\">\u0627\u0644\u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0645\u0631\u0626\u064a<\/span>\r\n            <h1 class=\"hero-main-title translation-block\">\u0645\u0639\u0631\u0636 <span>\u0627\u0644\u0648\u0633\u0627\u0626\u0637<\/span><\/h1>\r\n            <div class=\"hero-divider\"><\/div>\r\n            <p class=\"hero-description\">\r\n                \u0627\u0633\u062a\u0643\u0634\u0641 \u0645\u062c\u0645\u0648\u0639\u062a\u0646\u0627 \u0645\u0646 \u0623\u0628\u0631\u0632 \u0627\u0644\u0623\u062d\u062f\u0627\u062b\u060c \u0648\u0639\u0631\u0648\u0636 \u0627\u0644\u062a\u0635\u0648\u064a\u0631 \u0627\u0644\u0633\u0631\u064a\u0631\u064a\u060c \u0648\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u0648\u062b\u0642 \u062a\u0642\u062f\u0645 \u0645\u062c\u062a\u0645\u0639\u0646\u0627.\r\n            <\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <style>\r\n        .ssnmmi-hero-block.gallery-hero {\r\n            --blue: #00C2F3; --green: #18B68B; --dark-bg: #0f172a;\r\n            position: relative; width: 100%; min-height: 450px; background-color: var(--dark-bg);\r\n            background-image: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 25%, rgba(15, 23, 42, 0.5) 100%), \r\n                              url('https:\/\/steelblue-dragonfly-262120.hostingersite.com\/wp-content\/uploads\/2026\/02\/\u062e\u0644\u0641\u064a\u0629-1-1.webp');\r\n            background-size: cover; background-position: center; background-attachment: fixed;\r\n            display: flex; align-items: center; overflow: hidden; font-family: 'Montserrat', sans-serif;\r\n            isolation: isolate; backface-visibility: hidden; transform: translateZ(0);\r\n        }\r\n\r\n        .ssnmmi-hero-block.gallery-hero::before {\r\n            content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 100%;\r\n            background: linear-gradient(to bottom, var(--blue), var(--green)); z-index: 3;\r\n        }\r\n\r\n        .gallery-hero .hero-inner { width: 90%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }\r\n        .gallery-hero .hero-content-box { max-width: 700px; animation: heroFadeIn 1s ease-out forwards; }\r\n        .gallery-hero .hero-tag {\r\n            display: inline-block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 3px;\r\n            color: var(--blue); background: rgba(0, 194, 243, 0.12); padding: 8px 18px; margin-bottom: 25px; border: 1px solid rgba(0, 194, 243, 0.3);\r\n        }\r\n        .gallery-hero .hero-main-title { font-size: clamp(36px, 5vw, 62px); font-weight: 900; color: #ffffff; text-transform: uppercase; margin: 0 0 20px 0; line-height: 1.1; }\r\n        .gallery-hero .hero-main-title span { color: var(--green); }\r\n        .gallery-hero .hero-divider { width: 80px; height: 4px; background: linear-gradient(90deg, var(--blue), var(--green)); margin-bottom: 30px; }\r\n        .gallery-hero .hero-description { font-size: 18px; line-height: 1.8; color: rgba(255, 255, 255, 0.85); padding-left: 25px; border-left: 2px solid var(--blue); max-width: 600px; }\r\n        .gallery-hero .hero-shape { position: absolute; right: -50px; bottom: -50px; width: 450px; height: 450px; border: 1px solid rgba(24, 182, 139, 0.15); transform: rotate(45deg); z-index: 1; }\r\n\r\n        @media (max-width: 768px) {\r\n            .ssnmmi-hero-block.gallery-hero { min-height: 400px; padding: 80px 0; background-attachment: scroll; }\r\n            .gallery-hero .hero-content-box { text-align: center; }\r\n            .gallery-hero .hero-description { border-left: none; padding-left: 0; margin: 0 auto; font-size: 15px; }\r\n            .gallery-hero .hero-divider { margin: 20px auto; }\r\n            .ssnmmi-hero-block.gallery-hero::before { width: 100%; height: 6px; }\r\n        }\r\n    <\/style>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dca785c elementor-widget elementor-widget-shortcode\" data-id=\"dca785c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n    <div id=\"ssnmmi-master-container\" class=\"ssnmmi-wrapper\">\n        <div id=\"albums-shelf\" class=\"albums-shelf\">\n                            <div class=\"album-entry\" onclick=\"openGalleryPortal(161, event)\">\n                    <div class=\"entry-image-container\">\n                        <img decoding=\"async\" src=\"https:\/\/ssnmmi.org.sa\/wp-content\/uploads\/2026\/02\/\u0645\u0634\u0627\u0631\u064a\u0639-\u0627\u0644\u0627\u0646\u0634\u0627\u0626\u0627\u062a.webp\" alt=\"Test Project\">\n                        <div class=\"entry-mask\">\n                            <span class=\"mask-btn\">\u0627\u0643\u062a\u0634\u0641<\/span>\n                        <\/div>\n                    <\/div>\n                    <div class=\"entry-details\">\n                        <div class=\"entry-tag\">Jan 01, 2025<\/div>\n                        <h2 class=\"entry-title\">Test Project<\/h2>\n                        <div class=\"entry-line\"><\/div>\n                    <\/div>\n                <\/div>\n                    <\/div>\n\n        <div id=\"gallery-portal\" class=\"gallery-portal\" style=\"display:none;\">\n            <div class=\"portal-nav-bar\">\n                <button onclick=\"closeGalleryPortal()\" class=\"back-link\">\n                    <span class=\"icon\">\u2190<\/span> RETURN TO GALLERY\n                <\/button>\n            <\/div>\n            <div id=\"portal-header-info\" class=\"portal-header\"><\/div>\n            <div id=\"portal-mosaic\" class=\"portal-mosaic\"><\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        .ssnmmi-wrapper { \n            --blue: #4A7DF5; \n            --green: #5DCEBE; \n            --bg-dark: #141320; \n            --ink: #ffffff; \n            font-family: 'Montserrat', sans-serif; \n            background: var(--bg-dark); \n            padding: 40px 0; \n            overflow: hidden; \n        }\n        \n        \/* Album Entries - Enhanced Card Design *\/\n        .albums-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 40px; width: 92%; max-width: 1400px; margin: 0 auto; }\n        .album-entry { cursor: pointer; background: transparent; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; }\n        .entry-image-container { position: relative; height: 380px; overflow: hidden; border-radius: 0; background: rgba(255, 255, 255, 0.05); }\n        .entry-image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1); opacity: 0.95; }\n        \n        \/* \u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0645\u0627\u0633\u0643 \u0644\u064a\u062a\u0646\u0627\u0633\u0628 \u0645\u0639 \u0627\u0644\u0646\u0645\u0637 \u0627\u0644\u0645\u0638\u0644\u0645 *\/\n        .entry-mask { position: absolute; inset: 0; background: rgba(20, 19, 32, 0.85); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.4s ease-out; backdrop-filter: blur(5px); }\n        .mask-btn { \n            background: var(--blue);\n            color: #fff; \n            border: none; \n            padding: 12px 35px; \n            font-weight: 800; \n            letter-spacing: 3px; \n            font-size: 11px; \n            transform: translateY(20px); \n            transition: 0.4s;\n            box-shadow: 0 4px 15px rgba(74, 125, 245, 0.3);\n        }\n        \n        .album-entry:hover { transform: translateY(-10px); }\n        .album-entry:hover img { transform: scale(1.1); opacity: 0.6; }\n        .album-entry:hover .entry-mask { opacity: 1; }\n        .album-entry:hover .mask-btn { transform: translateY(0); }\n        .mask-btn:hover { background: var(--green); box-shadow: 0 8px 25px rgba(93, 206, 190, 0.5); }\n        .album-entry:hover .entry-line { width: 100%; background: var(--blue); }\n\n        .entry-details { padding: 25px 0; text-align: left; }\n        .entry-tag { color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }\n        .entry-title { margin: 0; font-size: 24px; font-weight: 900; color: var(--ink); text-transform: uppercase; line-height: 1.2; letter-spacing: -0.5px; }\n        .entry-line { width: 40px; height: 4px; background: rgba(255, 255, 255, 0.1); margin-top: 15px; transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1); }\n\n        \/* Portal Styling *\/\n        .gallery-portal { width: 92%; max-width: 1400px; margin: 0 auto; animation: portalFadeIn 0.8s cubic-bezier(0.19, 1, 0.22, 1); }\n        \n        \/* \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0641\u064a \u0627\u0644\u0648\u0627\u062c\u0647\u0629 *\/\n        .back-link { \n            background: var(--blue); \n            color: #ffffff;            \n            border: none; \n            padding: 12px 25px; \n            font-weight: 800; \n            cursor: pointer; \n            font-size: 11px; \n            text-transform: uppercase; \n            letter-spacing: 2px; \n            transition: 0.3s;\n            display: inline-flex;\n            align-items: center;\n            gap: 10px;\n            box-shadow: 0 4px 15px rgba(74, 125, 245, 0.3);\n            border-radius: 4px;\n        }\n        .back-link:hover { \n            background: var(--green); \n            color: #ffffff; \n            transform: translateX(-5px); \n            box-shadow: 0 8px 25px rgba(93, 206, 190, 0.5);\n        }\n        \n        .portal-nav-bar { margin-bottom: 50px; }\n        .portal-header { margin-bottom: 60px; border-left: 8px solid var(--green); padding-left: 35px; }\n        \n        \/* Mosaic Grid *\/\n        .portal-mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-auto-rows: 320px; gap: 15px; grid-auto-flow: dense; }\n        .mosaic-item { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.05); }\n        .mosaic-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s; cursor: pointer; }\n        .mosaic-item:hover img { transform: scale(1.1); opacity: 0.8; }\n        \n        .mosaic-item:nth-child(7n) { grid-column: span 2; grid-row: span 2; }\n\n        @keyframes portalFadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }\n        @media (max-width: 768px) { .albums-shelf { grid-template-columns: 1fr; } .portal-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } }\n    <\/style>\n\n    <script>\n    let lastScrollPos = 0;\n\n    function openGalleryPortal(id, event) {\n        \/\/ \u062d\u0641\u0638 \u0645\u0643\u0627\u0646 \u0627\u0644\u0633\u0643\u0631\u0648\u0644 \u0627\u0644\u062d\u0627\u0644\u064a\n        lastScrollPos = window.scrollY;\n        \n        const shelf = document.getElementById('albums-shelf');\n        const portal = document.getElementById('gallery-portal');\n        const target = document.getElementById('portal-mosaic');\n        const header = document.getElementById('portal-header-info');\n\n        \/\/ \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0634\u0628\u0643\u0629 \u0648\u0625\u0638\u0647\u0627\u0631 \u0627\u0644\u0628\u0648\u0627\u0628\u0629\n        shelf.style.display = 'none';\n        portal.style.display = 'block';\n\n        \/\/ \u0645\u0646\u0639 \u0627\u0644\u0633\u0643\u0631\u0648\u0644 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a \u0644\u0644\u0623\u0639\u0644\u0649 \u0628\u0634\u0643\u0644 \u0645\u0641\u0627\u062c\u0626\n        window.scrollTo(0, document.getElementById('ssnmmi-master-container').offsetTop - 50);\n\n        fetch('https:\/\/ssnmmi.org.sa\/wp-admin\/admin-ajax.php?action=get_ssnmmi_mosaic_v5&id=' + id)\n            .then(res => res.json())\n            .then(data => {\n                header.innerHTML = `<h1 style=\"font-size:52px; font-weight:900; margin:0; color:#ffffff; text-transform:uppercase; line-height:1;\">${data.title}<\/h1>\n                                    <p style=\"color:var(--green); font-weight:800; font-size:14px; margin-top:15px; letter-spacing:3px;\">DATE \/ ${data.date}<\/p>`;\n                target.innerHTML = data.html;\n            });\n    }\n\n    function closeGalleryPortal() {\n        document.getElementById('albums-shelf').style.display = 'grid';\n        document.getElementById('gallery-portal').style.display = 'none';\n        \n        \/\/ \u0627\u0644\u0639\u0648\u062f\u0629 \u0644\u0646\u0641\u0633 \u0645\u0643\u0627\u0646 \u0627\u0644\u0633\u0643\u0631\u0648\u0644 \u0627\u0644\u0630\u064a \u0643\u0627\u0646 \u0641\u064a\u0647 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\n        window.scrollTo({ top: lastScrollPos, behavior: 'instant' });\n    }\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Visual Journey Media Gallery Explore our collection of event highlights, clinical imaging showcases, and educational video resources documenting our society&#8217;s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","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":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-63","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ssnmmi.org.sa\/ar\/wp-json\/wp\/v2\/pages\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ssnmmi.org.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ssnmmi.org.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ssnmmi.org.sa\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ssnmmi.org.sa\/ar\/wp-json\/wp\/v2\/comments?post=63"}],"version-history":[{"count":19,"href":"https:\/\/ssnmmi.org.sa\/ar\/wp-json\/wp\/v2\/pages\/63\/revisions"}],"predecessor-version":[{"id":281,"href":"https:\/\/ssnmmi.org.sa\/ar\/wp-json\/wp\/v2\/pages\/63\/revisions\/281"}],"wp:attachment":[{"href":"https:\/\/ssnmmi.org.sa\/ar\/wp-json\/wp\/v2\/media?parent=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}