<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.10.0">Jekyll</generator><link href="https://tmucrelab.github.io/CRELab-website/feed.xml" rel="self" type="application/atom+xml" /><link href="https://tmucrelab.github.io/CRELab-website/" rel="alternate" type="text/html" /><updated>2026-04-02T06:20:04+00:00</updated><id>https://tmucrelab.github.io/CRELab-website/feed.xml</id><title type="html">CRE Lab</title><subtitle>Cancer Resistance Evolution (CRE) Lab at Taipei Medical University.</subtitle><author><name>Your Name</name></author><entry><title type="html">EVENT TEMPLATE</title><link href="https://tmucrelab.github.io/CRELab-website/life/20260311-event-template/" rel="alternate" type="text/html" title="EVENT TEMPLATE" /><published>2026-03-11T00:00:00+00:00</published><updated>2026-03-11T00:00:00+00:00</updated><id>https://tmucrelab.github.io/CRELab-website/life/template</id><content type="html" xml:base="https://tmucrelab.github.io/CRELab-website/life/20260311-event-template/"><![CDATA[<!-- ===================================================== -->
<!--                     Photo Slider                      -->
<!-- ===================================================== -->

<div class="simple-slider post-slider">
  <div class="simple-slider__track">
    <div class="simple-slider__slides">
      
        <div class="simple-slider__img is-active">
          <img src="/CRELab-website/assets/assets/images/test-event-1.jpg" alt="EVENT TEMPLATE image 1" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/test-event-2.png" alt="EVENT TEMPLATE image 2" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/test-event-3.jpg" alt="EVENT TEMPLATE image 3" />
        </div>
      
    </div>

    <!-- 左右箭頭 -->
    <button class="simple-slider__arrow simple-slider__arrow--prev" type="button">
      &#10094;
    </button>
    <button class="simple-slider__arrow simple-slider__arrow--next" type="button">
      &#10095;
    </button>

    <!-- 小圓點導航 -->
    <div class="simple-slider__dots"></div>
  </div>
</div>

<!-- ===================================================== -->
<!--                     Article Text                      -->
<!-- ===================================================== -->

<p>Write the main description of the event here.</p>

<p>You can add multiple paragraphs describing the event, seminar,
meeting, celebration, or conference.</p>

<p>Example:
Our lab held a seminar discussing the latest research on cancer
evolution and resistance mechanisms. Members of the lab presented
their work and exchanged ideas with visiting researchers.</p>

<!-- ===================================================== -->
<!--                     Photo Gallery                     -->
<!-- ===================================================== -->

<h2 id="photo-gallery">Photo Gallery</h2>
<div class="post-gallery">
  
    
      <a href="/CRELab-website/assets/assets/images/test-event-1.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/test-event-1.jpg" alt="EVENT TEMPLATE thumbnail 1" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/test-straight-photo.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/test-straight-photo.jpg" alt="EVENT TEMPLATE thumbnail 2" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/test-video-straight.mp4" class="post-gallery__item is-video" data-type="video" data-poster="/CRELab-website/assets/assets/images/test-straight-photo.jpg">
        
          <img src="/CRELab-website/assets/assets/images/test-straight-photo.jpg" alt="EVENT TEMPLATE video thumbnail 3" />
        
        <span class="post-gallery__video-badge">▶</span>
      </a>
    
  
</div>

<!-- ===================================================== -->
<!--                   Lightbox，集錦                       -->
<!-- ===================================================== -->

<div class="post-lightbox" id="post-lightbox" hidden="">
  <button class="post-lightbox__close" type="button" aria-label="Close media">&times;</button>

  <button class="post-lightbox__nav post-lightbox__nav--prev" type="button" aria-label="Previous media">
    &#10094;
  </button>

  <div class="post-lightbox__inner">
    <img src="" alt="Expanded image" id="post-lightbox-img" />

    <video id="post-lightbox-video" controls="" playsinline="">
      <source src="" type="video/mp4" />
    </video>
  </div>

  <button class="post-lightbox__nav post-lightbox__nav--next" type="button" aria-label="Next media">
    &#10095;
  </button>
</div>

<!-- ===================================================== -->
<!--                     Slider Script                     -->
<!-- ===================================================== -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const sliders = document.querySelectorAll(".simple-slider");

  sliders.forEach((slider) => {
    const slides = slider.querySelectorAll(".simple-slider__img");
    const prevBtn = slider.querySelector(".simple-slider__arrow--prev");
    const nextBtn = slider.querySelector(".simple-slider__arrow--next");
    const dotsWrap = slider.querySelector(".simple-slider__dots");

    let current = 0;
    let intervalId = null;

    if (slides.length <= 1) return;


    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle("is-active", i === index);
      });

      const dots = dotsWrap.querySelectorAll(".simple-slider__dot");
      dots.forEach((dot, i) => {
        dot.classList.toggle("is-active", i === index);
      });

      current = index;
    }

    function nextSlide() {
      showSlide((current + 1) % slides.length);
    }

    function prevSlide() {
      showSlide((current - 1 + slides.length) % slides.length);
    }

    function startSlider() {
      if (intervalId) return;
      intervalId = setInterval(nextSlide, 3000);
    }

    function stopSlider() {
      clearInterval(intervalId);
      intervalId = null;
    }

    slides.forEach((_, i) => {
      const dot = document.createElement("button");
      dot.className = "simple-slider__dot" + (i === 0 ? " is-active" : "");
      dot.addEventListener("click", () => {
        stopSlider();
        showSlide(i);
        startSlider();
      });

      dotsWrap.appendChild(dot);
    });

    prevBtn.addEventListener("click", () => {
      stopSlider();
      prevSlide();
      startSlider();
    });

    nextBtn.addEventListener("click", () => {
      stopSlider();
      nextSlide();
      startSlider();
    });

    slider.addEventListener("mouseenter", stopSlider);
    slider.addEventListener("mouseleave", startSlider);

    showSlide(0);
    startSlider();
  });
});
</script>

<!-- ===================================================== -->
<!--                    Gallery Lightbox                   -->
<!-- ===================================================== -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("post-lightbox");
  const lightboxInner = lightbox.querySelector(".post-lightbox__inner");
  const lightboxImg = document.getElementById("post-lightbox-img");
  const lightboxVideo = document.getElementById("post-lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".post-lightbox__close");
  const prevBtn = lightbox.querySelector(".post-lightbox__nav--prev");
  const nextBtn = lightbox.querySelector(".post-lightbox__nav--next");
  const items = Array.from(document.querySelectorAll(".post-gallery__item"));

  let currentIndex = -1;

  function closeLightbox() {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightbox.hidden = true;
    document.body.classList.remove("post-lightbox-open");
    currentIndex = -1;
  }

  function openImage(src) {
    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightboxImg.src = src;
    lightboxImg.style.display = "block";
  }

  function openVideo(src) {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideoSource.src = src;
    lightboxVideo.load();
    lightboxVideo.style.display = "block";
  }

  function showItem(index) {
    if (items.length === 0) return;

    if (index < 0) {
      index = items.length - 1;
    }

    if (index >= items.length) {
      index = 0;
    }

    currentIndex = index;

    const item = items[currentIndex];
    const type = item.dataset.type;
    const href = item.getAttribute("href");

    if (type === "video") {
      openVideo(href);
    } else {
      openImage(href);
    }

    lightbox.hidden = false;
    document.body.classList.add("post-lightbox-open");
  }

  function showPrev() {
    if (currentIndex === -1) return;
    showItem(currentIndex - 1);
  }

  function showNext() {
    if (currentIndex === -1) return;
    showItem(currentIndex + 1);
  }

  items.forEach((item, index) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      showItem(index);
    });
  });

  closeBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    closeLightbox();
  });

  prevBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showPrev();
  });

  nextBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showNext();
  });

  lightbox.addEventListener("click", function (e) {
    if (!lightboxInner.contains(e.target) &&
        !prevBtn.contains(e.target) &&
        !nextBtn.contains(e.target) &&
        !closeBtn.contains(e.target)) {
      closeLightbox();
    }
  });

  document.addEventListener("keydown", function (e) {
    if (lightbox.hidden) return;

    if (e.key === "Escape") {
      closeLightbox();
    } else if (e.key === "ArrowLeft") {
      showPrev();
    } else if (e.key === "ArrowRight") {
      showNext();
    }
  });
});
</script>

<!--
<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("lightbox");
  const lightboxImg = document.getElementById("lightbox-img");
  const lightboxVideo = document.getElementById("lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".lightbox__close");
  const items = document.querySelectorAll(".post-gallery__item");


  function closeLightbox() {
    lightbox.classList.remove("is-open");
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";
  }

  items.forEach((item) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();

      const type = item.dataset.type;
      const href = item.getAttribute("href");

      if (type === "video") {
        lightboxImg.style.display = "none";
        
        lightboxVideoSource.src = href;
        lightboxVideo.load();
        lightboxVideo.style.display = "block";
        
      } else {
        lightboxVideo.pause();
        lightboxVideoSource.src = "";
        lightboxVideo.load();
        lightboxVideo.style.display = "none";

        lightboxImg.src = href;
        lightboxImg.style.display = "block";
      }

      lightbox.classList.add("is-open");
    });
  });

  closeBtn.addEventListener("click", closeLightbox);

  lightbox.addEventListener("click", function (e) {
    if (e.target === lightbox) {
      closeLightbox();
    }
  });
});
</script>
-->]]></content><author><name>Your Name</name></author><category term="lab-life" /><category term="event" /><category term="lab-life" /><summary type="html"><![CDATA[]]></summary></entry><entry><title type="html">Lorem ipsum</title><link href="https://tmucrelab.github.io/CRELab-website/life/lorem-ipsum/" rel="alternate" type="text/html" title="Lorem ipsum" /><published>2026-03-09T00:00:00+00:00</published><updated>2026-03-09T00:00:00+00:00</updated><id>https://tmucrelab.github.io/CRELab-website/life/lorem-ipsum</id><content type="html" xml:base="https://tmucrelab.github.io/CRELab-website/life/lorem-ipsum/"><![CDATA[<div class="simple-slider post-slider">
  <div class="simple-slider__track">
    <div class="simple-slider__slides">
      
        <div class="simple-slider__img is-active">
          <img src="/CRELab-website/assets/assets/images/test-event-1.jpg" alt="Lorem ipsum image 1" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/test-event-2.png" alt="Lorem ipsum image 2" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/test-event-3.jpg" alt="Lorem ipsum image 3" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/test-straight-photo.jpg" alt="Lorem ipsum image 4" />
        </div>
      
    </div>

    <button class="simple-slider__arrow simple-slider__arrow--prev" type="button" aria-label="Previous slide">
      &#10094;
    </button>
    <button class="simple-slider__arrow simple-slider__arrow--next" type="button" aria-label="Next slide">
      &#10095;
    </button>

    <div class="simple-slider__dots"></div>
  </div>
