PhotoGallery2023｜富士登山プライベートガイド/title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="2023年の富士登山プライベート専門ガイドPhotoGalleryです。GroundUpではツアー中に写真撮影を行っており、帰ってからも余韻に浸れます。"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css?739"> <link rel="icon" href="/favicon.ico"> <style> body { margin: 0; font-family: sans-serif; } h1 { font-size: 20px; margin: 30px auto 0; max-width: 760px; padding-left: 13px; text-align: left; } .breadcrumb { max-width: 760px; margin: 0 auto; padding: 10px 13px; background: none; } .gallery { column-count: 4; column-gap: 2px; max-width: 760px; margin: 0 auto 50px; opacity: 0; transition: opacity 0.5s ease; } .btn { max-width: 760px; margin: 0 auto; margin-bottom: 80px; } @media (max-width: 500px) { .gallery { column-count: 3; } } .gallery img { width: 100%; display: block; break-inside: avoid; margin-bottom: 2px; border-radius: 4px; } /* スピナー */ #loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; display: flex; align-items: center; justify-content: center; z-index: 9999; } .spinner { border: 8px solid #eee; border-top: 8px solid #333; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body>  <div id="loader"> <div class="spinner"></div> </div>  <h1>Photogallery2023</h1>  <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="https://morgen-rot.com/">富士登山プライベートガイド</a></li> <li class="breadcrumb-item"><a href="photogallery.html">Photogallery</a></li> <li class="breadcrumb-item active" aria-current="page">2023</li> </ol>  <div class="gallery" id="gallery"></div> <div class="btn"> <a href="photogallery.html"><i class="fa fa-caret-right gr"></i>Photogalleryに戻る</a> </div>  <script> /* 個別設定 */ const imageCount = 43; const folder = 'macy-fuji2023'; /* 以下共通 */ const gallery = document.getElementById("gallery"); for (let i = 1; i <= imageCount; i++) { const img = document.createElement("img"); const number = String(i).padStart(2, '0'); img.setAttribute("data-src", `${folder}/${number}.webp`); img.setAttribute("alt", ""); img.classList.add("lazy-image"); gallery.appendChild(img); } let loaded = 0; const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.onload = () => { loaded++; if (loaded === 10) hideLoader(); }; observer.unobserve(img); } }); }); document.querySelectorAll(".lazy-image").forEach(img => observer.observe(img)); function hideLoader() { const loader = document.getElementById("loader"); if (loader) loader.style.display = "none"; gallery.style.opacity = 1; } setTimeout(hideLoader, 5000); </script> </body> </html>