https://oldmamalahoa.com/galleries/ Recent content in Photo Galleries on Old Mamalahoa Hugo en-us https://oldmamalahoa.com/galleries/oldmamalahoa_com/ Mon, 01 Jan 0001 00:00:00 +0000 https://oldmamalahoa.com/galleries/oldmamalahoa_com/ <p>Photos of the Old Mamalahoa Highway on the Hāmākua coast of Hawaiʻi Island. Recent photos are shown in full; older ones are thinned out so the page stays quick to load.</p> <div class="gallery-wrapper"> <ul id="gallery"><li data-width="4590" data-height="3060"> <a href="https://oldmamalahoa.com/photo/2026-06-29-102_PANA-P1020136/"><img src="https://oldmamalahoa.com/pics/small/2026-06-29-102_PANA-P1020136.jpg" alt="Gallery image" loading="lazy"></a> </li><li data-width="4590" data-height="3060"> <a href="https://oldmamalahoa.com/photo/2026-06-29-102_PANA-P1020111/"><img src="https://oldmamalahoa.com/pics/small/2026-06-29-102_PANA-P1020111.jpg" alt="Gallery image" loading="lazy"></a> </li><li data-width="3060" data-height="4590"> <a href="https://oldmamalahoa.com/photo/2026-06-29-102_PANA-P1020056/"><img src="https://oldmamalahoa.com/pics/small/2026-06-29-102_PANA-P1020056.jpg" alt="Gallery image" loading="lazy"></a> </li><li data-width="3060" data-height="4590"> <a href="https://oldmamalahoa.com/photo/2026-06-29-102_PANA-P1020013/"><img src="https://oldmamalahoa.com/pics/small/2026-06-29-102_PANA-P1020013.jpg" alt="Gallery image" loading="lazy"></a> </li><li data-width="3060" data-height="4590"> <a href="https://oldmamalahoa.com/photo/2026-06-29-101_PANA-P1010997/"><img src="https://oldmamalahoa.com/pics/small/2026-06-29-101_PANA-P1010997.jpg" alt="Gallery image" loading="lazy"></a> </li><li data-width="4023" data-height="2682"> <a href="https://oldmamalahoa.com/photo/2026-06-29-101_PANA-P1010965/"><img src="https://oldmamalahoa.com/pics/small/2026-06-29-101_PANA-P1010965.jpg" alt="Gallery image" loading="lazy"></a> </li><li data-width="3546" data-height="2364"> <a href="https://oldmamalahoa.com/photo/2026-06-29-101_PANA-P1010953/"><img src="https://oldmamalahoa.com/pics/small/2026-06-29-101_PANA-P1010953.jpg" alt="Gallery image" loading="lazy"></a> </li></ul><style> #gallery { position: relative; list-style: none; width: 100%; margin: 0; padding: 0; } #gallery li { position: absolute; overflow: hidden; background: #f9f9f9; border: 1px solid #e0e0e0; } #gallery img { width: 100%; height: 100%; display: block; object-fit: contain; } .gallery-load-more-wrapper { text-align: center; margin: 1.5em 0; } .gallery-load-more { display: inline-block; padding: 0.5em 1.2em; border: 1px solid #999; border-radius: 4px; background: #f0f0f0; color: inherit; font: inherit; cursor: pointer; } .gallery-load-more:hover { background: #e0e0e0; } </style> <script src="https://oldmamalahoa.com/js/justified-layout.js"></script> <script> function layoutGallery() { const gallery = document.getElementById('gallery'); if (!gallery) return; const items = []; gallery.querySelectorAll('li').forEach((li) => { const width = parseInt(li.dataset.width) || 1200; const height = parseInt(li.dataset.height) || 800; items.push({ width, height }); }); if (items.length === 0) return; const parentElement = gallery.parentElement; const styles = window.getComputedStyle(parentElement); const paddingLeft = parseFloat(styles.paddingLeft) || 0; const paddingRight = parseFloat(styles.paddingRight) || 0; const containerWidth = parentElement.offsetWidth - paddingLeft - paddingRight; try { const justifiedLayout = require('justified-layout'); const layout = justifiedLayout(items, { containerWidth: containerWidth, containerPadding: 10, boxSpacing: { horizontal: 10, vertical: 10 }, targetRowHeight: 300, targetRowHeightTolerance: 0.5, }); gallery.style.height = layout.containerHeight + 'px'; const lis = gallery.querySelectorAll('li'); layout.boxes.forEach((box, index) => { if (lis[index]) { lis[index].style.width = box.width + 'px'; lis[index].style.height = box.height + 'px'; lis[index].style.left = box.left + 'px'; lis[index].style.top = box.top + 'px'; } }); } catch (e) { console.error('Gallery layout error:', e); } } window.addEventListener('load', layoutGallery); let resizeTimeout; window.addEventListener('resize', () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(layoutGallery, 250); }); setTimeout(layoutGallery, 100); document.querySelectorAll('.gallery-load-more').forEach((btn) => { const template = document.getElementById(btn.dataset.target); if (!template) return; const count = parseInt(btn.dataset.count, 10) || 0; btn.textContent = count === 1 ? 'Load 1 more image' : ('Load ' + count + ' more images'); btn.style.display = ''; btn.addEventListener('click', () => { const gallery = document.getElementById('gallery'); if (gallery && template.content) { gallery.appendChild(template.content.cloneNode(true)); } btn.remove(); template.remove(); layoutGallery(); }); }); </script> </div>