</div>

<!-- ![Lorem ipsum](/CRELab-website/assets/assets/images/test-event-2.png) -->

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<h2 id="photo-gallery">Photo Gallery</h2>

<div class="post-gallery">
  
    
      <a href="/CRELab-website/assets/assets/images/test-event-1.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/test-event-1.jpg" alt="Lorem ipsum thumbnail 1" />
      </a>
    
  
    
      <a href="/CRELab-website/assets/assets/images/test-event-2.png" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/test-event-2.png" alt="Lorem ipsum thumbnail 2" />
      </a>
    
  
    
      <a href="/CRELab-website/assets/assets/images/test-event-3.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/test-event-3.jpg" alt="Lorem ipsum thumbnail 3" />
      </a>
    
  
    
      <a href="/CRELab-website/assets/assets/images/test-straight-photo.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/test-straight-photo.jpg" alt="Lorem ipsum thumbnail 4" />
      </a>
    
  
    
      <a href="/CRELab-website/assets/assets/images/test-video-straight.mp4" class="post-gallery__item is-video" data-type="video" data-poster="/CRELab-website/assets/assets/images/test-straight-photo.jpg">
        
          <img src="/CRELab-website/assets/assets/images/test-straight-photo.jpg" alt="Lorem ipsum video thumbnail 5" />
        
        <span class="post-gallery__video-badge">▶</span>
      </a>
    
  
</div>

<div class="lightbox" id="lightbox">
  <button class="lightbox__close" type="button" aria-label="Close media">&times;</button>

  <img src="" alt="Expanded image" id="lightbox-img" />

  <video id="lightbox-video" controls="" playsinline="">
    <source src="" type="video/mp4" />
    Your browser does not support the video tag.
  </video>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const sliders = document.querySelectorAll(".simple-slider");

  sliders.forEach((slider) => {
    const slides = slider.querySelectorAll(".simple-slider__img");
    const prevBtn = slider.querySelector(".simple-slider__arrow--prev");
    const nextBtn = slider.querySelector(".simple-slider__arrow--next");
    const dotsWrap = slider.querySelector(".simple-slider__dots");

    let current = 0;
    let intervalId = null;

    if (slides.length <= 1) return;

    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle("is-active", i === index);
      });

      const dots = dotsWrap.querySelectorAll(".simple-slider__dot");
      dots.forEach((dot, i) => {
        dot.classList.toggle("is-active", i === index);
      });

      current = index;
    }

    function nextSlide() {
      showSlide((current + 1) % slides.length);
    }

    function prevSlide() {
      showSlide((current - 1 + slides.length) % slides.length);
    }

    function startSlider() {
      if (intervalId) return;
      intervalId = setInterval(nextSlide, 3000);
    }

    function stopSlider() {
      clearInterval(intervalId);
      intervalId = null;
    }

    if (dotsWrap) {
      slides.forEach((_, i) => {
        const dot = document.createElement("button");
        dot.type = "button";
        dot.className = "simple-slider__dot" + (i === 0 ? " is-active" : "");
        dot.setAttribute("aria-label", `Go to slide ${i + 1}`);
        dot.addEventListener("click", () => {
          stopSlider();
          showSlide(i);
          startSlider();
        });
        dotsWrap.appendChild(dot);
      });
    }

    if (prevBtn) {
      prevBtn.addEventListener("click", () => {
        stopSlider();
        prevSlide();
        startSlider();
      });
    }

    if (nextBtn) {
      nextBtn.addEventListener("click", () => {
        stopSlider();
        nextSlide();
        startSlider();
      });
    }

    slider.addEventListener("mouseenter", stopSlider);
    slider.addEventListener("mouseleave", startSlider);

    showSlide(0);
    startSlider();
  });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("lightbox");
  const lightboxImg = document.getElementById("lightbox-img");
  const lightboxVideo = document.getElementById("lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".lightbox__close");
  const items = document.querySelectorAll(".post-gallery__item");

    function closeLightbox() {
    lightbox.classList.remove("is-open");
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";
  }
  
  items.forEach((item) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();

      const type = item.dataset.type;
      const href = item.getAttribute("href");

      if (type === "video") {
        lightboxImg.style.display = "none";

        lightboxVideoSource.src = href;
        lightboxVideo.load();
        lightboxVideo.style.display = "block";

        lightbox.classList.add("is-open");
      } else {
        lightboxVideo.pause();
        lightboxVideoSource.src = "";
        lightboxVideo.load();
        lightboxVideo.style.display = "none";

        lightboxImg.src = href;
        lightboxImg.style.display = "block";

        lightbox.classList.add("is-open");
      }
    });
  });
  
  closeBtn.addEventListener("click", closeLightbox);

  lightbox.addEventListener("click", function (e) {
    if (e.target === lightbox) {
      closeLightbox();
    }
  });
});
</script>]]></content><author><name>Your Name</name></author><category term="lab-life" /><summary type="html"><![CDATA[]]></summary></entry><entry><title type="html">Lab Year-end Party</title><link href="https://tmucrelab.github.io/CRELab-website/life/20260211-lab-year-end-party/" rel="alternate" type="text/html" title="Lab Year-end Party" /><published>2026-02-11T00:00:00+00:00</published><updated>2026-02-11T00:00:00+00:00</updated><id>https://tmucrelab.github.io/CRELab-website/life/Lab-Year-end-Banquet</id><content type="html" xml:base="https://tmucrelab.github.io/CRELab-website/life/20260211-lab-year-end-party/"><![CDATA[<!-- ===================================================== -->
<!--                     Photo Slider                      -->
<!-- ===================================================== -->

<div class="simple-slider post-slider">
  <div class="simple-slider__track">
    <div class="simple-slider__slides">
      
        <div class="simple-slider__img is-active">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2026-02-11-Lab-Year-end-Banquet/2026-02-11-Lab-Year-end-Banquet-01.jpg" alt="Lab Year-end Party image 1" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2026-02-11-Lab-Year-end-Banquet/2026-02-11-Lab-Year-end-Banquet-01.jpg" alt="Lab Year-end Party image 2" />
        </div>
      
    </div>

    <!-- 左右箭頭 -->
    <button class="simple-slider__arrow simple-slider__arrow--prev" type="button">
      &#10094;
    </button>
    <button class="simple-slider__arrow simple-slider__arrow--next" type="button">
      &#10095;
    </button>

    <!-- 小圓點導航 -->
    <div class="simple-slider__dots"></div>
  </div>
</div>

<!-- ===================================================== -->
<!--                     Article Text                      -->
<!-- ===================================================== -->

<p>Lab Year-end Party.</p>

<!-- ===================================================== -->
<!--                     Photo Gallery                     -->
<!-- ===================================================== -->

<h2 id="photo-gallery">Photo Gallery</h2>
<div class="post-gallery">
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2026-02-11-Lab-Year-end-Banquet/2026-02-11-Lab-Year-end-Banquet-01.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2026-02-11-Lab-Year-end-Banquet/2026-02-11-Lab-Year-end-Banquet-01.jpg" alt="Lab Year-end Party thumbnail 1" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2026-02-11-Lab-Year-end-Banquet/2026-02-11-Lab-Year-end-Banquet-02.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2026-02-11-Lab-Year-end-Banquet/2026-02-11-Lab-Year-end-Banquet-02.jpg" alt="Lab Year-end Party thumbnail 2" />
      </a>

    
  
</div>

<!-- ===================================================== -->
<!--                   Lightbox，集錦                       -->
<!-- ===================================================== -->

<div class="post-lightbox" id="post-lightbox" hidden="">
  <button class="post-lightbox__close" type="button" aria-label="Close media">&times;</button>

  <button class="post-lightbox__nav post-lightbox__nav--prev" type="button" aria-label="Previous media">
    &#10094;
  </button>

  <div class="post-lightbox__inner">
    <img src="" alt="Expanded image" id="post-lightbox-img" />

    <video id="post-lightbox-video" controls="" playsinline="">
      <source src="" type="video/mp4" />
    </video>
  </div>

  <button class="post-lightbox__nav post-lightbox__nav--next" type="button" aria-label="Next media">
    &#10095;
  </button>
</div>

