Question

我的代码类似

<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>

当我们点击查看大图片链接时，图像应该显示大而不会打扰其他图像位置。

Answer 1

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.将数据灯箱属性添加到任何图像链接以激活Lightbox。对于属性的值，请为每个图像使用唯一的名称。例如：

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

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

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>

Answer 2

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

Onclick查看大图javascript或CSS3

2 个答案:

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