diff --git a/src/app.css b/src/app.css
index 754ae40..4b5259d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1598,3 +1598,55 @@ footer section p:first-child {
 		padding-top: 0 !important;
 	}
 }
+
+/* 优化文章详情页灯箱 (Fancybox) 布局 */
+.fancybox__container.has-vertical-thumbs {
+	flex-direction: row-reverse !important;
+}
+
+.fancybox__container.has-vertical-thumbs .f-thumbs {
+	width: var(--f-thumb-width, 94px) !important;
+	height: 100% !important;
+	flex-direction: column !important;
+}
+
+.fancybox__container.has-vertical-thumbs .f-thumbs__viewport {
+	flex-direction: column !important;
+	width: 100% !important;
+	height: 100% !important;
+	display: flex !important;
+	gap: 8px !important;
+}
+
+.fancybox__container.has-vertical-thumbs .f-thumbs__track {
+	flex-direction: column !important;
+}
+
+/* 确保图片上下有更多留白，避免顶头 */
+.fancybox__slide {
+	padding: 60px 40px !important;
+}
+
+@media (max-width: 768px) {
+	/* 在移动端恢复默认的底部导航 */
+	.fancybox__container.has-vertical-thumbs {
+		flex-direction: column !important;
+	}
+	.fancybox__container.has-vertical-thumbs .f-thumbs {
+		width: 100% !important;
+		height: auto !important;
+		flex-direction: row !important;
+	}
+	.fancybox__container.has-vertical-thumbs .f-thumbs__viewport {
+		flex-direction: row !important;
+		width: 100% !important;
+		height: 100% !important;
+		display: flex !important;
+	}
+	.fancybox__container.has-vertical-thumbs .f-thumbs__track {
+		flex-direction: row !important;
+	}
+	.fancybox__slide {
+		padding: 40px 10px !important;
+	}
+}
diff --git a/src/lib/components/MarkdownRenderer.svelte b/src/lib/components/MarkdownRenderer.svelte
index d4a1acd..d517432 100644
--- a/src/lib/components/MarkdownRenderer.svelte
+++ b/src/lib/components/MarkdownRenderer.svelte
@@ -372,7 +372,32 @@
 		if (typeof window !== 'undefined' && document.querySelector('[data-fancybox]')) {
 			const { Fancybox } = await import('@fancyapps/ui/dist/index.js');
 			await import('@fancyapps/ui/dist/fancybox/fancybox.css');
-			Fancybox.bind('[data-fancybox]', {});
+			// @ts-expect-error FancyboxOptions types may lack plugin properties like Toolbar/Thumbs in v6
+			Fancybox.bind('[data-fancybox]', {
+				Toolbar: {
+					display: {
+						left: [],
+						middle: [],
+						right: ['thumbs', 'zoomIn', 'zoomOut', 'fullscreen', 'close']
+					}
+				},
+				Thumbs: {
+					autoStart: false, // 默认不显示导航
+					type: 'classic'
+				},
+				Carousel: {
+					// 确保主图周围有留白，不顶边
+				},
+				on: {
+					ready: (fancybox: any) => {
+						// 强制添加 vertical thumbs 相关 class 以让导航靠右显示
+						const container = fancybox.getContainer();
+						if (container) {
+							container.classList.add('has-vertical-thumbs');
+						}
+					}
+				}
+			});
 		}
 
 		if (!container) return;