<!-- ===================================================== -->
<!--                     Slider Script                     -->
<!-- ===================================================== -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const sliders = document.querySelectorAll(".simple-slider");

  sliders.forEach((slider) => {
    const slides = slider.querySelectorAll(".simple-slider__img");
    const prevBtn = slider.querySelector(".simple-slider__arrow--prev");
    const nextBtn = slider.querySelector(".simple-slider__arrow--next");
    const dotsWrap = slider.querySelector(".simple-slider__dots");

    let current = 0;
    let intervalId = null;

    if (slides.length <= 1) return;


    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle("is-active", i === index);
      });

      const dots = dotsWrap.querySelectorAll(".simple-slider__dot");
      dots.forEach((dot, i) => {
        dot.classList.toggle("is-active", i === index);
      });

      current = index;
    }

    function nextSlide() {
      showSlide((current + 1) % slides.length);
    }

    function prevSlide() {
      showSlide((current - 1 + slides.length) % slides.length);
    }

    function startSlider() {
      if (intervalId) return;
      intervalId = setInterval(nextSlide, 3000);
    }

    function stopSlider() {
      clearInterval(intervalId);
      intervalId = null;
    }

    slides.forEach((_, i) => {
      const dot = document.createElement("button");
      dot.className = "simple-slider__dot" + (i === 0 ? " is-active" : "");
      dot.addEventListener("click", () => {
        stopSlider();
        showSlide(i);
        startSlider();
      });

      dotsWrap.appendChild(dot);
    });

    prevBtn.addEventListener("click", () => {
      stopSlider();
      prevSlide();
      startSlider();
    });

    nextBtn.addEventListener("click", () => {
      stopSlider();
      nextSlide();
      startSlider();
    });

    slider.addEventListener("mouseenter", stopSlider);
    slider.addEventListener("mouseleave", startSlider);

    showSlide(0);
    startSlider();
  });
});
</script>

<!-- ===================================================== -->
<!--                    Gallery Lightbox                   -->
<!-- ===================================================== -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("post-lightbox");
  const lightboxInner = lightbox.querySelector(".post-lightbox__inner");
  const lightboxImg = document.getElementById("post-lightbox-img");
  const lightboxVideo = document.getElementById("post-lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".post-lightbox__close");
  const prevBtn = lightbox.querySelector(".post-lightbox__nav--prev");
  const nextBtn = lightbox.querySelector(".post-lightbox__nav--next");
  const items = Array.from(document.querySelectorAll(".post-gallery__item"));

  let currentIndex = -1;

  function closeLightbox() {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightbox.hidden = true;
    document.body.classList.remove("post-lightbox-open");
    currentIndex = -1;
  }

  function openImage(src) {
    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightboxImg.src = src;
    lightboxImg.style.display = "block";
  }

  function openVideo(src) {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideoSource.src = src;
    lightboxVideo.load();
    lightboxVideo.style.display = "block";
  }

  function showItem(index) {
    if (items.length === 0) return;

    if (index < 0) {
      index = items.length - 1;
    }

    if (index >= items.length) {
      index = 0;
    }

    currentIndex = index;

    const item = items[currentIndex];
    const type = item.dataset.type;
    const href = item.getAttribute("href");

    if (type === "video") {
      openVideo(href);
    } else {
      openImage(href);
    }

    lightbox.hidden = false;
    document.body.classList.add("post-lightbox-open");
  }

  function showPrev() {
    if (currentIndex === -1) return;
    showItem(currentIndex - 1);
  }

  function showNext() {
    if (currentIndex === -1) return;
    showItem(currentIndex + 1);
  }

  items.forEach((item, index) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      showItem(index);
    });
  });

  closeBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    closeLightbox();
  });

  prevBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showPrev();
  });

  nextBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showNext();
  });

  lightbox.addEventListener("click", function (e) {
    if (!lightboxInner.contains(e.target) &&
        !prevBtn.contains(e.target) &&
        !nextBtn.contains(e.target) &&
        !closeBtn.contains(e.target)) {
      closeLightbox();
    }
  });

  document.addEventListener("keydown", function (e) {
    if (lightbox.hidden) return;

    if (e.key === "Escape") {
      closeLightbox();
    } else if (e.key === "ArrowLeft") {
      showPrev();
    } else if (e.key === "ArrowRight") {
      showNext();
    }
  });
});
</script>

<!--
<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("lightbox");
  const lightboxImg = document.getElementById("lightbox-img");
  const lightboxVideo = document.getElementById("lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".lightbox__close");
  const items = document.querySelectorAll(".post-gallery__item");


  function closeLightbox() {
    lightbox.classList.remove("is-open");
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";
  }

  items.forEach((item) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();

      const type = item.dataset.type;
      const href = item.getAttribute("href");

      if (type === "video") {
        lightboxImg.style.display = "none";
        
        lightboxVideoSource.src = href;
        lightboxVideo.load();
        lightboxVideo.style.display = "block";
        
      } else {
        lightboxVideo.pause();
        lightboxVideoSource.src = "";
        lightboxVideo.load();
        lightboxVideo.style.display = "none";

        lightboxImg.src = href;
        lightboxImg.style.display = "block";
      }

      lightbox.classList.add("is-open");
    });
  });

  closeBtn.addEventListener("click", closeLightbox);

  lightbox.addEventListener("click", function (e) {
    if (e.target === lightbox) {
      closeLightbox();
    }
  });
});
</script>
-->]]></content><author><name>Your Name</name></author><category term="lab-life" /><category term="event" /><category term="lab-life" /><summary type="html"><![CDATA[]]></summary></entry><entry><title type="html">XMas Lab Party</title><link href="https://tmucrelab.github.io/CRELab-website/life/20251224-xmas-lab-party/" rel="alternate" type="text/html" title="XMas Lab Party" /><published>2025-12-24T00:00:00+00:00</published><updated>2025-12-24T00:00:00+00:00</updated><id>https://tmucrelab.github.io/CRELab-website/life/XMas-Lab-Party</id><content type="html" xml:base="https://tmucrelab.github.io/CRELab-website/life/20251224-xmas-lab-party/"><![CDATA[<!-- ===================================================== -->
<!--                     Photo Slider                      -->
<!-- ===================================================== -->

<div class="simple-slider post-slider">
  <div class="simple-slider__track">
    <div class="simple-slider__slides">
      
        <div class="simple-slider__img is-active">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-01.jpg" alt="XMas Lab Party image 1" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-02.jpg" alt="XMas Lab Party image 2" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-03.jpg" alt="XMas Lab Party image 3" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-04.jpg" alt="XMas Lab Party image 4" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-05.jpg" alt="XMas Lab Party image 5" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-06.jpg" alt="XMas Lab Party image 6" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-07.jpg" alt="XMas Lab Party image 7" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-08.jpg" alt="XMas Lab Party image 8" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-09.jpg" alt="XMas Lab Party image 9" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-10.jpg" alt="XMas Lab Party image 10" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-11.jpg" alt="XMas Lab Party image 11" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-12.jpg" alt="XMas Lab Party image 12" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-13.jpg" alt="XMas Lab Party image 13" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-14.jpg" alt="XMas Lab Party image 14" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-15.jpg" alt="XMas Lab Party image 15" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-16.jpg" alt="XMas Lab Party image 16" />
        </div>
      
    </div>

    <!-- 左右箭頭 -->
    <button class="simple-slider__arrow simple-slider__arrow--prev" type="button">
      &#10094;
    </button>
    <button class="simple-slider__arrow simple-slider__arrow--next" type="button">
      &#10095;
    </button>

    <!-- 小圓點導航 -->
    <div class="simple-slider__dots"></div>
  </div>
</div>

<!-- ===================================================== -->
<!--                     Article Text                      -->
<!-- ===================================================== -->

<p>Christmas party.</p>

<!-- ===================================================== -->
<!--                     Photo Gallery                     -->
<!-- ===================================================== -->

<h2 id="photo-gallery">Photo Gallery</h2>
<div class="post-gallery">
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-01.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-01.jpg" alt="XMas Lab Party thumbnail 1" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-02.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-02.jpg" alt="XMas Lab Party thumbnail 2" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-03.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-03.jpg" alt="XMas Lab Party thumbnail 3" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-04.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-04.jpg" alt="XMas Lab Party thumbnail 4" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-09.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-09.jpg" alt="XMas Lab Party thumbnail 5" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-10.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-10.jpg" alt="XMas Lab Party thumbnail 6" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-11.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-11.jpg" alt="XMas Lab Party thumbnail 7" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-13.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-13.jpg" alt="XMas Lab Party thumbnail 8" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-14.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-14.jpg" alt="XMas Lab Party thumbnail 9" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-15.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-15.jpg" alt="XMas Lab Party thumbnail 10" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-16.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-16.jpg" alt="XMas Lab Party thumbnail 11" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-05.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-05.jpg" alt="XMas Lab Party thumbnail 12" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-06.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-06.jpg" alt="XMas Lab Party thumbnail 13" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-07.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-07.jpg" alt="XMas Lab Party thumbnail 14" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-08.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-08.jpg" alt="XMas Lab Party thumbnail 15" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-12.MOV" class="post-gallery__item is-video" data-type="video" data-poster="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-12.png">
        
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-12-24-X'mas-Lab-Party/2025-12-24-X'mas-Lab-Party-12.png" alt="XMas Lab Party video thumbnail 16" />
        
        <span class="post-gallery__video-badge">▶</span>
      </a>
    
  
</div>

<!-- ===================================================== -->
<!--                   Lightbox，集錦                       -->
<!-- ===================================================== -->

<div class="post-lightbox" id="post-lightbox" hidden="">
  <button class="post-lightbox__close" type="button" aria-label="Close media">&times;</button>

  <button class="post-lightbox__nav post-lightbox__nav--prev" type="button" aria-label="Previous media">
    &#10094;
  </button>

  <div class="post-lightbox__inner">
    <img src="" alt="Expanded image" id="post-lightbox-img" />

    <video id="post-lightbox-video" controls="" playsinline="">
      <source src="" type="video/mp4" />
    </video>
  </div>

  <button class="post-lightbox__nav post-lightbox__nav--next" type="button" aria-label="Next media">
    &#10095;
  </button>
</div>

