{"id":193,"date":"2025-07-04T09:32:13","date_gmt":"2025-07-04T01:32:13","guid":{"rendered":"https:\/\/mdranau1.sabah.gov.my\/?page_id=193"},"modified":"2026-09-09T12:37:16","modified_gmt":"2026-09-09T04:37:16","slug":"sejarah-ranau","status":"publish","type":"page","link":"https:\/\/mdranau.sabah.gov.my\/en\/sejarah-ranau\/","title":{"rendered":"Gambar Lama Ranau"},"content":{"rendered":"<div class=\"et_pb_section_0 et_pb_section et_section_regular et_block_section\">\n<div class=\"et_pb_row_0 et_pb_row et_block_row\">\n<div class=\"et_pb_column_0 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\">\n<div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n  \/* CONTAINER UTAMA *\/\n  .gov-heritage-gallery {\n    max-width: 1200px;\n    margin: 10px auto;\n    font-family: 'Poppins', sans-serif;\n    background: #ffffff !important;\n    border-radius: 14px;\n    overflow: hidden;\n    box-shadow: 0 16px 40px rgba(0, 20, 45, 0.10);\n    border: 1px solid #e6e9ee;\n  }\n\n  \/* TAJUK *\/\n  .gallery-header-gov {\n    position: relative;\n    background: linear-gradient(135deg, #002b5c 0%, #001d3d 100%) !important;\n    color: #ffffff !important;\n    padding: 38px 25px 30px;\n    text-align: center;\n    overflow: hidden;\n  }\n\n  .gallery-header-gov::before{\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background:\n      radial-gradient(circle at 15% 20%, rgba(255,215,0,0.10), transparent 45%),\n      radial-gradient(circle at 85% 80%, rgba(255,215,0,0.08), transparent 40%);\n    pointer-events: none;\n  }\n\n  .gallery-header-gov .eyebrow{\n    display: inline-block;\n    font-family: 'Playfair Display', serif;\n    font-style: italic;\n    font-size: 13px;\n    color: #FFD700 !important;\n    letter-spacing: 1px;\n    margin-bottom: 8px;\n    position: relative;\n  }\n\n  .gallery-header-gov h2 {\n    margin: 0;\n    font-size: 26px;\n    font-weight: 800;\n    letter-spacing: 1.5px;\n    color: #ffffff !important;\n    position: relative;\n  }\n\n  .gallery-header-gov .divider{\n    width: 90px;\n    height: 3px;\n    background: #FFD700 !important;\n    margin: 16px auto 0;\n    border-radius: 3px;\n    position: relative;\n  }\n\n  \/* GRID GAMBAR *\/\n  .gallery-grid-gov {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 22px;\n    padding: 32px;\n    background: #f7f8fa !important;\n  }\n\n  \/* ITEM GAMBAR - gaya foto arkib *\/\n  .gallery-item-gov {\n    background: #ffffff !important;\n    border-radius: 8px;\n    overflow: hidden;\n    box-shadow: 0 4px 12px rgba(0, 20, 45, 0.08);\n    cursor: zoom-in;\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n    border: 1px solid #e6e9ee;\n  }\n\n  .gallery-item-gov:hover {\n    transform: translateY(-6px);\n    box-shadow: 0 16px 30px rgba(0, 20, 45, 0.16);\n  }\n\n  .gallery-item-gov .img-frame{\n    position: relative;\n    width: 100%;\n    aspect-ratio: 4 \/ 3;\n    overflow: hidden;\n    background: #dcdcdc;\n  }\n\n  .gallery-item-gov img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    filter: sepia(35%) contrast(1.02);\n    transition: transform 0.5s ease, filter 0.4s ease;\n  }\n\n  .gallery-item-gov:hover img{\n    transform: scale(1.07);\n    filter: sepia(15%) contrast(1.04);\n  }\n\n  .img-frame .zoom-badge{\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    width: 30px;\n    height: 30px;\n    border-radius: 50%;\n    background: rgba(0, 43, 92, 0.75);\n    color: #FFD700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 14px;\n    opacity: 0;\n    transform: scale(0.8);\n    transition: opacity 0.25s ease, transform 0.25s ease;\n  }\n  .gallery-item-gov:hover .zoom-badge{ opacity: 1; transform: scale(1); }\n\n  .gallery-caption-gov {\n    padding: 13px 12px;\n    text-align: center;\n    background: #ffffff !important;\n    border-top: 1px solid #f0f0f0;\n  }\n\n  .gallery-caption-gov p {\n    margin: 0;\n    font-size: 12.5px;\n    color: #002b5c !important;\n    font-weight: 700;\n    line-height: 1.4;\n    letter-spacing: 0.4px;\n    text-transform: uppercase;\n  }\n\n  \/* FOOTER SUMBER *\/\n  .gallery-footer-gov {\n    padding: 24px 32px 30px;\n    background: #ffffff !important;\n    border-top: 2px solid #f0f0f0;\n  }\n\n  .gallery-footer-gov p.footer-title {\n    margin: 0 0 12px;\n    font-size: 13px;\n    color: #002b5c !important;\n    font-weight: 700;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .gallery-footer-gov p.footer-title::before{\n    content: \"\";\n    width: 16px;\n    height: 2px;\n    background: #FFD700;\n    display: inline-block;\n  }\n\n  .gallery-footer-gov ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .gallery-footer-gov li {\n    background: #f7f8fa;\n    border: 1px solid #edf0f4;\n    border-radius: 6px;\n    padding: 9px 14px;\n    transition: border-color 0.2s ease, background 0.2s ease;\n  }\n\n  .gallery-footer-gov li:hover{\n    border-color: #002b5c;\n    background: #ffffff;\n  }\n\n  .gallery-footer-gov a {\n    color: #002b5c !important;\n    text-decoration: none;\n    font-size: 13px;\n    font-weight: 600;\n    word-break: break-word;\n  }\n\n  .gallery-footer-gov a:hover {\n    color: #a3810c !important;\n    text-decoration: underline;\n  }\n\n  \/* LIGHTBOX *\/\n  .gov-lightbox {\n    display: none;\n    position: fixed;\n    z-index: 999999;\n    left: 0; top: 0; width: 100%; height: 100%;\n    background-color: rgba(0, 10, 25, 0.94) !important;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 16px;\n  }\n\n  .gov-lightbox.active{ display: flex; }\n\n  .gov-lightbox-inner{\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 14px;\n    max-width: 92vw;\n  }\n\n  .gov-lightbox-content {\n    display: block;\n    max-width: 90vw;\n    max-height: 76vh;\n    border: 4px solid #fff;\n    border-radius: 6px;\n    box-shadow: 0 25px 60px rgba(0,0,0,0.5);\n  }\n\n  .gov-lightbox-caption{\n    color: #FFD700 !important;\n    font-size: 14px;\n    font-weight: 600;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    text-align: center;\n  }\n\n  .gov-close-lightbox {\n    position: absolute;\n    top: 22px; right: 30px;\n    color: #ffffff !important;\n    font-size: 32px;\n    font-weight: 400;\n    line-height: 1;\n    cursor: pointer;\n    width: 44px;\n    height: 44px;\n    border-radius: 50%;\n    background: rgba(255,255,255,0.08);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.2s ease;\n  }\n  .gov-close-lightbox:hover{ background: rgba(255,255,255,0.2); }\n\n  .gov-lightbox-nav{\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    background: rgba(255,255,255,0.08);\n    border: none;\n    color: #fff;\n    width: 46px;\n    height: 46px;\n    border-radius: 50%;\n    font-size: 18px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n  }\n  .gov-lightbox-nav:hover{ background: rgba(255,255,255,0.2); }\n  .gov-lightbox-prev{ left: 20px; }\n  .gov-lightbox-next{ right: 20px; }\n\n  \/* RESPONSIVE *\/\n  @media (max-width: 1024px) { .gallery-grid-gov { grid-template-columns: repeat(3, 1fr); } }\n  @media (max-width: 768px) {\n    .gallery-grid-gov { grid-template-columns: repeat(2, 1fr); padding: 18px; gap: 12px; }\n    .gallery-header-gov { padding: 28px 18px 22px; }\n    .gallery-header-gov h2 { font-size: 18px; color: #ffffff !important; }\n    .gov-lightbox-nav{ width: 38px; height: 38px; font-size: 15px; }\n    .gov-lightbox-prev{ left: 10px; }\n    .gov-lightbox-next{ right: 10px; }\n  }\n<\/style>\n\n<div class=\"gov-heritage-gallery\">\n  <div class=\"gallery-header-gov\">\n    <span class=\"eyebrow\">Koleksi Bergambar<\/span>\n    <h2>ARKIB WARISAN SEJARAH PEKAN RANAU<\/h2>\n    <div class=\"divider\"><\/div>\n  <\/div>\n\n  <div class=\"gallery-grid-gov\">\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/61126974_2360518264013101_92142338582773760_n-1.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Kampung Perancangan 1900an<\/p><\/div>\n    <\/div>\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/61159153_2360518247346436_7870028636454125568_n-1.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Ranau 1900an<\/p><\/div>\n    <\/div>\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/68509402_1344565449015404_376983955473170432_n-1.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Pusat Kesihatan Ranau 1972<\/p><\/div>\n    <\/div>\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/480496840_3033980920073840_5251063645319675341_n-1.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Jambatan Liwagu sebelum 1973<\/p><\/div>\n    <\/div>\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/498200879_3130794343725830_7321832107925407526_n.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Jambatan Liwagu Baharu 1973<\/p><\/div>\n    <\/div>\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/485005209_1058587362970110_178428563556458171_n-1.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Kedai di Ranau<\/p><\/div>\n    <\/div>\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/485156877_1059471876214992_5521918182435431314_n-1-1024x752.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Pekan Ranau 1975<\/p><\/div>\n    <\/div>\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/490135627_3091143301024268_5404443190179983799_n-1.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Kedai di Ranau<\/p><\/div>\n    <\/div>\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/490353831_3091143594357572_15901382742888508_n-1.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Pekarangan Pekan Ranau<\/p><\/div>\n    <\/div>\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/490593397_3091143351024263_4397696358906979350_n.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Pekan Ranau lama<\/p><\/div>\n    <\/div>\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/508250119_9846318115463324_1101218179316875465_n-1024x685.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Pekan Kundasang 1978<\/p><\/div>\n    <\/div>\n    <div class=\"gallery-item-gov\" onclick=\"openGovLightbox(this)\">\n      <div class=\"img-frame\">\n        <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/508854907_9845543638874105_7640052493017447224_n.jpg\">\n        <span class=\"zoom-badge\">\ud83d\udd0d<\/span>\n      <\/div>\n      <div class=\"gallery-caption-gov\"><p>Airport Ranau Lama<\/p><\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"gallery-footer-gov\">\n    <p class=\"footer-title\">Sumber Rujukan<\/p>\n    <ul>\n      <li><a href=\"https:\/\/www.facebook.com\/100064921921408\/posts\/2360518624013065\/?rdid=mVqfSYoeBuo4mjgg#\" target=\"_blank\">1. Facebook Post (Koleksi Ranau Dulu &amp; Kini)<\/a><\/li>\n      <li><a href=\"https:\/\/www.facebook.com\/RanauDuluDanKini?rdid=XYiJ44kKfP8ItSST&amp;share_url=https%3A%2F%2Fwww.facebook.com%2Fshare%2F16DyFztdxY%2F#\" target=\"_blank\">2. Facebook Page (Ranau Dulu Dan Kini)<\/a><\/li>\n    <\/ul>\n  <\/div>\n<\/div>\n\n<div id=\"govLightboxModal\" class=\"gov-lightbox\" onclick=\"closeGovLightbox(event)\">\n  <span class=\"gov-close-lightbox\" onclick=\"closeGovLightbox(event)\">&times;<\/span>\n  <button class=\"gov-lightbox-nav gov-lightbox-prev\" onclick=\"navGovLightbox(event, -1)\" aria-label=\"Sebelum\">\u276e<\/button>\n  <div class=\"gov-lightbox-inner\" onclick=\"event.stopPropagation()\">\n    <img decoding=\"async\" class=\"gov-lightbox-content\" id=\"govLightboxImage\" src=\"\" alt=\"\">\n    <div class=\"gov-lightbox-caption\" id=\"govLightboxCaption\"><\/div>\n  <\/div>\n  <button class=\"gov-lightbox-nav gov-lightbox-next\" onclick=\"navGovLightbox(event, 1)\" aria-label=\"Seterusnya\">\u276f<\/button>\n<\/div>\n\n<script>\n  var govGalleryItems = [];\n  var govLightboxIndex = 0;\n\n  function openGovLightbox(element) {\n    govGalleryItems = Array.prototype.slice.call(document.querySelectorAll('.gallery-item-gov'));\n    govLightboxIndex = govGalleryItems.indexOf(element);\n    renderGovLightbox();\n    document.getElementById(\"govLightboxModal\").classList.add('active');\n    document.body.style.overflow = \"hidden\";\n  }\n\n  function renderGovLightbox() {\n    var item = govGalleryItems[govLightboxIndex];\n    var img = item.getElementsByTagName('img')[0];\n    var captionEl = item.querySelector('.gallery-caption-gov p');\n    document.getElementById(\"govLightboxImage\").src = img.src;\n    document.getElementById(\"govLightboxCaption\").textContent = captionEl ? captionEl.textContent : '';\n  }\n\n  function navGovLightbox(evt, direction) {\n    evt.stopPropagation();\n    if (!govGalleryItems.length) return;\n    govLightboxIndex = (govLightboxIndex + direction + govGalleryItems.length) % govGalleryItems.length;\n    renderGovLightbox();\n  }\n\n  function closeGovLightbox(evt) {\n    if (evt) evt.stopPropagation();\n    document.getElementById(\"govLightboxModal\").classList.remove('active');\n    document.body.style.overflow = \"auto\";\n  }\n\n  document.addEventListener('keydown', function(e){\n    var modal = document.getElementById('govLightboxModal');\n    if (!modal.classList.contains('active')) return;\n    if (e.key === 'Escape') closeGovLightbox();\n    if (e.key === 'ArrowRight') navGovLightbox(e, 1);\n    if (e.key === 'ArrowLeft') navGovLightbox(e, -1);\n  });\n<\/script>\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-193","page","type-page","status-publish","hentry"],"acf":[],"a3_pvc":{"activated":false,"total_views":526,"today_views":1},"_links":{"self":[{"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/pages\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":28,"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/pages\/193\/revisions"}],"predecessor-version":[{"id":2793,"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/pages\/193\/revisions\/2793"}],"wp:attachment":[{"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/media?parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}