✨进入猫次元🐈

_____________________________

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画廊</title>

<link rel="stylesheet" href="https://unpkg.com/photoswipe@5.4.4/dist/photoswipe.css">

/* 强制把 Blogger 原生顶部栏、返回图标、搜索图标提到最顶层，防止被画廊遮挡 */
header,
#header,
.header-widget,
.mobile-header,
.search-button,
.back-link,
.navbar {
  position: relative;
  z-index: 9;
}

/* ====== 2. 页面容器（低层级，不挡住顶部按钮） ====== */
.page-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: relative;
  z-index: 1; /* 保持较低层级，避免遮挡顶栏 */
}

/* 电脑端展示（屏幕 > 768px） */
@media (min-width: 769px) {
  .page-container {
    width: 100%;
    max-width: 1800px; /* 电脑端展示大小，可自行修改 */
  }
}

/* 移动端展示（屏幕 <= 768px） */
@media (max-width: 768px) {
  .page-container {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc((100% - 100vw) / 2);
    margin-right: calc((100% - 100vw) / 2);
    padding: 1rem 0.4rem;
    overflow-x: hidden; /* 仅在画廊容器防溢出，不破坏 Blogger 全局 body */
  }
}

/* ====== 3. 画廊核心布局 ====== */
.image-gallery[image-gallery=justify] {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 默认样式（适用于 手机端 & iPad端：屏幕宽度 <= 1024px） */
.image-gallery[image-gallery=justify] .gallery_card {
  box-sizing: border-box;
  display: block;
  padding: 4px; /* 手机/iPad 端图片间隔 */
  text-decoration: none;
  cursor: zoom-in;
}

/* 电脑端样式（屏幕宽度 > 1024px） */
@media (min-width: 1025px) {
  .image-gallery[image-gallery=justify] .gallery_card {
    padding: 8px; /* 电脑端图片间隔 */
  }
}

.gallery_card_image {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  background-color: #f5f5f5;
}

.gallery_card_image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

/* 标题样式 */
.title-area {
  text-align: right;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.title-area ul {
  list-style-type: disc; /* 显示列表圆点 */
  padding-left: 20px;    /* 留出左侧边距，防止圆点被剪切 */
}
    
.title-area small {
  font-size: 1.2rem;
}

/* 滚动淡入动画 */
.scroll-transition-fade {
  transition: transform 1s ease-in-out, opacity 0.8s ease-in-out;
  will-change: transform, opacity;
}

.scroll-transition-fade.below-viewport {
  opacity: 0;
  transform: translateY(40px);
}
/* 覆盖 PhotoSwipe 灯箱内的鼠标光标样式 */
.pswp__img, 
.pswp__zoom-wrap {
  cursor: pointer; /* 改为手型 (点击手势) */
}
/* 全设备隐藏灯箱右上角关闭按钮 */
.pswp__button--close {
  display: none;
}
    
/* 仅在电脑端（屏幕宽度 > 1024px）放大灯箱左上角计数 */
@media (min-width: 1025px) {
  .pswp__counter {
    font-size: 18px; /* 电脑端计数大小，可自行调整为 20px 等 */
    opacity: 0.8;
  }
}

/* 箭头图标本身的大小和透明度 */
.pswp__button--arrow .pswp__icn {
  width: 50px;          /* 图标宽度，默认约 32px */
  height: 50px;         /* 图标高度 */
  opacity: 0.7;         /* 透明度，0~1，数值越小越透明 */
}

/* 可选：鼠标悬停时更明显一点 */
.pswp__button--arrow:hover .pswp__icn {
  opacity: 0.8;
}

/* 电脑端：箭头 idle 睡眠效果 */
@media (min-width: 1025px) {
  .pswp__button--arrow {
    transition: opacity 0.35s ease;
  }

/* 睡眠状态：隐藏箭头 */
  .pswp--arrows-idle .pswp__button--arrow {
    opacity: 0;
  }

/* 可选：鼠标悬停在箭头上时保持可见（更友好） */
  .pswp__button--arrow:hover {
    opacity: 0.8;
  }
}
  </style>
</head>
<body>

<div class="page-container">
    <p><img src="https://v0idspace.neocities.org/img/neko1_e0.gif"> 
</p>
    
    <div class="title-area">
      <ul>
        <li>
          <span style="color: #f00; font-weight: bold; font-style: normal; margin-right: 4px;">:</span><i><b><small><span style="color: #f00;">Restorative Topophilia</span></small></b></i>
        </li>
        <li>
          <span style="color: #f00; font-weight: bold; font-style: normal; margin-right: 4px;">:</span><i style="font-size: 1.5rem; background-color: initial;"><b><small><span style="color: #f00;">这片土地使我痊愈</span></small></b></i>
        </li>
      </ul>
    </div>

<div class="image-gallery initialized" image-gallery="justify" image-gallery-row image-gallery-pad="1" image-gallery-gutter="2" id="gallery--test-padding">

<a class="gallery_card" data-cropped="true" data-pswp-height="1778" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/cef30ef94b45444ae2c32d5acfa6eeadbd7be205a042c342f007372df0faf446/Restorative-Topophilia-S-36.jpg" style="width: 29.3338%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 111.125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/600/q/75/i/cef30ef94b45444ae2c32d5acfa6eeadbd7be205a042c342f007372df0faf446/Restorative-Topophilia-S-36.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/595eebcea7819130bd18d7ae984b9e89da44b47b666bd588e22a7a9d69b7b7a9/Restorative-Topophilia-S-42.jpg" style="width: 26.34%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/600/q/75/i/595eebcea7819130bd18d7ae984b9e89da44b47b666bd588e22a7a9d69b7b7a9/Restorative-Topophilia-S-42.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="1600" data-pswp-width="2240" href="https://freight.cargo.site/t/original/i/03b6a912af1ce276a88355e7d8ec248d4a3ea0da6c1c56862b44c4b1672938ef/Restorative-Topophilia-S-98.jpg" style="width: 44.3243%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 71.4286%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/900/q/75/i/03b6a912af1ce276a88355e7d8ec248d4a3ea0da6c1c56862b44c4b1672938ef/Restorative-Topophilia-S-98.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/3e7b8d5ad9557f130dd4ed50df8b0b398f763834a6afc6d00c1e84e6749195bf/Restorative-Topophilia-S-49.jpg" style="width: 37.0069%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/800/q/75/i/3e7b8d5ad9557f130dd4ed50df8b0b398f763834a6afc6d00c1e84e6749195bf/Restorative-Topophilia-S-49.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="1600" data-pswp-width="2240" href="https://freight.cargo.site/t/original/i/dda4eeb94f9c6a9a5731568ec141826588faaeb19670131711ccab2973a4a629/Restorative-Topophilia-S-138.jpg" style="width: 62.9922%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 71.4286%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/1500/q/75/i/dda4eeb94f9c6a9a5731568ec141826588faaeb19670131711ccab2973a4a629/Restorative-Topophilia-S-138.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="1600" data-pswp-width="2240" href="https://freight.cargo.site/t/original/i/debbcb8e312b98d971b07d58c4990ce9f5f18049b569e123c53d46d881e078cf/Restorative-Topophilia-S-232.jpg" style="width: 62.9922%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 71.4286%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/1500/q/75/i/debbcb8e312b98d971b07d58c4990ce9f5f18049b569e123c53d46d881e078cf/Restorative-Topophilia-S-232.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/cb50b8c1f6502c738bf274b197c15b8f6274070e25177493d82afb1987259437/Restorative-Topophilia-S-112.jpg" style="width: 37.0069%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/800/q/75/i/cb50b8c1f6502c738bf274b197c15b8f6274070e25177493d82afb1987259437/Restorative-Topophilia-S-112.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/7bc6fdf3a4b9990b5e21e57111cb5be208efe3de6c4c1ea7ddb27c07e13d47ad/Restorative-Topophilia-S-50.jpg" style="width: 26.3437%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/600/q/75/i/7bc6fdf3a4b9990b5e21e57111cb5be208efe3de6c4c1ea7ddb27c07e13d47ad/Restorative-Topophilia-S-50.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/bad87710e7d4e7e5af2a3ca54b0b05220008b518865ee4821a67df6fbfc34dd9/Restorative-Topophilia-S-44.jpg" style="width: 26.3437%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/600/q/75/i/bad87710e7d4e7e5af2a3ca54b0b05220008b518865ee4821a67df6fbfc34dd9/Restorative-Topophilia-S-44.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="1600" data-pswp-width="2399" href="https://freight.cargo.site/t/original/i/07e6c93df5b8c0d174ac59f9973458df92307d44ff0c77c0dc425fcdcc573562/Restorative-Topophilia-S-51.jpg" style="width: 47.3107%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 66.6945%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/1000/q/75/i/07e6c93df5b8c0d174ac59f9973458df92307d44ff0c77c0dc425fcdcc573562/Restorative-Topophilia-S-51.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="1600" data-pswp-width="2240" href="https://freight.cargo.site/t/original/i/834470ecf929d5b9460f830154ad53d57c7a5fe85b5a03d48c43531428e86334/Restorative-Topophilia-S-221.jpg" style="width: 62.9922%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 71.4286%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/1500/q/75/i/834470ecf929d5b9460f830154ad53d57c7a5fe85b5a03d48c43531428e86334/Restorative-Topophilia-S-221.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/ef70cfe86db3154e332e9aae6dd0fcee088372b86532826263cbcc5df54df32b/Restorative-Topophilia-S-55.jpg" style="width: 37.0069%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/800/q/75/i/ef70cfe86db3154e332e9aae6dd0fcee088372b86532826263cbcc5df54df32b/Restorative-Topophilia-S-55.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/a20d4a3afa8bef727107fee397916ddaec5de1d9eabdee278e880834a2fba0d3/Restorative-Topophilia-S-65.jpg" style="width: 33.333%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/700/q/75/i/a20d4a3afa8bef727107fee397916ddaec5de1d9eabdee278e880834a2fba0d3/Restorative-Topophilia-S-65.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/7e22dd07593d3e2ffc1e6ecc0d5ccbe657098d747c0f314a59cb8cfe23065914/Restorative-Topophilia-S-94.jpg" style="width: 33.333%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/700/q/75/i/7e22dd07593d3e2ffc1e6ecc0d5ccbe657098d747c0f314a59cb8cfe23065914/Restorative-Topophilia-S-94.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/9b2d90c4ad4177513b4b80e26c5854c07a92f1f2311d0f7a61cbc200fcdb41ce/Restorative-Topophilia-S-70.jpg" style="width: 33.333%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/700/q/75/i/9b2d90c4ad4177513b4b80e26c5854c07a92f1f2311d0f7a61cbc200fcdb41ce/Restorative-Topophilia-S-70.jpg">
        </div>
      </a>
      
      
      
      
      <a class="gallery_card" data-cropped="true" data-pswp-height="2071" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/17fcbbc52df709425ed3b71ffb45844e23afb5abf9e5c5b6ec92bbcd2483ea80/Restorative-Topophilia-S-251.jpg" style="width: 36.2418%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 129.438%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/700/q/75/i/17fcbbc52df709425ed3b71ffb45844e23afb5abf9e5c5b6ec92bbcd2483ea80/Restorative-Topophilia-S-251.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="1600" data-pswp-width="2240" href="https://freight.cargo.site/t/original/i/bd40e31534fe12eb910fcaabd0e5a499ed6b9412bd9f3c76490fabcb2b98d816/Restorative-Topophilia-S-109.jpg" style="width: 63.7573%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 71.4286%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/1500/q/75/i/bd40e31534fe12eb910fcaabd0e5a499ed6b9412bd9f3c76490fabcb2b98d816/Restorative-Topophilia-S-109.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/5514e559855cdce2b0421b63e62e078c51dc42b776f7e5d48ce337c74c4249d4/Restorative-Topophilia-S-116.jpg" style="width: 33.333%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/700/q/75/i/5514e559855cdce2b0421b63e62e078c51dc42b776f7e5d48ce337c74c4249d4/Restorative-Topophilia-S-116.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/c1f4bdb84dc91b2c44d54ee75369b13fa11aee4a93f356bd34023a2fdf4a2b60/Restorative-Topophilia-S-120.jpg" style="width: 33.333%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/700/q/75/i/c1f4bdb84dc91b2c44d54ee75369b13fa11aee4a93f356bd34023a2fdf4a2b60/Restorative-Topophilia-S-120.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/cedb0b8374252b01ef863163c5ccafc44427ca0026eb43d1f03354edae76ff46/Restorative-Topophilia-S-119.jpg" style="width: 33.333%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/700/q/75/i/cedb0b8374252b01ef863163c5ccafc44427ca0026eb43d1f03354edae76ff46/Restorative-Topophilia-S-119.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="1600" data-pswp-width="2240" href="https://freight.cargo.site/t/original/i/039f9df48343cd93e14b1ac54126fb39637fb3e1c6dba25ad1107056d5006b86/Restorative-Topophilia-S-124.jpg" style="width: 50%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 71.4286%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/1000/q/75/i/039f9df48343cd93e14b1ac54126fb39637fb3e1c6dba25ad1107056d5006b86/Restorative-Topophilia-S-124.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="1600" data-pswp-width="2240" href="https://freight.cargo.site/t/original/i/35552e1f31434e60c69c3c07180c8a81840169f8f6a415f0ce5556719f5bf95b/Restorative-Topophilia-S-133.jpg" style="width: 50%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 71.4286%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/1000/q/75/i/35552e1f31434e60c69c3c07180c8a81840169f8f6a415f0ce5556719f5bf95b/Restorative-Topophilia-S-133.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="2000" data-pswp-width="1600" href="https://freight.cargo.site/t/original/i/db2b0fde1f29333237ea2ec962078705da4464925a8419591fb3e018c9d58dfb/Restorative-Topophilia-S-129.jpg" style="width: 37.0069%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 125%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/800/q/75/i/db2b0fde1f29333237ea2ec962078705da4464925a8419591fb3e018c9d58dfb/Restorative-Topophilia-S-129.jpg">
        </div>
      </a>

<a class="gallery_card" data-cropped="true" data-pswp-height="1600" data-pswp-width="2240" href="https://freight.cargo.site/t/original/i/d9bdf7e44d86686853d8c39c083728f889da0ac017dbd71d34dbddd14d0d3ccd/Restorative-Topophilia-S-132.jpg" style="width: 62.9922%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 71.4286%;">
          <img alt="" class="image-zoom" src="//freight.cargo.site/w/1500/q/75/i/d9bdf7e44d86686853d8c39c083728f889da0ac017dbd71d34dbddd14d0d3ccd/Restorative-Topophilia-S-132.jpg">
        </div>
      </a>
<p><img src="https://v0idspace.neocities.org/img/neko1_e0.gif">

</p>
    </div>
  </div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
      if ('addEventListener' in document && window.FastClick) {
        FastClick.attach(document.body);
      }

const fadeElements = document.querySelectorAll('.scroll-transition-fade');
      let lastScrollTop = 0;
      let ticking = false;

window.addEventListener('scroll', () => {
        if (!ticking) {
          requestAnimationFrame(checkScroll);
          ticking = true;
        }
      }, { passive: true });

checkScroll();
    });
  </script>