<!-- ===================================================== -->
<!--                     Slider Script                     -->
<!-- ===================================================== -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const sliders = document.querySelectorAll(".simple-slider");

  sliders.forEach((slider) => {
    const slides = slider.querySelectorAll(".simple-slider__img");
    const prevBtn = slider.querySelector(".simple-slider__arrow--prev");
    const nextBtn = slider.querySelector(".simple-slider__arrow--next");
    const dotsWrap = slider.querySelector(".simple-slider__dots");

    let current = 0;
    let intervalId = null;

    if (slides.length <= 1) return;


    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle("is-active", i === index);
      });

      const dots = dotsWrap.querySelectorAll(".simple-slider__dot");
      dots.forEach((dot, i) => {
        dot.classList.toggle("is-active", i === index);
      });

      current = index;
    }

    function nextSlide() {
      showSlide((current + 1) % slides.length);
    }

    function prevSlide() {
      showSlide((current - 1 + slides.length) % slides.length);
    }

    function startSlider() {
      if (intervalId) return;
      intervalId = setInterval(nextSlide, 3000);
    }

    function stopSlider() {
      clearInterval(intervalId);
      intervalId = null;
    }

    slides.forEach((_, i) => {
      const dot = document.createElement("button");
      dot.className = "simple-slider__dot" + (i === 0 ? " is-active" : "");
      dot.addEventListener("click", () => {
        stopSlider();
        showSlide(i);
        startSlider();
      });

      dotsWrap.appendChild(dot);
    });

    prevBtn.addEventListener("click", () => {
      stopSlider();
      prevSlide();
      startSlider();
    });

    nextBtn.addEventListener("click", () => {
      stopSlider();
      nextSlide();
      startSlider();
    });

    slider.addEventListener("mouseenter", stopSlider);
    slider.addEventListener("mouseleave", startSlider);

    showSlide(0);
    startSlider();
  });
});
</script>

<!-- ===================================================== -->
<!--                    Gallery Lightbox                   -->
<!-- ===================================================== -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("post-lightbox");
  const lightboxInner = lightbox.querySelector(".post-lightbox__inner");
  const lightboxImg = document.getElementById("post-lightbox-img");
  const lightboxVideo = document.getElementById("post-lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".post-lightbox__close");
  const prevBtn = lightbox.querySelector(".post-lightbox__nav--prev");
  const nextBtn = lightbox.querySelector(".post-lightbox__nav--next");
  const items = Array.from(document.querySelectorAll(".post-gallery__item"));

  let currentIndex = -1;

  function closeLightbox() {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightbox.hidden = true;
    document.body.classList.remove("post-lightbox-open");
    currentIndex = -1;
  }

  function openImage(src) {
    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightboxImg.src = src;
    lightboxImg.style.display = "block";
  }

  function openVideo(src) {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideoSource.src = src;
    lightboxVideo.load();
    lightboxVideo.style.display = "block";
  }

  function showItem(index) {
    if (items.length === 0) return;

    if (index < 0) {
      index = items.length - 1;
    }

    if (index >= items.length) {
      index = 0;
    }

    currentIndex = index;

    const item = items[currentIndex];
    const type = item.dataset.type;
    const href = item.getAttribute("href");

    if (type === "video") {
      openVideo(href);
    } else {
      openImage(href);
    }

    lightbox.hidden = false;
    document.body.classList.add("post-lightbox-open");
  }

  function showPrev() {
    if (currentIndex === -1) return;
    showItem(currentIndex - 1);
  }

  function showNext() {
    if (currentIndex === -1) return;
    showItem(currentIndex + 1);
  }

  items.forEach((item, index) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      showItem(index);
    });
  });

  closeBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    closeLightbox();
  });

  prevBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showPrev();
  });

  nextBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showNext();
  });

  lightbox.addEventListener("click", function (e) {
    if (!lightboxInner.contains(e.target) &&
        !prevBtn.contains(e.target) &&
        !nextBtn.contains(e.target) &&
        !closeBtn.contains(e.target)) {
      closeLightbox();
    }
  });

  document.addEventListener("keydown", function (e) {
    if (lightbox.hidden) return;

    if (e.key === "Escape") {
      closeLightbox();
    } else if (e.key === "ArrowLeft") {
      showPrev();
    } else if (e.key === "ArrowRight") {
      showNext();
    }
  });
});
</script>

<!--
<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("lightbox");
  const lightboxImg = document.getElementById("lightbox-img");
  const lightboxVideo = document.getElementById("lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".lightbox__close");
  const items = document.querySelectorAll(".post-gallery__item");


  function closeLightbox() {
    lightbox.classList.remove("is-open");
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";
  }

  items.forEach((item) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();

      const type = item.dataset.type;
      const href = item.getAttribute("href");

      if (type === "video") {
        lightboxImg.style.display = "none";
        
        lightboxVideoSource.src = href;
        lightboxVideo.load();
        lightboxVideo.style.display = "block";
        
      } else {
        lightboxVideo.pause();
        lightboxVideoSource.src = "";
        lightboxVideo.load();
        lightboxVideo.style.display = "none";

        lightboxImg.src = href;
        lightboxImg.style.display = "block";
      }

      lightbox.classList.add("is-open");
    });
  });

  closeBtn.addEventListener("click", closeLightbox);

  lightbox.addEventListener("click", function (e) {
    if (e.target === lightbox) {
      closeLightbox();
    }
  });
});
</script>
-->]]></content><author><name>Your Name</name></author><category term="lab-life" /><category term="event" /><category term="lab-life" /><summary type="html"><![CDATA[]]></summary></entry><entry><title type="html">Thanksgiving</title><link href="https://tmucrelab.github.io/CRELab-website/life/20251127-thanksgiving/" rel="alternate" type="text/html" title="Thanksgiving" /><published>2025-11-27T00:00:00+00:00</published><updated>2025-11-27T00:00:00+00:00</updated><id>https://tmucrelab.github.io/CRELab-website/life/Thanksgiving</id><content type="html" xml:base="https://tmucrelab.github.io/CRELab-website/life/20251127-thanksgiving/"><![CDATA[<!-- ===================================================== -->
<!--                     Photo Slider                      -->
<!-- ===================================================== -->

<div class="simple-slider post-slider">
  <div class="simple-slider__track">
    <div class="simple-slider__slides">
      
        <div class="simple-slider__img is-active">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-01.jpg" alt="Thanksgiving image 1" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-02.jpg" alt="Thanksgiving image 2" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-03.jpg" alt="Thanksgiving image 3" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-04.jpg" alt="Thanksgiving image 4" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-05.jpg" alt="Thanksgiving image 5" />
        </div>
      
    </div>

    <!-- 左右箭頭 -->
    <button class="simple-slider__arrow simple-slider__arrow--prev" type="button">
      &#10094;
    </button>
    <button class="simple-slider__arrow simple-slider__arrow--next" type="button">
      &#10095;
    </button>

    <!-- 小圓點導航 -->
    <div class="simple-slider__dots"></div>
  </div>
</div>

<!-- ===================================================== -->
<!--                     Article Text                      -->
<!-- ===================================================== -->

<p>Thanksgiving.</p>

<!-- ===================================================== -->
<!--                     Photo Gallery                     -->
<!-- ===================================================== -->

<h2 id="photo-gallery">Photo Gallery</h2>
<div class="post-gallery">
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-05.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-05.jpg" alt="Thanksgiving thumbnail 1" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-01.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-01.jpg" alt="Thanksgiving thumbnail 2" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-02.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-02.jpg" alt="Thanksgiving thumbnail 3" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-03.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-03.jpg" alt="Thanksgiving thumbnail 4" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-04.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-27-Thanksgiving/2025-11-27-Thanksgiving-04.jpg" alt="Thanksgiving thumbnail 5" />
      </a>

    
  
</div>

<!-- ===================================================== -->
<!--                   Lightbox，集錦                       -->
<!-- ===================================================== -->

<div class="post-lightbox" id="post-lightbox" hidden="">
  <button class="post-lightbox__close" type="button" aria-label="Close media">&times;</button>

  <button class="post-lightbox__nav post-lightbox__nav--prev" type="button" aria-label="Previous media">
    &#10094;
  </button>

  <div class="post-lightbox__inner">
    <img src="" alt="Expanded image" id="post-lightbox-img" />

    <video id="post-lightbox-video" controls="" playsinline="">
      <source src="" type="video/mp4" />
    </video>
  </div>

  <button class="post-lightbox__nav post-lightbox__nav--next" type="button" aria-label="Next media">
    &#10095;
  </button>
</div>

<!-- ===================================================== -->
<!--                     Slider Script                     -->
<!-- ===================================================== -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const sliders = document.querySelectorAll(".simple-slider");

  sliders.forEach((slider) => {
    const slides = slider.querySelectorAll(".simple-slider__img");
    const prevBtn = slider.querySelector(".simple-slider__arrow--prev");
    const nextBtn = slider.querySelector(".simple-slider__arrow--next");
    const dotsWrap = slider.querySelector(".simple-slider__dots");

    let current = 0;
    let intervalId = null;

    if (slides.length <= 1) return;


    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle("is-active", i === index);
      });

      const dots = dotsWrap.querySelectorAll(".simple-slider__dot");
      dots.forEach((dot, i) => {
        dot.classList.toggle("is-active", i === index);
      });

      current = index;
    }

    function nextSlide() {
      showSlide((current + 1) % slides.length);
    }

    function prevSlide() {
      showSlide((current - 1 + slides.length) % slides.length);
    }

    function startSlider() {
      if (intervalId) return;
      intervalId = setInterval(nextSlide, 3000);
    }

    function stopSlider() {
      clearInterval(intervalId);
      intervalId = null;
    }

    slides.forEach((_, i) => {
      const dot = document.createElement("button");
      dot.className = "simple-slider__dot" + (i === 0 ? " is-active" : "");
      dot.addEventListener("click", () => {
        stopSlider();
        showSlide(i);
        startSlider();
      });

      dotsWrap.appendChild(dot);
    });

    prevBtn.addEventListener("click", () => {
      stopSlider();
      prevSlide();
      startSlider();
    });

    nextBtn.addEventListener("click", () => {
      stopSlider();
      nextSlide();
      startSlider();
    });

    slider.addEventListener("mouseenter", stopSlider);
    slider.addEventListener("mouseleave", startSlider);

    showSlide(0);
    startSlider();
  });
});
</script>

