lightbox2

最新推荐文章于 2024-09-13 22:24:49 发布

转载最新推荐文章于 2024-09-13 22:24:49 发布 · 122 阅读

本文介绍了一个简单实用的 Lightbox 效果实现方法。通过引入 lightbox.min.css 和 lightbox-plus-jquery.min.js 文件，可以轻松为网页图片添加 Lightbox 放大预览功能。示例展示了如何在 HTML 和 ascx 页面中应用 Lightbox，包括必要的链接和脚本引入方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://lokeshdhakar.com/projects/lightbox2/

简单的demo

<html>
<head id="head">
    <title>
        My Site - GiftList
    </title>
    <meta charset="UTF-8">
</head>
<body class="LTR Chrome ENUS ContentBody">
    <a href="./images/empty.jpg" data-lightbox="image-1" data-title="My caption"><img src="./images/empty.jpg" /></a>
    <link href="./Scripts/lightbox2/lightbox.min.css" rel="stylesheet">
    <script src="./Scripts/lightbox2/lightbox-plus-jquery.min.js"></script>
</body>
</html>

在ascx中使用lightbox

<link href="<%= ResolveUrl("~/Scripts/lightbox2/lightbox.min.css") %>" rel="stylesheet" />
<script src="<%= ResolveUrl("~/Scripts/lightbox2/lightbox-plus-jquery.min.js") %>" ></script>

 <a href="<%# TransFunctions.GetGiftDefaultImageURL(Eval("GiftID")) %>&height=100&width=100" data-lightbox="image-1" data-title="My caption">
<img src="<%# TransFunctions.GetGiftDefaultImageURL(Eval("GiftID")) %>&height=100&width=100" alt="<%# Eval("GiftName") %>" border="1" />
</a>