Update app.py

app.py

@@ -22,42 +22,128 @@ image_data = [
 # 初始化 session state 用於追蹤當前頁面
 if 'page' not in st.session_state:
     st.session_state.page = 0
+if 'fullscreen' not in st.session_state:
+    st.session_state.fullscreen = False
 
-# 使用容器來控制圖片和點擊區域的佈局
-with st.container():
-    # 顯示當前頁面的圖片，全屏顯示
-    st.image(image_data[st.session_state.page]["path"], 
-             caption=image_data[st.session_state.page]["caption"], 
-             use_container_width=True)
-
-    # 自訂 CSS 樣式，將點擊區域設為透明並覆蓋圖片左右兩側
-    st.markdown("""
+# 自訂全屏和換頁功能
+st.markdown("""
     <style>
-    .click-area {
-        position: absolute;
+    .fullscreen-container {
+        display: none;
+        position: fixed;
         top: 0;
+        left: 0;
+        width: 100%;
         height: 100%;
-        width: 30%; /* 左右各占 30% 的點擊區域 */
-        background-color: rgba(0, 0, 0, 0); /* 完全透明 */
+        background: #000;
+        z-index: 1000;
+        justify-content: center;
+        align-items: center;
+    }
+    .fullscreen-container.active {
+        display: flex;
+    }
+    .fullscreen-image {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+    }
+    .caption {
+        position: absolute;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: white;
+        font-size: 20px;
+    }
+    .nav-buttons {
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding: 0 20px;
+        transform: translateY(-50%);
+    }
+    .nav-buttons button {
+        background-color: rgba(255, 255, 255, 0.7);
+        border: none;
+        padding: 10px 20px;
+        font-size: 16px;
         cursor: pointer;
     }
-    .left-click {
-        left: 0;
+    .nav-buttons button:hover {
+        background-color: rgba(255, 255, 255, 1);
     }
-    .right-click {
-        right: 0;
+    .exit-fullscreen {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background-color: rgba(255, 255, 255, 0.7);
+        border: none;
+        padding: 5px 10px;
+        cursor: pointer;
     }
     </style>
-    """, unsafe_allow_html=True)
+    <div class="fullscreen-container" id="fullscreen-container">
+        <img class="fullscreen-image" id="fullscreen-image" src="">
+        <div class="caption" id="fullscreen-caption"></div>
+        <div class="nav-buttons">
+            <button onclick="changePage(-1)">上一頁</button>
+            <button onclick="changePage(1)">下一頁</button>
+        </div>
+        <button class="exit-fullscreen" onclick="exitFullscreen()">退出全屏</button>
+    </div>
+    <script>
+        function toggleFullscreen() {
+            const container = document.getElementById('fullscreen-container');
+            const image = document.getElementById('fullscreen-image');
+            const caption = document.getElementById('fullscreen-caption');
+            const page = parseInt(window.parent.document.getElementById('page').value);
+            image.src = window.parent.streamlitDocStore.get('image_data')[page]['path'];
+            caption.textContent = window.parent.streamlitDocStore.get('image_data')[page]['caption'];
+            container.classList.toggle('active');
+            window.parent.document.getElementById('fullscreen').value = container.classList.contains('active');
+            window.parent.streamlitDocStore.setRerun();
+        }
+
+        function changePage(direction) {
+            let page = parseInt(window.parent.document.getElementById('page').value);
+            const maxPage = window.parent.streamlitDocStore.get('image_data').length - 1;
+            page = Math.max(0, Math.min(maxPage, page + direction));
+            window.parent.document.getElementById('page').value = page;
+            toggleFullscreen(); // 切換後重新載入圖片
+        }
+
+        function exitFullscreen() {
+            const container = document.getElementById('fullscreen-container');
+            container.classList.remove('active');
+            window.parent.document.getElementById('fullscreen').value = false;
+            window.parent.streamlitDocStore.setRerun();
+        }
+
+        // 監聽鍵盤事件（可選）
+        document.addEventListener('keydown', (event) => {
+            if (document.getElementById('fullscreen-container').classList.contains('active')) {
+                if (event.key === 'ArrowLeft') changePage(-1);
+                if (event.key === 'ArrowRight') changePage(1);
+                if (event.key === 'Escape') exitFullscreen();
+            }
+        });
+    </script>
+    <input type="hidden" id="page" value="0">
+    <input type="hidden" id="fullscreen" value="false">
+    <button onclick="toggleFullscreen()">點擊進入全屏</button>
+""", unsafe_allow_html=True)
+
+# 根據 session state 控制全屏狀態
+if st.session_state.fullscreen:
+    st.markdown(f'<script>toggleFullscreen()</script>', unsafe_allow_html=True)
 
-    # 分成左右兩欄作為點擊區域
-    col_left, col_center, col_right = st.columns([1, 2, 1])  # 左右各占 1，中間占 2
-    with col_left:
-        if st.button("", key="prev_area", help="點擊左側回到上一頁") and st.session_state.page > 0:
-            st.session_state.page -= 1
-    with col_right:
-        if st.button("", key="next_area", help="點擊右側前往下一頁") and st.session_state.page < len(image_data) - 1:
-            st.session_state.page += 1
+# 顯示當前頁面的圖片（非全屏模式）
+st.image(image_data[st.session_state.page]["path"], 
+         caption=image_data[st.session_state.page]["caption"], 
+         use_container_width=True)
 
 # 顯示當前頁數
 st.write(f"頁面: {st.session_state.page + 1} / {len(image_data)}")