<script type="module">
  import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe@5.4.4/dist/photoswipe-lightbox.esm.js';

const lightbox = new PhotoSwipeLightbox({
    gallery: '#gallery--test-padding',
    children: 'a.gallery_card',
    pswpModule: () => import('https://unpkg.com/photoswipe@5.4.4/dist/photoswipe.esm.js'),
    padding: { top: 20, bottom: 20, left: 20, right: 20 },
    close: true,
    zoom: false,
    imageClickAction: 'close',
    bgClickAction: 'close',
    tapAction: 'close',
    doubleTapAction: 'zoom',
    showHideAnimationType: 'zoom',
    bgOpacity: 0.95
  });

// ===== 电脑端箭头 idle 睡眠功能 =====
  const IDLE_DELAY = 1500;
  let idleTimer = null;
  let isDesktop = window.matchMedia('(min-width: 1025px)').matches;
  let isHoveringArrow = false; // 关键：是否正悬停在箭头上

function wakeArrows() {
    if (!lightbox.pswp || !lightbox.pswp.element) return;
    
    lightbox.pswp.element.classList.remove('pswp--arrows-idle');
    clearTimeout(idleTimer);

// 只有不在箭头上悬停时，才启动睡眠计时
    if (!isHoveringArrow) {
      idleTimer = setTimeout(() => {
        if (lightbox.pswp && lightbox.pswp.element && !isHoveringArrow) {
          lightbox.pswp.element.classList.add('pswp--arrows-idle');
        }
      }, IDLE_DELAY);
    }
  }

