{"id":20,"date":"2026-08-28T11:29:17","date_gmt":"2026-08-28T11:29:17","guid":{"rendered":"https:\/\/ebunoluwa.name.ng\/klirview\/?page_id=20"},"modified":"2026-08-31T11:54:23","modified_gmt":"2026-08-31T11:54:23","slug":"gallery","status":"publish","type":"page","link":"https:\/\/ebunoluwa.name.ng\/klirview\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\n<div class=\"wp-block-group w-700 has-global-padding is-layout-constrained wp-container-core-group-is-layout-22458b2a wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)\">\n<h1 class=\"wp-block-heading has-text-align-center\"><strong>Our Photo Gallery<\/strong><\/h1>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:0;padding-bottom:var(--wp--preset--spacing--30);padding-left:0\">Check out some of our amazing photos of our work <\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\"><style>\n#gallery-page { padding:4rem 0.35rem; }\n#gallery-page .inner { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:0.35rem; max-width:1280px; margin:0 auto;}\n\n#gallery-page article { position:relative; overflow:hidden; border-radius:0.5rem; aspect-ratio:6\/4; }\n\n#gallery-page article img { object-fit:cover; height:100%; width:100%; display:block; object-fit:cover; position:relative; inset:0;  }\n\n#gallery-page article p { display:none; }\n\n@media( max-width:1000px ){ #gallery-page .inner { grid-template-columns:1fr 1fr 1fr; } }\n\n@media( max-width:700px ){ #gallery-page .inner { grid-template-columns:1fr 1fr; } }\n\n@media( max-width:500px ){ #gallery-page .inner { grid-template-columns:1fr; } }\n\n\n<\/style>\n\n<div id=\"gallery-page\">\n<div class=\"inner\">\n\n\n\n<article class=\"animate\" data-photo=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/IMG-20260312-WA0198.jpeg\">\n<img decoding=\"async\" src=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/IMG-20260312-WA0198-768x1024.jpeg\" \/>\n<p>INTERIOR <\/p>\n<\/article>\n\n\n\n<article class=\"animate\" data-photo=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/RCCG-JNMP-2-3D-View-3D-View-2-3D-View-3D-View-1-scaled.jpg\">\n<img decoding=\"async\" src=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/RCCG-JNMP-2-3D-View-3D-View-2-3D-View-3D-View-1-1024x920.jpg\" \/>\n<p> <\/p>\n<\/article>\n\n\n\n<article class=\"animate\" data-photo=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/RCCG-JNMP-1-3D-View-3D-View-2-scaled.jpg\">\n<img decoding=\"async\" src=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/RCCG-JNMP-1-3D-View-3D-View-2-1024x634.jpg\" \/>\n<p>3D CHURCH <\/p>\n<\/article>\n\n\n\n<article class=\"animate\" data-photo=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/IMG-20260312-WA0135-1.jpeg\">\n<img decoding=\"async\" src=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/IMG-20260312-WA0135-1-1024x577.jpeg\" \/>\n<p>Pergola Construction <\/p>\n<\/article>\n\n\n\n<article class=\"animate\" data-photo=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/SAMPLE2.jpg\">\n<img decoding=\"async\" src=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/SAMPLE2-1024x576.jpg\" \/>\n<p>Design model <\/p>\n<\/article>\n\n\n\n<article class=\"animate\" data-photo=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/A1-copy-scaled.jpg\">\n<img decoding=\"async\" src=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/A1-copy-1024x576.jpg\" \/>\n<p>3D RENDERING <\/p>\n<\/article>\n\n\n\n<article class=\"animate\" data-photo=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/IMG-20260312-WA0186.jpeg\">\n<img decoding=\"async\" src=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/IMG-20260312-WA0186-1024x577.jpeg\" \/>\n<p>Construction 5 Bedroom Duplex <\/p>\n<\/article>\n\n\n\n<article class=\"animate\" data-photo=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/img1.jpeg\">\n<img decoding=\"async\" src=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/img1-1024x577.jpeg\" \/>\n<p>Master Bath remodelling <\/p>\n<\/article>\n\n\n\n<article class=\"animate\" data-photo=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/IMG-20260312-WA0210.jpeg\">\n<img decoding=\"async\" src=\"https:\/\/ebunoluwa.name.ng\/klirview\/wp-content\/uploads\/2026\/09\/IMG-20260312-WA0210-577x1024.jpeg\" \/>\n<p>Home remodelling <\/p>\n<\/article>\n\n\n\n<\/div>\n<\/div>\n\n<style>\n#gallery-overlay { position:fixed; height:100vh; width:100vw; background:#000c; z-index:50; inset:0; padding:3.5rem 3rem; overflow:hidden; display:none; }\n\n#gallery-overlay.open { display:block; }\n\n#gallery-overlay #holder { width:100%; height:100%; overflow:hidden; position:relative; overflow:hidden; }\n\n#gallery-overlay #holder p { position:absolute; z-index:3; padding:2rem 1rem; line-height:1.5; left:0; right:0; bottom:0; background:#0008; color:#fff; text-align:center; font-size:1.2rem; font-weight:600; transition:600ms ease }\n\n#gallery-overlay #holder p.hide { transform:translateY(2rem); opacity:0; transition:250ms ease } \n\n#gallery-overlay #holder > div { width:100%; height:100%; position:relative; }\n\n#holder > div > div { position:absolute; display:flex; height:100%; width:100%; align-items:center; justify-content:center; transition:600ms ease }\n\n#holder > div > div:nth-child(1){ transform:translateX(-100%) }\n#holder > div > div:nth-child(2){   }\n#holder > div > div:nth-child(3){ transform:translateX(100%) }\n\n\n#holder div img { display:block; object-fit:contain; position:relative; height:100%; width:100%; display:block; border:none; }\n\n#galleryNav { inset:0; position:absolute; height:100%; z-index:1000; pointer-events:none; width:100%; }\n#galleryNav .navs { margin:0 auto; position:relative; max-width:1280px; width:100%; height:100%; }\n\n\n.photo-arrow { position:absolute; top:50%; z-index:100; width:52px; height:52px; border:1px solid rgba(201, 168, 76, .4); background:rgba(f, f, f, .63); backdrop-filter: blur(6px); color:#c9a84c; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.3s, border-color:0.3s, transform 0.3s; outline:none; transform:translateY(-50%); pointer-events:auto; display:block }\n\n.photo-arrow:hover { background: #c9a84c; border-color:#c9a84c; color:#0e0c09; transform:translateY(-50%) scale(1.05) }\n\n.photo-arrow.prev { left:1.2rem; }\n.photo-arrow.next { right:1.2rem;  }\n\n\n\nbody:has(#gallery-overlay.open) {\n  overflow: hidden;\n}\n\n#closeGalleryBtn { position:absolute; right:1.5rem; top:1.5rem; z-index:50; border:none; background:#fff; border-radius:50%; height:2.2rem; width:2.2rem; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:red; cursor:pointer; }\n\n<\/style>\n\n<div id=\"gallery-overlay\">\n<button id=\"closeGalleryBtn\" title=\"close\"><i class=\"fa fa-x\"><\/i><\/button>\n\n\n<div id=\"holder\">\n<div>\n\n<div><img decoding=\"async\" src=\"\" \/><\/div>\n<div><img decoding=\"async\" src=\"\" \/><\/div>\n<div><img decoding=\"async\" src=\"\" \/><\/div>\n\n\n<\/div>\n\n<p id=\"photoDescription\"> <\/p>\n\n<\/div>\n\n\n<div id=\"galleryNav\">\n<div class=\"navs\">\n\n<button class=\"photo-arrow prev\" id=\"prevGallery\" aria-label=\"Previous photo\">\n<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg><\/button>\n\n<button class=\"photo-arrow next\" id=\"nextGallery\" aria-label=\"Next photo\">\n<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M5 12H14M12 5l7 7-7 7\"\/><\/svg><\/button>\n\n<\/div>\n<\/div>\n\n\n<\/div>\n\n<script>\n\nlet gallery = document.querySelector( '#gallery-overlay' )\nlet mainHolder = document.querySelector( \"#holder > div\" )\nlet photos = document.querySelectorAll( '#gallery-page article' )\nlet galleryOverlay = document.querySelector(\"#gallery-overlay\")\nlet nextGallery = document.querySelector(\"#nextGallery\")\nlet prevGallery = document.querySelector(\"#prevGallery\")\nlet description = document.querySelector(\"#photoDescription\")\nlet closeGalleryBtn = document.querySelector(\"#closeGalleryBtn\")\n\ncloseGalleryBtn.onclick=()=>{ hideGalleryModal(); history.back(); }\n\nlet currentPhoto = null\nlet begin = false, end = false\n\nlet modalOpen = false;\n\nphotos.forEach( function(k){ k.addEventListener('click', showGalleryModal ) } )\n\n\nfunction showGalleryModal(){\nif (modalOpen) return;\n\nlet prev = this.previousElementSibling\nlet next = this.nextElementSibling\n\nif( !prev ) {\nmainHolder.children[0].querySelector('img').src=\"\" \nbegin = true;\nprevGallery.style.display = \"none\"\n}\n\nelse {\nmainHolder.children[0].querySelector('img').src = prev.dataset.photo\nbegin = false\nprevGallery.style.display = \"block\"\n}\n\n\nmainHolder.children[1].querySelector('img').src= this.dataset.photo\ncurrentPhoto = this\ndescription.textContent = this.querySelector('p').textContent\n\n\nif( !next ) {\nmainHolder.children[2].querySelector('img').src=\"\" \nend = true;\nnextGallery.style.display = \"none\"\n}\n\nelse {\nmainHolder.children[2].querySelector('img').src= next.dataset.photo\nend = false;\nnextGallery.style.display = \"block\"\n}\n\n\nmodalOpen = true;\nhistory.pushState({ modal: true }, '', location.href);\ngallery.classList.add('open')\n}\n\n\n\n\nfunction hideGalleryModal(){\n\n    if (!modalOpen) return;\n    modalOpen = false;\n    gallery.classList.remove('open')\n}\n\n\/\/closeGalleryButton.onclick = ()=>{ hideGalleryModal(); history.back(); }\n\nwindow.addEventListener('popstate', () => (modalOpen) && hideGalleryModal() )\n\nfunction previousPhoto(){\n\nnextGallery.style.display = \"block\"\n\nlet newPhoto = mainHolder.children[0].cloneNode( true )\n\nif( !( newPhoto.querySelector('img').src =  currentPhoto.previousElementSibling?.previousElementSibling?.dataset?.photo ?? \"\" ) ){\nbegin = true\nprevGallery.style.display = \"none\" \n\n} else {\nbegin = false\nprevGallery.style.display = \"block\" \n}\n\n\nmainHolder.children[2].remove()\nmainHolder.prepend( newPhoto )\n\ncurrentPhoto = currentPhoto.previousElementSibling\ndescription.textContent = currentPhoto.querySelector('p').textContent\n\n}\n\nfunction nextPhoto(){\n\nprevGallery.style.display = \"block\"\n\nlet newPhoto = mainHolder.children[0].cloneNode( true )\n\nif( !( newPhoto.querySelector('img').src =  currentPhoto.nextElementSibling?.nextElementSibling?.dataset?.photo ?? \"\" ) ){\nend = true\nnextGallery.style.display = \"none\" \n\n} else {\nend = false\nnextGallery.style.display = \"block\" \n}\n\n\nmainHolder.children[0].remove()\nmainHolder.append( newPhoto )\ncurrentPhoto = currentPhoto.nextElementSibling\n\ndescription.textContent = currentPhoto.querySelector('p').textContent\n\n}\n\n\nnextGallery.addEventListener( 'click', nextPhoto )\nprevGallery.addEventListener( 'click', previousPhoto )\n\n<\/script>\n\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Our Photo Gallery Check out some of our amazing photos of our work<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/pages\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":4,"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/pages\/20\/revisions"}],"predecessor-version":[{"id":476,"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/pages\/20\/revisions\/476"}],"wp:attachment":[{"href":"https:\/\/ebunoluwa.name.ng\/klirview\/wp-json\/wp\/v2\/media?parent=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}