<!-- ===================================================== -->
<!--                    Gallery Lightbox                   -->
<!-- ===================================================== -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("post-lightbox");
  const lightboxInner = lightbox.querySelector(".post-lightbox__inner");
  const lightboxImg = document.getElementById("post-lightbox-img");
  const lightboxVideo = document.getElementById("post-lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".post-lightbox__close");
  const prevBtn = lightbox.querySelector(".post-lightbox__nav--prev");
  const nextBtn = lightbox.querySelector(".post-lightbox__nav--next");
  const items = Array.from(document.querySelectorAll(".post-gallery__item"));

  let currentIndex = -1;

  function closeLightbox() {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightbox.hidden = true;
    document.body.classList.remove("post-lightbox-open");
    currentIndex = -1;
  }

  function openImage(src) {
    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightboxImg.src = src;
    lightboxImg.style.display = "block";
  }

  function openVideo(src) {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideoSource.src = src;
    lightboxVideo.load();
    lightboxVideo.style.display = "block";
  }

  function showItem(index) {
    if (items.length === 0) return;

    if (index < 0) {
      index = items.length - 1;
    }

    if (index >= items.length) {
      index = 0;
    }

    currentIndex = index;

    const item = items[currentIndex];
    const type = item.dataset.type;
    const href = item.getAttribute("href");

    if (type === "video") {
      openVideo(href);
    } else {
      openImage(href);
    }

    lightbox.hidden = false;
    document.body.classList.add("post-lightbox-open");
  }

  function showPrev() {
    if (currentIndex === -1) return;
    showItem(currentIndex - 1);
  }

  function showNext() {
    if (currentIndex === -1) return;
    showItem(currentIndex + 1);
  }

  items.forEach((item, index) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      showItem(index);
    });
  });

  closeBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    closeLightbox();
  });

  prevBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showPrev();
  });

  nextBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showNext();
  });

  lightbox.addEventListener("click", function (e) {
    if (!lightboxInner.contains(e.target) &&
        !prevBtn.contains(e.target) &&
        !nextBtn.contains(e.target) &&
        !closeBtn.contains(e.target)) {
      closeLightbox();
    }
  });

  document.addEventListener("keydown", function (e) {
    if (lightbox.hidden) return;

    if (e.key === "Escape") {
      closeLightbox();
    } else if (e.key === "ArrowLeft") {
      showPrev();
    } else if (e.key === "ArrowRight") {
      showNext();
    }
  });
});
</script>

<!--
<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("lightbox");
  const lightboxImg = document.getElementById("lightbox-img");
  const lightboxVideo = document.getElementById("lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".lightbox__close");
  const items = document.querySelectorAll(".post-gallery__item");


  function closeLightbox() {
    lightbox.classList.remove("is-open");
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";
  }

  items.forEach((item) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();

      const type = item.dataset.type;
      const href = item.getAttribute("href");

      if (type === "video") {
        lightboxImg.style.display = "none";
        
        lightboxVideoSource.src = href;
        lightboxVideo.load();
        lightboxVideo.style.display = "block";
        
      } else {
        lightboxVideo.pause();
        lightboxVideoSource.src = "";
        lightboxVideo.load();
        lightboxVideo.style.display = "none";

        lightboxImg.src = href;
        lightboxImg.style.display = "block";
      }

      lightbox.classList.add("is-open");
    });
  });

  closeBtn.addEventListener("click", closeLightbox);

  lightbox.addEventListener("click", function (e) {
    if (e.target === lightbox) {
      closeLightbox();
    }
  });
});
</script>
-->]]></content><author><name>Your Name</name></author><category term="lab-life" /><category term="event" /><category term="lab-life" /><summary type="html"><![CDATA[]]></summary></entry><entry><title type="html">MOPM Conference</title><link href="https://tmucrelab.github.io/CRELab-website/life/20251108-mopm-conference/" rel="alternate" type="text/html" title="MOPM Conference" /><published>2025-11-08T00:00:00+00:00</published><updated>2025-11-08T00:00:00+00:00</updated><id>https://tmucrelab.github.io/CRELab-website/life/MOPM-Conference</id><content type="html" xml:base="https://tmucrelab.github.io/CRELab-website/life/20251108-mopm-conference/"><![CDATA[<!-- ===================================================== -->
<!--                     Photo Slider                      -->
<!-- ===================================================== -->

<div class="simple-slider post-slider">
  <div class="simple-slider__track">
    <div class="simple-slider__slides">
      
        <div class="simple-slider__img is-active">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-08-MOPM-Conference/2025-11-08-MOPM-Conference-01.jpg" alt="MOPM Conference image 1" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-08-MOPM-Conference/2025-11-08-MOPM-Conference-02.png" alt="MOPM Conference image 2" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-08-MOPM-Conference/2025-11-08-MOPM-Conference-03.png" alt="MOPM Conference image 3" />
        </div>
      
    </div>

    <!-- 左右箭頭 -->
    <button class="simple-slider__arrow simple-slider__arrow--prev" type="button">
      &#10094;
    </button>
    <button class="simple-slider__arrow simple-slider__arrow--next" type="button">
      &#10095;
    </button>

    <!-- 小圓點導航 -->
    <div class="simple-slider__dots"></div>
  </div>
</div>

<!-- ===================================================== -->
<!--                     Article Text                      -->
<!-- ===================================================== -->

<p>MOPM Conference.</p>

<!-- ===================================================== -->
<!--                     Photo Gallery                     -->
<!-- ===================================================== -->

<h2 id="photo-gallery">Photo Gallery</h2>
<div class="post-gallery">
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-11-08-MOPM-Conference/2025-11-08-MOPM-Conference-01.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-08-MOPM-Conference/2025-11-08-MOPM-Conference-01.jpg" alt="MOPM Conference thumbnail 1" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-11-08-MOPM-Conference/2025-11-08-MOPM-Conference-02.png" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-08-MOPM-Conference/2025-11-08-MOPM-Conference-02.png" alt="MOPM Conference thumbnail 2" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-11-08-MOPM-Conference/2025-11-08-MOPM-Conference-03.png" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-11-08-MOPM-Conference/2025-11-08-MOPM-Conference-03.png" alt="MOPM Conference thumbnail 3" />
      </a>

    
  
</div>

<!-- ===================================================== -->
<!--                   Lightbox，集錦                       -->
<!-- ===================================================== -->

<div class="post-lightbox" id="post-lightbox" hidden="">
  <button class="post-lightbox__close" type="button" aria-label="Close media">&times;</button>

  <button class="post-lightbox__nav post-lightbox__nav--prev" type="button" aria-label="Previous media">
    &#10094;
  </button>

  <div class="post-lightbox__inner">
    <img src="" alt="Expanded image" id="post-lightbox-img" />

    <video id="post-lightbox-video" controls="" playsinline="">
      <source src="" type="video/mp4" />
    </video>
  </div>

  <button class="post-lightbox__nav post-lightbox__nav--next" type="button" aria-label="Next media">
    &#10095;
  </button>
</div>

<!-- ===================================================== -->
<!--                     Slider Script                     -->
<!-- ===================================================== -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const sliders = document.querySelectorAll(".simple-slider");

  sliders.forEach((slider) => {
    const slides = slider.querySelectorAll(".simple-slider__img");
    const prevBtn = slider.querySelector(".simple-slider__arrow--prev");
    const nextBtn = slider.querySelector(".simple-slider__arrow--next");
    const dotsWrap = slider.querySelector(".simple-slider__dots");

    let current = 0;
    let intervalId = null;

    if (slides.length <= 1) return;


    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle("is-active", i === index);
      });

      const dots = dotsWrap.querySelectorAll(".simple-slider__dot");
      dots.forEach((dot, i) => {
        dot.classList.toggle("is-active", i === index);
      });

      current = index;
    }

    function nextSlide() {
      showSlide((current + 1) % slides.length);
    }

    function prevSlide() {
      showSlide((current - 1 + slides.length) % slides.length);
    }

    function startSlider() {
      if (intervalId) return;
      intervalId = setInterval(nextSlide, 3000);
    }

    function stopSlider() {
      clearInterval(intervalId);
      intervalId = null;
    }

    slides.forEach((_, i) => {
      const dot = document.createElement("button");
      dot.className = "simple-slider__dot" + (i === 0 ? " is-active" : "");
      dot.addEventListener("click", () => {
        stopSlider();
        showSlide(i);
        startSlider();
      });

      dotsWrap.appendChild(dot);
    });

    prevBtn.addEventListener("click", () => {
      stopSlider();
      prevSlide();
      startSlider();
    });

    nextBtn.addEventListener("click", () => {
      stopSlider();
      nextSlide();
      startSlider();
    });

    slider.addEventListener("mouseenter", stopSlider);
    slider.addEventListener("mouseleave", startSlider);

    showSlide(0);
    startSlider();
  });
});
</script>