function onMouseMove() {
    if (isDesktop) wakeArrows();
  }

// 打开后绑定事件
  lightbox.on('openingAnimationEnd', () => {
    if (!isDesktop) return;

wakeArrows();

const el = lightbox.pswp.element;
    el.addEventListener('mousemove', onMouseMove, { passive: true });

// 关键：监听左右箭头的悬停
    const arrows = el.querySelectorAll('.pswp__button--arrow');
    arrows.forEach(arrow => {
      arrow.addEventListener('mouseenter', () => {
        isHoveringArrow = true;
        wakeArrows(); // 强制显示并暂停计时
      });
      arrow.addEventListener('mouseleave', () => {
        isHoveringArrow = false;
        wakeArrows(); // 离开后重新开始计时
      });
    });
  });

// 关闭时清理
  lightbox.on('close', () => {
    clearTimeout(idleTimer);
    isHoveringArrow = false;
    if (lightbox.pswp && lightbox.pswp.element) {
      lightbox.pswp.element.classList.remove('pswp--arrows-idle');
      lightbox.pswp.element.removeEventListener('mousemove', onMouseMove);
    }
  });

window.addEventListener('resize', () => {
    isDesktop = window.matchMedia('(min-width: 1025px)').matches;
  });

lightbox.init();
</script>
</body>
</html>

