{"id":987506653,"date":"2026-05-11T15:49:40","date_gmt":"2026-05-11T15:49:40","guid":{"rendered":"https:\/\/myakola.com\/biuweb\/?page_id=987506653"},"modified":"2026-05-12T06:55:38","modified_gmt":"2026-05-12T06:55:38","slug":"gallery","status":"publish","type":"page","link":"https:\/\/myakola.com\/biuweb\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"

[et_pb_section fb_built=”1″ theme_builder_area=”post_content” _builder_version=”4.27.6″ _module_preset=”default” hover_enabled=”0″ sticky_enabled=”0″ title_text=”biu_web_gallery” background_image=”https:\/\/myakola.com\/biuweb\/wp-content\/uploads\/2026\/05\/biu_web_gallery.png” custom_padding=”75px||75px||true|false”][et_pb_row _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content”][et_pb_column _builder_version=”4.27.6″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_text _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” header_text_color=”#FFFFFF” header_font_size=”55px” header_font=”–et_global_heading_font||||||||” hover_enabled=”0″ sticky_enabled=”0″]<\/p>\n

Gallery<\/strong><\/h1>\n
[\/et_pb_text][et_pb_divider _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” global_colors_info=”{%22gcid-78ba3c88-1967-4ad9-b28f-f2e236728d6f%22:%91%22color%22%93}” color=”gcid-78ba3c88-1967-4ad9-b28f-f2e236728d6f” divider_weight=”3px” width=”11%” custom_margin=”|||5px|false|false” hover_enabled=”0″ sticky_enabled=”0″][\/et_pb_divider][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ theme_builder_area=”post_content” _builder_version=”4.27.6″ _module_preset=”default”][et_pb_row _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” max_width=”2560px” width=”100%” hover_enabled=”0″ sticky_enabled=”0″][et_pb_column _builder_version=”4.27.6″ _module_preset=”default” type=”4_4″ theme_builder_area=”post_content”][et_pb_code _builder_version=”4.27.6″ _module_preset=”default” theme_builder_area=”post_content” hover_enabled=”0″ sticky_enabled=”0″]Warehouse Media Gallery<\/title><\/p>\n<style> \/* --- Gallery Component Styles --- \/ .custom-gallery-section { max-width: 1400px; \/ Increased width for a wider display \/ width: 100%; margin: 3rem auto; padding: 0 1rem; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif; } .gallery-container { position: relative; width: 100%; background-color: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); aspect-ratio: 16 \/ 9; display: flex; align-items: center; justify-content: center; } .gallery-track { width: 100%; height: 100%; position: relative; } .gallery-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1; } .gallery-slide.active { opacity: 1; pointer-events: auto; z-index: 2; } .gallery-slide img, .gallery-slide video { width: 100%; height: 100%; object-fit: contain; \/ Keeps full media visible without cropping \/ background: #0d0d0d; } \/ Navigation Controls \/ .gallery-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.85); color: #111; border: none; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: background 0.2s ease, transform 0.2s ease; } .gallery-nav-btn:hover { background: #ffffff; transform: translateY(-50%) scale(1.05); } .gallery-nav-btn:active { transform: translateY(-50%) scale(0.95); } .gallery-prev { left: 1.5rem; } .gallery-next { right: 1.5rem; } .gallery-nav-btn svg { width: 24px; height: 24px; fill: currentColor; } \/ Indicator Dots \/ .gallery-indicators { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 1.25rem; flex-wrap: wrap; } .indicator-dot { width: 10px; height: 10px; border-radius: 50%; background-color: #ccc; border: none; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; } .indicator-dot.active { background-color: #2b6cb0; transform: scale(1.3); } \/ Responsive Fallback Heights for older browsers without aspect-ratio *\/ @supports not (aspect-ratio: 16 \/ 9) { .gallery-container { height: 700px; } @media (max-width: 1024px) { .gallery-container { height: 500px; } } @media (max-width: 768px) { .gallery-container { height: 350px; } } @media (max-width: 480px) { .gallery-container { height: 250px; } } }<\/style>\n<p><\/head><body><\/p>\n<section class=\"custom-gallery-section\"> <\/p>\n<div class=\"gallery-container\"> <\/p>\n<div class=\"gallery-track\"> <\/p>\n<div class=\"gallery-slide active\"> <img decoding=\"async\" src=\"https:\/\/myakola.com\/biuweb\/wp-content\/uploads\/2026\/05\/Warehouse-Pics-1.jpeg\" alt=\"Warehouse View 1\" loading=\"lazy\"> <\/div>\n<p> <\/p>\n<div class=\"gallery-slide\"> <img decoding=\"async\" src=\"https:\/\/myakola.com\/biuweb\/wp-content\/uploads\/2026\/05\/Warehouse-Pics-2.jpeg\" alt=\"Warehouse View 2\" loading=\"lazy\"> <\/div>\n<p> <\/p>\n<div class=\"gallery-slide\"> <img decoding=\"async\" src=\"https:\/\/myakola.com\/biuweb\/wp-content\/uploads\/2026\/05\/Warehouse-Pics-3.jpeg\" alt=\"Warehouse View 3\" loading=\"lazy\"> <\/div>\n<p> <\/p>\n<div class=\"gallery-slide\"> <img decoding=\"async\" src=\"https:\/\/myakola.com\/biuweb\/wp-content\/uploads\/2026\/05\/Warehouse-Pics-4.jpeg\" alt=\"Warehouse View 4\" loading=\"lazy\"> <\/div>\n<p> <\/p>\n<div class=\"gallery-slide\"> <img decoding=\"async\" src=\"https:\/\/myakola.com\/biuweb\/wp-content\/uploads\/2026\/05\/Warehouse-Pics-5.jpeg\" alt=\"Warehouse View 5\" loading=\"lazy\"> <\/div>\n<p> <\/p>\n<div class=\"gallery-slide\"> <img decoding=\"async\" src=\"https:\/\/myakola.com\/biuweb\/wp-content\/uploads\/2026\/05\/Warehouse-Pics-6-1.jpeg\" alt=\"Warehouse View 6\" loading=\"lazy\"> <\/div>\n<p> <\/p>\n<div class=\"gallery-slide\"> <video controls preload=\"metadata\"><source src=\"https:\/\/myakola.com\/biuweb\/wp-content\/uploads\/2026\/05\/Warehouse-Videos-1.mp4\" type=\"video\/mp4\"> Your browser does not support the video tag.<\/video> <\/div>\n<p> <\/p>\n<div class=\"gallery-slide\"> <video controls preload=\"metadata\"><source src=\"https:\/\/myakola.com\/biuweb\/wp-content\/uploads\/2026\/05\/Warehouse-Videos-2.mp4\" type=\"video\/mp4\"> Your browser does not support the video tag.<\/video> <\/div>\n<p> <\/p>\n<div class=\"gallery-slide\"> <video controls preload=\"metadata\"><source src=\"https:\/\/myakola.com\/biuweb\/wp-content\/uploads\/2026\/05\/Warehouse-Videos-3.mp4\" type=\"video\/mp4\"> Your browser does not support the video tag.<\/video> <\/div>\n<p> <\/div>\n<p> <button class=\"gallery-nav-btn gallery-prev\" aria-label=\"Previous Slide\"> <svg viewBox=\"0 0 24 24\"><path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/><\/svg> <\/button> <button class=\"gallery-nav-btn gallery-next\" aria-label=\"Next Slide\"> <svg viewBox=\"0 0 24 24\"><path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/><\/svg> <\/button> <\/div>\n<p> <\/p>\n<div class=\"gallery-indicators\"><\/div>\n<p><\/section>\n<p><script> document.addEventListener('DOMContentLoaded', () => { const slides = document.querySelectorAll('.gallery-slide'); const prevBtn = document.querySelector('.gallery-prev'); const nextBtn = document.querySelector('.gallery-next'); const indicatorsContainer = document.querySelector('.gallery-indicators'); let currentIndex = 0; \/\/ Dynamically create indicator dots based on slide count slides.forEach((_, index) => { const dot = document.createElement('button'); dot.classList.add('indicator-dot'); if (index === 0) dot.classList.add('active'); dot.setAttribute('aria-label', `Go to slide ${index + 1}`); dot.addEventListener('click', () => goToSlide(index)); indicatorsContainer.appendChild(dot); }); const dots = document.querySelectorAll('.indicator-dot'); function pauseCurrentVideo() { const activeSlide = slides[currentIndex]; const video = activeSlide.querySelector('video'); if (video && !video.paused) { video.pause(); } } function updateCarousel() { \/\/ Remove active states slides.forEach(slide => slide.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); \/\/ Add active state to current slide and corresponding dot slides[currentIndex].classList.add('active'); dots[currentIndex].classList.add('active'); } function goToSlide(index) { if (index === currentIndex) return; pauseCurrentVideo(); currentIndex = index; updateCarousel(); } function nextSlide() { pauseCurrentVideo(); currentIndex = (currentIndex + 1) % slides.length; updateCarousel(); } function prevSlide() { pauseCurrentVideo(); currentIndex = (currentIndex - 1 + slides.length) % slides.length; updateCarousel(); } \/\/ Event Listeners nextBtn.addEventListener('click', nextSlide); prevBtn.addEventListener('click', prevSlide); \/\/ Optional: Keyboard navigation support when carousel is in focus document.querySelector('.gallery-container').addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') prevSlide(); if (e.key === 'ArrowRight') nextSlide(); }); });<\/script><\/body><\/html>[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gallery<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-987506653","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/myakola.com\/biuweb\/wp-json\/wp\/v2\/pages\/987506653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myakola.com\/biuweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/myakola.com\/biuweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/myakola.com\/biuweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/myakola.com\/biuweb\/wp-json\/wp\/v2\/comments?post=987506653"}],"version-history":[{"count":4,"href":"https:\/\/myakola.com\/biuweb\/wp-json\/wp\/v2\/pages\/987506653\/revisions"}],"predecessor-version":[{"id":987506661,"href":"https:\/\/myakola.com\/biuweb\/wp-json\/wp\/v2\/pages\/987506653\/revisions\/987506661"}],"wp:attachment":[{"href":"https:\/\/myakola.com\/biuweb\/wp-json\/wp\/v2\/media?parent=987506653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}