<!-- ===================================================== -->
<!--                    Gallery Lightbox                   -->
<!-- ===================================================== -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("post-lightbox");
  const lightboxInner = lightbox.querySelector(".post-lightbox__inner");
  const lightboxImg = document.getElementById("post-lightbox-img");
  const lightboxVideo = document.getElementById("post-lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".post-lightbox__close");
  const prevBtn = lightbox.querySelector(".post-lightbox__nav--prev");
  const nextBtn = lightbox.querySelector(".post-lightbox__nav--next");
  const items = Array.from(document.querySelectorAll(".post-gallery__item"));

  let currentIndex = -1;

  function closeLightbox() {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightbox.hidden = true;
    document.body.classList.remove("post-lightbox-open");
    currentIndex = -1;
  }

  function openImage(src) {
    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightboxImg.src = src;
    lightboxImg.style.display = "block";
  }

  function openVideo(src) {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideoSource.src = src;
    lightboxVideo.load();
    lightboxVideo.style.display = "block";
  }

  function showItem(index) {
    if (items.length === 0) return;

    if (index < 0) {
      index = items.length - 1;
    }

    if (index >= items.length) {
      index = 0;
    }

    currentIndex = index;

    const item = items[currentIndex];
    const type = item.dataset.type;
    const href = item.getAttribute("href");

    if (type === "video") {
      openVideo(href);
    } else {
      openImage(href);
    }

    lightbox.hidden = false;
    document.body.classList.add("post-lightbox-open");
  }

  function showPrev() {
    if (currentIndex === -1) return;
    showItem(currentIndex - 1);
  }

  function showNext() {
    if (currentIndex === -1) return;
    showItem(currentIndex + 1);
  }

  items.forEach((item, index) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      showItem(index);
    });
  });

  closeBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    closeLightbox();
  });

  prevBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showPrev();
  });

  nextBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showNext();
  });

  lightbox.addEventListener("click", function (e) {
    if (!lightboxInner.contains(e.target) &&
        !prevBtn.contains(e.target) &&
        !nextBtn.contains(e.target) &&
        !closeBtn.contains(e.target)) {
      closeLightbox();
    }
  });

  document.addEventListener("keydown", function (e) {
    if (lightbox.hidden) return;

    if (e.key === "Escape") {
      closeLightbox();
    } else if (e.key === "ArrowLeft") {
      showPrev();
    } else if (e.key === "ArrowRight") {
      showNext();
    }
  });
});
</script>]]></content><author><name>Your Name</name></author><category term="lab-life" /><category term="event" /><category term="lab-life" /><summary type="html"><![CDATA[]]></summary></entry><entry><title type="html">Hallowen Party</title><link href="https://tmucrelab.github.io/CRELab-website/life/20251014-halloween-party/" rel="alternate" type="text/html" title="Hallowen Party" /><published>2025-10-14T00:00:00+00:00</published><updated>2025-10-14T00:00:00+00:00</updated><id>https://tmucrelab.github.io/CRELab-website/life/Halloween-Party</id><content type="html" xml:base="https://tmucrelab.github.io/CRELab-website/life/20251014-halloween-party/"><![CDATA[<!-- ===================================================== -->
<!--                     Photo Slider                      -->
<!-- ===================================================== -->

<div class="simple-slider post-slider">
  <div class="simple-slider__track">
    <div class="simple-slider__slides">
      
        <div class="simple-slider__img is-active">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-10-14-Halloween-Party/2025-10-14-Halloween-Party-01.jpg" alt="Hallowen Party image 1" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-10-14-Halloween-Party/2025-10-14-Halloween-Party-02.jpg" alt="Hallowen Party image 2" />
        </div>
      
    </div>

    <!-- 左右箭頭 -->
    <button class="simple-slider__arrow simple-slider__arrow--prev" type="button">
      &#10094;
    </button>
    <button class="simple-slider__arrow simple-slider__arrow--next" type="button">
      &#10095;
    </button>

    <!-- 小圓點導航 -->
    <div class="simple-slider__dots"></div>
  </div>
</div>

<!-- ===================================================== -->
<!--                     Article Text                      -->
<!-- ===================================================== -->

<p>Halloween Party.</p>

<!-- ===================================================== -->
<!--                     Photo Gallery                     -->
<!-- ===================================================== -->

<h2 id="photo-gallery">Photo Gallery</h2>
<div class="post-gallery">
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-10-14-Halloween-Party/2025-10-14-Halloween-Party-01.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-10-14-Halloween-Party/2025-10-14-Halloween-Party-01.jpg" alt="Hallowen Party thumbnail 1" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-10-14-Halloween-Party/2025-10-14-Halloween-Party-02.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-10-14-Halloween-Party/2025-10-14-Halloween-Party-02.jpg" alt="Hallowen Party thumbnail 2" />
      </a>

    
  
</div>

<!-- ===================================================== -->
<!--                   Lightbox，集錦                       -->
<!-- ===================================================== -->

<div class="post-lightbox" id="post-lightbox" hidden="">
  <button class="post-lightbox__close" type="button" aria-label="Close media">&times;</button>

  <button class="post-lightbox__nav post-lightbox__nav--prev" type="button" aria-label="Previous media">
    &#10094;
  </button>

  <div class="post-lightbox__inner">
    <img src="" alt="Expanded image" id="post-lightbox-img" />

    <video id="post-lightbox-video" controls="" playsinline="">
      <source src="" type="video/mp4" />
    </video>
  </div>

  <button class="post-lightbox__nav post-lightbox__nav--next" type="button" aria-label="Next media">
    &#10095;
  </button>
</div>

<!-- ===================================================== -->
<!--                     Slider Script                     -->
<!-- ===================================================== -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const sliders = document.querySelectorAll(".simple-slider");

  sliders.forEach((slider) => {
    const slides = slider.querySelectorAll(".simple-slider__img");
    const prevBtn = slider.querySelector(".simple-slider__arrow--prev");
    const nextBtn = slider.querySelector(".simple-slider__arrow--next");
    const dotsWrap = slider.querySelector(".simple-slider__dots");

    let current = 0;
    let intervalId = null;

    if (slides.length <= 1) return;


    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle("is-active", i === index);
      });

      const dots = dotsWrap.querySelectorAll(".simple-slider__dot");
      dots.forEach((dot, i) => {
        dot.classList.toggle("is-active", i === index);
      });

      current = index;
    }

    function nextSlide() {
      showSlide((current + 1) % slides.length);
    }

    function prevSlide() {
      showSlide((current - 1 + slides.length) % slides.length);
    }

    function startSlider() {
      if (intervalId) return;
      intervalId = setInterval(nextSlide, 3000);
    }

    function stopSlider() {
      clearInterval(intervalId);
      intervalId = null;
    }

    slides.forEach((_, i) => {
      const dot = document.createElement("button");
      dot.className = "simple-slider__dot" + (i === 0 ? " is-active" : "");
      dot.addEventListener("click", () => {
        stopSlider();
        showSlide(i);
        startSlider();
      });

      dotsWrap.appendChild(dot);
    });

    prevBtn.addEventListener("click", () => {
      stopSlider();
      prevSlide();
      startSlider();
    });

    nextBtn.addEventListener("click", () => {
      stopSlider();
      nextSlide();
      startSlider();
    });

    slider.addEventListener("mouseenter", stopSlider);
    slider.addEventListener("mouseleave", startSlider);

    showSlide(0);
    startSlider();
  });
});
</script>

<!-- ===================================================== -->
<!--                    Gallery Lightbox                   -->
<!-- ===================================================== -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("post-lightbox");
  const lightboxInner = lightbox.querySelector(".post-lightbox__inner");
  const lightboxImg = document.getElementById("post-lightbox-img");
  const lightboxVideo = document.getElementById("post-lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".post-lightbox__close");
  const prevBtn = lightbox.querySelector(".post-lightbox__nav--prev");
  const nextBtn = lightbox.querySelector(".post-lightbox__nav--next");
  const items = Array.from(document.querySelectorAll(".post-gallery__item"));

  let currentIndex = -1;

  function closeLightbox() {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightbox.hidden = true;
    document.body.classList.remove("post-lightbox-open");
    currentIndex = -1;
  }

  function openImage(src) {
    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightboxImg.src = src;
    lightboxImg.style.display = "block";
  }

  function openVideo(src) {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideoSource.src = src;
    lightboxVideo.load();
    lightboxVideo.style.display = "block";
  }

  function showItem(index) {
    if (items.length === 0) return;

    if (index < 0) {
      index = items.length - 1;
    }

    if (index >= items.length) {
      index = 0;
    }

    currentIndex = index;

    const item = items[currentIndex];
    const type = item.dataset.type;
    const href = item.getAttribute("href");

    if (type === "video") {
      openVideo(href);
    } else {
      openImage(href);
    }

    lightbox.hidden = false;
    document.body.classList.add("post-lightbox-open");
  }

  function showPrev() {
    if (currentIndex === -1) return;
    showItem(currentIndex - 1);
  }

  function showNext() {
    if (currentIndex === -1) return;
    showItem(currentIndex + 1);
  }

  items.forEach((item, index) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      showItem(index);
    });
  });

  closeBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    closeLightbox();
  });

  prevBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showPrev();
  });

  nextBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showNext();
  });

  lightbox.addEventListener("click", function (e) {
    if (!lightboxInner.contains(e.target) &&
        !prevBtn.contains(e.target) &&
        !nextBtn.contains(e.target) &&
        !closeBtn.contains(e.target)) {
      closeLightbox();
    }
  });

  document.addEventListener("keydown", function (e) {
    if (lightbox.hidden) return;

    if (e.key === "Escape") {
      closeLightbox();
    } else if (e.key === "ArrowLeft") {
      showPrev();
    } else if (e.key === "ArrowRight") {
      showNext();
    }
  });
});
</script>]]></content><author><name>Your Name</name></author><category term="lab-life" /><category term="event" /><category term="lab-life" /><summary type="html"><![CDATA[]]></summary></entry><entry><title type="html">YC’s Special Talk</title><link href="https://tmucrelab.github.io/CRELab-website/life/20250826-ycs-special-talk/" rel="alternate" type="text/html" title="YC’s Special Talk" /><published>2025-08-26T00:00:00+00:00</published><updated>2025-08-26T00:00:00+00:00</updated><id>https://tmucrelab.github.io/CRELab-website/life/YC&apos;s-Special-Talk</id><content type="html" xml:base="https://tmucrelab.github.io/CRELab-website/life/20250826-ycs-special-talk/"><![CDATA[<!-- ===================================================== -->
<!--                     Photo Slider                      -->
<!-- ===================================================== -->