_____________________________

<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画廊</title>

<link rel="stylesheet" href="https://unpkg.com/photoswipe@5.4.4/dist/photoswipe.css">

/* ====== 1. 作用域隔离：只重置画廊内部，绝对不污染 Blogger 原生顶部栏/图标 ====== */
.page-container,
.page-container * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 电脑端展示（屏幕 > 768px） */
@media (min-width: 769px) {
  .page-container {
    width: 100%;
    max-width: 1800px; /* 电脑端展示大小，可自行修改 */
  }
}

/* ====== 3. 画廊核心布局 ====== */
.image-gallery[image-gallery=justify] {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 电脑端样式（屏幕宽度 > 1024px） */
@media (min-width: 1025px) {
  .image-gallery[image-gallery=justify] .gallery_card {
    padding: 8px; /* 电脑端图片间隔 */
  }
}

.gallery_card_image {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  background-color: #f5f5f5;
}

.gallery_card_image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

/* 标题样式 */
.title-area {
  text-align: right;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.title-area ul {
  list-style-type: disc; /* 显示列表圆点 */
  padding-left: 20px;    /* 留出左侧边距，防止圆点被剪切 */
}

/* 专门给左侧的列表点设置红色 */
.title-area li::marker {
  color: #f00;
}

.title-area small {
  font-size: 1.1rem;
}

/* 滚动淡入动画 */
.scroll-transition-fade {
  transition: transform 1s ease-in-out, opacity 0.8s ease-in-out;
  will-change: transform, opacity;
}

/* 可选：鼠标悬停时更明显一点 */
.pswp__button--arrow:hover .pswp__icn {
  opacity: 0.8;
}

/* 电脑端：箭头 idle 睡眠效果 */
@media (min-width: 1025px) {
  .pswp__button--arrow {
    transition: opacity 0.35s ease;
  }

/* 睡眠状态：隐藏箭头 */
  .pswp--arrows-idle .pswp__button--arrow {
    opacity: 0;
  }

/* 可选：鼠标悬停在箭头上时保持可见（更友好） */
  .pswp__button--arrow:hover {
    opacity: 0.8;
  }
}
  </style>
</head>
<body>

<div class="page-container">
    
    

    <div class="title-area">
      <ul>
        <li><i><b><small><span style="color: #f00;">Let's take photos together sometime.</span></small></b></i></li>
        <li><i style="font-size: 1.5rem; background-color: initial;"><b><small><span style="color: #f00;">有空一起拍照吧。</span></small></b></i></li>
      </ul>
    </div>

<a class="gallery_card" data-cropped="true" data-pswp-height="2400" data-pswp-width="1600" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQPwJHsYTYJYYMTAHPTDNuOFXqTk7ZQ4gfzTA8EMEwGlVpdzvVW97r_w2dAoHoY1xrtX7j9XFqS0InyvaO_IEnTWElYi4r0CafSd3AmtMkpZdJBEH_z-n_xoEYCO-WxaUcLPrge2Y2Yuj7f2-88Vtqeem79ilG80VQK8am1PijbfO6xXMcgwBbix7gI2MO/s600/1.JPG" style="width: 29.3338%;">
        <div class="gallery_card_image scroll-transition-fade" style="padding-bottom: 111.125%;">
          <img alt="" class="image-zoom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQPwJHsYTYJYYMTAHPTDNuOFXqTk7ZQ4gfzTA8EMEwGlVpdzvVW97r_w2dAoHoY1xrtX7j9XFqS0InyvaO_IEnTWElYi4r0CafSd3AmtMkpZdJBEH_z-n_xoEYCO-WxaUcLPrge2Y2Yuj7f2-88Vtqeem79ilG80VQK8am1PijbfO6xXMcgwBbix7gI2MO/s600-rw/1.JPG">
        </div>
      </a>

</div>
  </div>

// 使用现代 IntersectionObserver 替代低效的 scroll 监听，绝不卡死主线程
      if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              // 进入视口，淡入显示
              entry.target.classList.remove('below-viewport');
            } else if (entry.boundingClientRect.top > 0) {
              // 滚动到视口下方时隐藏（往回滚动可再次淡入）
              entry.target.classList.add('below-viewport');
            }
          });
        }, {
          rootMargin: '0px 0px -10% 0px', // 提前 10% 距离触发，体验更流畅
          threshold: 0.1
        });

fadeElements.forEach(el => observer.observe(el));
      } else {
        // 兼容极老旧浏览器：直接展示不动画
        fadeElements.forEach(el => el.classList.remove('below-viewport'));
      }
    });
  </script>

<script type="module">
  import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe@5.4.4/dist/photoswipe-lightbox.esm.js';

function wakeArrows() {
    if (!lightbox.pswp || !lightbox.pswp.element) return;
    
    lightbox.pswp.element.classList.remove('pswp--arrows-idle');
    clearTimeout(idleTimer);

function onMouseMove() {
    if (isDesktop) wakeArrows();
  }

// 打开后绑定事件
  lightbox.on('openingAnimationEnd', () => {
    if (!isDesktop) return;

wakeArrows();

const el = lightbox.pswp.element;
    el.addEventListener('mousemove', onMouseMove, { passive: true });

window.addEventListener('resize', () => {
    isDesktop = window.matchMedia('(min-width: 1025px)').matches;
  });

lightbox.init();
</script>
</body>
</html>

✨进入猫次元🐈

搜索此博客

博文

理光 Ricoh GR4 🎞