Lightbox2图片预览异常求助：仅显示文本无预览图

核心问题总结 #

你的代码存在三个关键问题，导致Lightbox2无法正常显示预览图且直接<img>无法触发效果：

• HTML结构错误：将内容<div>放在了<head>标签内，浏览器无法正确渲染页面内容
• 缺失Lightbox2核心JS文件：仅引入了CSS和jQuery，未加载Lightbox2的JavaScript文件
• 预览图实现方式错误：纯文本链接本身不会显示图片预览，需要在<a>标签内嵌入<img>作为缩略图；直接使用<img>未包裹在带data-lightbox属性的<a>中，无法触发Lightbox效果

修正后的完整代码 #

<!DOCTYPE html>
<html lang="sk" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="lightbox2-2.11.4/dist/css/lightbox.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- 新增Lightbox2的JS文件引入 -->
    <script src="lightbox2-2.11.4/dist/js/lightbox.min.js"></script>
    <title>Maškrtníček</title>
</head>
<body>
    <!-- 把内容div移到body内 -->
    <div class="text-2xl text-center w-full bg-orange-200 py-6" id="fotky">
        <h2 class="text-2xl">Fotky</h2>
        <!-- 在a标签内添加img作为预览缩略图 -->
        <a href="pictures/proxy-image.png" data-lightbox="image-1" data-title="My caption">
            <img src="pictures/proxy-image.png" alt="预览图" class="w-32 h-auto">
        </a>
    </div>
</body>
</html>

关键修正点说明 #

• 修复HTML结构：所有页面内容必须放在<body>标签内，<head>仅用于元数据、样式和脚本引入
• 补充Lightbox2 JS文件：Lightbox的交互逻辑依赖其自身的JavaScript文件，必须在jQuery之后引入
• 实现预览图：在带data-lightbox属性的<a>标签内嵌入<img>，使用缩略图（可以是原图的缩小版，也可以直接用原图）作为预览，点击后会触发Lightbox显示大图
• 触发Lightbox的正确方式：必须将<img>包裹在带有data-lightbox属性的<a>标签中，Lightbox只会监听这类<a>标签的点击事件

内容的提问来源于stack exchange，提问作者samokosik