<div class="simple-slider post-slider">
  <div class="simple-slider__track">
    <div class="simple-slider__slides">
      
        <div class="simple-slider__img is-active">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-01.jpg" alt="YC's Special Talk image 1" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-02.jpg" alt="YC's Special Talk image 2" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-03.jpg" alt="YC's Special Talk image 3" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-04.jpg" alt="YC's Special Talk image 4" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-05.jpg" alt="YC's Special Talk image 5" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-06.jpg" alt="YC's Special Talk image 6" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-07.jpg" alt="YC's Special Talk image 7" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-08.jpg" alt="YC's Special Talk image 8" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-09.jpg" alt="YC's Special Talk image 9" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-10.jpg" alt="YC's Special Talk image 10" />
        </div>
      
    </div>

    <!-- 左右箭頭 -->
    <button class="simple-slider__arrow simple-slider__arrow--prev" type="button">
      &#10094;
    </button>
    <button class="simple-slider__arrow simple-slider__arrow--next" type="button">
      &#10095;
    </button>

    <!-- 小圓點導航 -->
    <div class="simple-slider__dots"></div>
  </div>
</div>

<!-- ===================================================== -->
<!--                     Article Text                      -->
<!-- ===================================================== -->

<p>Professor YC gave a talk.</p>

<!-- ===================================================== -->
<!--                     Photo Gallery                     -->
<!-- ===================================================== -->

<h2 id="photo-gallery">Photo Gallery</h2>
<div class="post-gallery">
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-01.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-01.jpg" alt="YC's Special Talk thumbnail 1" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-02.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-02.jpg" alt="YC's Special Talk thumbnail 2" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-03.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-03.jpg" alt="YC's Special Talk thumbnail 3" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-04.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-04.jpg" alt="YC's Special Talk thumbnail 4" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-05.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-05.jpg" alt="YC's Special Talk thumbnail 5" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-06.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-06.jpg" alt="YC's Special Talk thumbnail 6" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-07.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-07.jpg" alt="YC's Special Talk thumbnail 7" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-08.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-08.jpg" alt="YC's Special Talk thumbnail 8" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-09.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-09.jpg" alt="YC's Special Talk thumbnail 9" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-10.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-08-26-YC's-Special-Talk/2025-08-26-YC's-Special-Talk-10.jpg" alt="YC's Special Talk thumbnail 10" />
      </a>

    
  
</div>

<!-- ===================================================== -->
<!--                   Lightbox，集錦                       -->
<!-- ===================================================== -->

<div class="post-lightbox" id="post-lightbox" hidden="">
  <button class="post-lightbox__close" type="button" aria-label="Close media">&times;</button>

  <button class="post-lightbox__nav post-lightbox__nav--prev" type="button" aria-label="Previous media">
    &#10094;
  </button>

  <div class="post-lightbox__inner">
    <img src="" alt="Expanded image" id="post-lightbox-img" />

    <video id="post-lightbox-video" controls="" playsinline="">
      <source src="" type="video/mp4" />
    </video>
  </div>

  <button class="post-lightbox__nav post-lightbox__nav--next" type="button" aria-label="Next media">
    &#10095;
  </button>
</div>

<!-- ===================================================== -->
<!--                     Slider Script                     -->
<!-- ===================================================== -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const sliders = document.querySelectorAll(".simple-slider");

  sliders.forEach((slider) => {
    const slides = slider.querySelectorAll(".simple-slider__img");
    const prevBtn = slider.querySelector(".simple-slider__arrow--prev");
    const nextBtn = slider.querySelector(".simple-slider__arrow--next");
    const dotsWrap = slider.querySelector(".simple-slider__dots");

    let current = 0;
    let intervalId = null;

    if (slides.length <= 1) return;


    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle("is-active", i === index);
      });

      const dots = dotsWrap.querySelectorAll(".simple-slider__dot");
      dots.forEach((dot, i) => {
        dot.classList.toggle("is-active", i === index);
      });

      current = index;
    }

    function nextSlide() {
      showSlide((current + 1) % slides.length);
    }

    function prevSlide() {
      showSlide((current - 1 + slides.length) % slides.length);
    }

    function startSlider() {
      if (intervalId) return;
      intervalId = setInterval(nextSlide, 3000);
    }

    function stopSlider() {
      clearInterval(intervalId);
      intervalId = null;
    }

    slides.forEach((_, i) => {
      const dot = document.createElement("button");
      dot.className = "simple-slider__dot" + (i === 0 ? " is-active" : "");
      dot.addEventListener("click", () => {
        stopSlider();
        showSlide(i);
        startSlider();
      });

      dotsWrap.appendChild(dot);
    });

    prevBtn.addEventListener("click", () => {
      stopSlider();
      prevSlide();
      startSlider();
    });

    nextBtn.addEventListener("click", () => {
      stopSlider();
      nextSlide();
      startSlider();
    });

    slider.addEventListener("mouseenter", stopSlider);
    slider.addEventListener("mouseleave", startSlider);

    showSlide(0);
    startSlider();
  });
});
</script>

<!-- ===================================================== -->
<!--                    Gallery Lightbox                   -->
<!-- ===================================================== -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("post-lightbox");
  const lightboxInner = lightbox.querySelector(".post-lightbox__inner");
  const lightboxImg = document.getElementById("post-lightbox-img");
  const lightboxVideo = document.getElementById("post-lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".post-lightbox__close");
  const prevBtn = lightbox.querySelector(".post-lightbox__nav--prev");
  const nextBtn = lightbox.querySelector(".post-lightbox__nav--next");
  const items = Array.from(document.querySelectorAll(".post-gallery__item"));

  let currentIndex = -1;

  function closeLightbox() {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightbox.hidden = true;
    document.body.classList.remove("post-lightbox-open");
    currentIndex = -1;
  }

  function openImage(src) {
    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightboxImg.src = src;
    lightboxImg.style.display = "block";
  }

  function openVideo(src) {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideoSource.src = src;
    lightboxVideo.load();
    lightboxVideo.style.display = "block";
  }

  function showItem(index) {
    if (items.length === 0) return;

    if (index < 0) {
      index = items.length - 1;
    }

    if (index >= items.length) {
      index = 0;
    }

    currentIndex = index;

    const item = items[currentIndex];
    const type = item.dataset.type;
    const href = item.getAttribute("href");

    if (type === "video") {
      openVideo(href);
    } else {
      openImage(href);
    }

    lightbox.hidden = false;
    document.body.classList.add("post-lightbox-open");
  }

  function showPrev() {
    if (currentIndex === -1) return;
    showItem(currentIndex - 1);
  }

  function showNext() {
    if (currentIndex === -1) return;
    showItem(currentIndex + 1);
  }

  items.forEach((item, index) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      showItem(index);
    });
  });

  closeBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    closeLightbox();
  });

  prevBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showPrev();
  });

  nextBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showNext();
  });

  lightbox.addEventListener("click", function (e) {
    if (!lightboxInner.contains(e.target) &&
        !prevBtn.contains(e.target) &&
        !nextBtn.contains(e.target) &&
        !closeBtn.contains(e.target)) {
      closeLightbox();
    }
  });

  document.addEventListener("keydown", function (e) {
    if (lightbox.hidden) return;

    if (e.key === "Escape") {
      closeLightbox();
    } else if (e.key === "ArrowLeft") {
      showPrev();
    } else if (e.key === "ArrowRight") {
      showNext();
    }
  });
});
</script>]]></content><author><name>Your Name</name></author><category term="lab-life" /><category term="event" /><category term="lab-life" /><summary type="html"><![CDATA[]]></summary></entry><entry><title type="html">YiLan Trip</title><link href="https://tmucrelab.github.io/CRELab-website/life/20250726-yilan-trip/" rel="alternate" type="text/html" title="YiLan Trip" /><published>2025-07-26T00:00:00+00:00</published><updated>2025-07-26T00:00:00+00:00</updated><id>https://tmucrelab.github.io/CRELab-website/life/YiLan-Trip</id><content type="html" xml:base="https://tmucrelab.github.io/CRELab-website/life/20250726-yilan-trip/"><![CDATA[<!-- ===================================================== -->
<!--                     Photo Slider                      -->
<!-- ===================================================== -->

<div class="simple-slider post-slider">
  <div class="simple-slider__track">
    <div class="simple-slider__slides">
      
        <div class="simple-slider__img is-active">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-01.jpg" alt="YiLan Trip image 1" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-02.jpg" alt="YiLan Trip image 2" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-03.jpg" alt="YiLan Trip image 3" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-04.jpg" alt="YiLan Trip image 4" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-05.jpg" alt="YiLan Trip image 5" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-06.jpg" alt="YiLan Trip image 6" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-07.jpg" alt="YiLan Trip image 7" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-08.jpg" alt="YiLan Trip image 8" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-09.jpg" alt="YiLan Trip image 9" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-10.jpg" alt="YiLan Trip image 10" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-11.jpg" alt="YiLan Trip image 11" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-12.jpg" alt="YiLan Trip image 12" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-13.jpg" alt="YiLan Trip image 13" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-14.jpg" alt="YiLan Trip image 14" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-15.jpg" alt="YiLan Trip image 15" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-16.jpg" alt="YiLan Trip image 16" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-17.PNG" alt="YiLan Trip image 17" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-18.jpg" alt="YiLan Trip image 18" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-19.jpg" alt="YiLan Trip image 19" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-20.jpg" alt="YiLan Trip image 20" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-21.jpg" alt="YiLan Trip image 21" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-22.jpg" alt="YiLan Trip image 22" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-23.jpg" alt="YiLan Trip image 23" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-24.jpg" alt="YiLan Trip image 24" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-25.jpg" alt="YiLan Trip image 25" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-26.JPG" alt="YiLan Trip image 26" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-27.JPG" alt="YiLan Trip image 27" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-28.JPG" alt="YiLan Trip image 28" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-29.JPG" alt="YiLan Trip image 29" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-30.jpg" alt="YiLan Trip image 30" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-31.jpg" alt="YiLan Trip image 31" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-32.jpg" alt="YiLan Trip image 32" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-33.jpg" alt="YiLan Trip image 33" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-34.jpg" alt="YiLan Trip image 34" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-35.jpg" alt="YiLan Trip image 35" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-36.jpg" alt="YiLan Trip image 36" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-37.JPG" alt="YiLan Trip image 37" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-38.JPG" alt="YiLan Trip image 38" />
        </div>
      
        <div class="simple-slider__img ">
          <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-39.JPG" alt="YiLan Trip image 39" />
        </div>
      
    </div>

    <!-- 左右箭頭 -->
    <button class="simple-slider__arrow simple-slider__arrow--prev" type="button">
      &#10094;
    </button>
    <button class="simple-slider__arrow simple-slider__arrow--next" type="button">
      &#10095;
    </button>

    <!-- 小圓點導航 -->
    <div class="simple-slider__dots"></div>
  </div>
