-2

我有这样的代码

<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
<a href="">View Large Image</a>
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
<a href="">View Large Image</a>
<img width="250" height="220" src="img/port1.png" class="wp-post-image" alt="1" />
<a href="">View Large Image</a>

当我们点击查看大图链接时，图片应该显示大并且不会干扰其他图片的位置。

4

2 回答 2

3

http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.6.zip

第 1 部分 - 设置

1.从上方下载并解压Lightbox。

2.在 js 文件夹中查找 jquery-1.10.2.min.js 和 lightbox-2.6.min.js 并从您的 html 页面加载这两个文件。首先加载 jQuery：

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>

3.在 css 文件夹中查找 lightbox.css 并从您的 html 页面加载它：

<link href="css/lightbox.css" rel="stylesheet" />

4.查看 img 文件夹，找到 close.png、loading.gif、prev.png 和 next.png。这些文件在 lightbox.css 中使用。默认情况下，lightbox.css 将在名为 img 的文件夹中查找这些图像。

-------------------------------------------------- --------------------------------------

第 2 部分 - 打开它

1.为任意图片链接添加data-lightbox属性以激活Lightbox。对于属性的值，为每个图像使用唯一的名称。例如：

<a href="img/image-1.jpg" data-lightbox="image-1" title="My caption">image #1</a>

可选：如果要显示标题，请设置标题属性。

2.如果您有一组相关的图像要组合成一个集合，请对所有图像使用相同的 data-lightbox 属性值。例如：

<a href="img/image-2.jpg" data-lightbox="roadtrip">image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">image #4</a>
于 2013-08-28T08:01:26.113 回答
0

我通常使用fancybox jQuery 插件来实现这些目的。您也可以出于简单目的使用旧的免费 1.34 版本，无需专业许可证。您还可以在链接网站上找到很多示例等。

于 2013-08-28T07:49:50.817 回答