</div>

<!-- ===================================================== -->
<!--                     Article Text                      -->
<!-- ===================================================== -->

<p>Trip to YiLan.</p>

<!-- ===================================================== -->
<!--                     Photo Gallery                     -->
<!-- ===================================================== -->

<h2 id="photo-gallery">Photo Gallery</h2>
<div class="post-gallery">
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-01.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-01.jpg" alt="YiLan Trip thumbnail 1" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-02.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-02.jpg" alt="YiLan Trip thumbnail 2" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-03.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-03.jpg" alt="YiLan Trip thumbnail 3" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-04.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-04.jpg" alt="YiLan Trip thumbnail 4" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-06.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-06.jpg" alt="YiLan Trip thumbnail 5" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-07.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-07.jpg" alt="YiLan Trip thumbnail 6" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-08.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-08.jpg" alt="YiLan Trip thumbnail 7" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-09.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-09.jpg" alt="YiLan Trip thumbnail 8" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-10.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-10.jpg" alt="YiLan Trip thumbnail 9" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-11.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-11.jpg" alt="YiLan Trip thumbnail 10" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-12.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-12.jpg" alt="YiLan Trip thumbnail 11" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-13.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-13.jpg" alt="YiLan Trip thumbnail 12" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-14.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-14.jpg" alt="YiLan Trip thumbnail 13" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-15.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-15.jpg" alt="YiLan Trip thumbnail 14" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-16.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-16.jpg" alt="YiLan Trip thumbnail 15" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-19.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-19.jpg" alt="YiLan Trip thumbnail 16" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-20.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-20.jpg" alt="YiLan Trip thumbnail 17" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-21.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-21.jpg" alt="YiLan Trip thumbnail 18" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-22.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-22.jpg" alt="YiLan Trip thumbnail 19" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-23.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-23.jpg" alt="YiLan Trip thumbnail 20" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-24.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-24.jpg" alt="YiLan Trip thumbnail 21" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-25.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-25.jpg" alt="YiLan Trip thumbnail 22" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-26.JPG" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-26.JPG" alt="YiLan Trip thumbnail 23" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-27.JPG" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-27.JPG" alt="YiLan Trip thumbnail 24" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-28.JPG" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-28.JPG" alt="YiLan Trip thumbnail 25" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-30.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-30.jpg" alt="YiLan Trip thumbnail 26" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-31.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-31.jpg" alt="YiLan Trip thumbnail 27" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-32.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-32.jpg" alt="YiLan Trip thumbnail 28" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-33.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-33.jpg" alt="YiLan Trip thumbnail 29" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-34.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-34.jpg" alt="YiLan Trip thumbnail 30" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-35.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-35.jpg" alt="YiLan Trip thumbnail 31" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-36.jpg" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-36.jpg" alt="YiLan Trip thumbnail 32" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-37.JPG" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-37.JPG" alt="YiLan Trip thumbnail 33" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-38.JPG" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-38.JPG" alt="YiLan Trip thumbnail 34" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-39.JPG" class="post-gallery__item " data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-39.JPG" alt="YiLan Trip thumbnail 35" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-05.jpg" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-05.jpg" alt="YiLan Trip thumbnail 36" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-17.PNG" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-17.PNG" alt="YiLan Trip thumbnail 37" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-18.PNG" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-18.PNG" alt="YiLan Trip thumbnail 38" />
      </a>

    
  
    
      <a href="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-29.JPG" class="post-gallery__item is-portrait" data-type="image">
        <img src="/CRELab-website/assets/assets/images/Lab-Life/2025-07-26-YiLan-Trip/2025-07-26-YiLan-Trip-29.JPG" alt="YiLan Trip thumbnail 39" />
      </a>

    
  
</div>

<!-- ===================================================== -->
<!--                   Lightbox，集錦                       -->
<!-- ===================================================== -->

<div class="post-lightbox" id="post-lightbox" hidden="">
  <button class="post-lightbox__close" type="button" aria-label="Close media">&times;</button>

  <button class="post-lightbox__nav post-lightbox__nav--prev" type="button" aria-label="Previous media">
    &#10094;
  </button>

  <div class="post-lightbox__inner">
    <img src="" alt="Expanded image" id="post-lightbox-img" />

    <video id="post-lightbox-video" controls="" playsinline="">
      <source src="" type="video/mp4" />
    </video>
  </div>

  <button class="post-lightbox__nav post-lightbox__nav--next" type="button" aria-label="Next media">
    &#10095;
  </button>
</div>

<!-- ===================================================== -->
<!--                     Slider Script                     -->
<!-- ===================================================== -->

<script>
document.addEventListener("DOMContentLoaded", function () {
  const sliders = document.querySelectorAll(".simple-slider");

  sliders.forEach((slider) => {
    const slides = slider.querySelectorAll(".simple-slider__img");
    const prevBtn = slider.querySelector(".simple-slider__arrow--prev");
    const nextBtn = slider.querySelector(".simple-slider__arrow--next");
    const dotsWrap = slider.querySelector(".simple-slider__dots");

    let current = 0;
    let intervalId = null;

    if (slides.length <= 1) return;


    function showSlide(index) {
      slides.forEach((slide, i) => {
        slide.classList.toggle("is-active", i === index);
      });

      const dots = dotsWrap.querySelectorAll(".simple-slider__dot");
      dots.forEach((dot, i) => {
        dot.classList.toggle("is-active", i === index);
      });

      current = index;
    }

    function nextSlide() {
      showSlide((current + 1) % slides.length);
    }

    function prevSlide() {
      showSlide((current - 1 + slides.length) % slides.length);
    }

    function startSlider() {
      if (intervalId) return;
      intervalId = setInterval(nextSlide, 3000);
    }

    function stopSlider() {
      clearInterval(intervalId);
      intervalId = null;
    }

    slides.forEach((_, i) => {
      const dot = document.createElement("button");
      dot.className = "simple-slider__dot" + (i === 0 ? " is-active" : "");
      dot.addEventListener("click", () => {
        stopSlider();
        showSlide(i);
        startSlider();
      });

      dotsWrap.appendChild(dot);
    });

    prevBtn.addEventListener("click", () => {
      stopSlider();
      prevSlide();
      startSlider();
    });

    nextBtn.addEventListener("click", () => {
      stopSlider();
      nextSlide();
      startSlider();
    });

    slider.addEventListener("mouseenter", stopSlider);
    slider.addEventListener("mouseleave", startSlider);

    showSlide(0);
    startSlider();
  });
});
</script>

<!-- ===================================================== -->
<!--                    Gallery Lightbox                   -->
<!-- ===================================================== -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  const lightbox = document.getElementById("post-lightbox");
  const lightboxInner = lightbox.querySelector(".post-lightbox__inner");
  const lightboxImg = document.getElementById("post-lightbox-img");
  const lightboxVideo = document.getElementById("post-lightbox-video");
  const lightboxVideoSource = lightboxVideo.querySelector("source");
  const closeBtn = lightbox.querySelector(".post-lightbox__close");
  const prevBtn = lightbox.querySelector(".post-lightbox__nav--prev");
  const nextBtn = lightbox.querySelector(".post-lightbox__nav--next");
  const items = Array.from(document.querySelectorAll(".post-gallery__item"));

  let currentIndex = -1;

  function closeLightbox() {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightbox.hidden = true;
    document.body.classList.remove("post-lightbox-open");
    currentIndex = -1;
  }

  function openImage(src) {
    lightboxVideo.pause();
    lightboxVideoSource.src = "";
    lightboxVideo.load();
    lightboxVideo.style.display = "none";

    lightboxImg.src = src;
    lightboxImg.style.display = "block";
  }

  function openVideo(src) {
    lightboxImg.src = "";
    lightboxImg.style.display = "none";

    lightboxVideoSource.src = src;
    lightboxVideo.load();
    lightboxVideo.style.display = "block";
  }

  function showItem(index) {
    if (items.length === 0) return;

    if (index < 0) {
      index = items.length - 1;
    }

    if (index >= items.length) {
      index = 0;
    }

    currentIndex = index;

    const item = items[currentIndex];
    const type = item.dataset.type;
    const href = item.getAttribute("href");

    if (type === "video") {
      openVideo(href);
    } else {
      openImage(href);
    }

    lightbox.hidden = false;
    document.body.classList.add("post-lightbox-open");
  }

  function showPrev() {
    if (currentIndex === -1) return;
    showItem(currentIndex - 1);
  }

  function showNext() {
    if (currentIndex === -1) return;
    showItem(currentIndex + 1);
  }

  items.forEach((item, index) => {
    item.addEventListener("click", function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      showItem(index);
    });
  });

  closeBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    closeLightbox();
  });

  prevBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showPrev();
  });

  nextBtn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    showNext();
  });

  lightbox.addEventListener("click", function (e) {
    if (!lightboxInner.contains(e.target) &&
        !prevBtn.contains(e.target) &&
        !nextBtn.contains(e.target) &&
        !closeBtn.contains(e.target)) {
      closeLightbox();
    }
  });

  document.addEventListener("keydown", function (e) {
    if (lightbox.hidden) return;

    if (e.key === "Escape") {
      closeLightbox();
    } else if (e.key === "ArrowLeft") {
      showPrev();
    } else if (e.key === "ArrowRight") {
      showNext();
    }
  });
});
</script>]]></content><author><name>Your Name</name></author><category term="lab-life" /><category term="event" /><category term="lab-life" /><summary type="html"><![CDATA[]]></summary></entry></feed>