点击查看大图像javascript或CSS3

Onclick view large image javascript or CSS3

本文关键字：javascript CSS3 图像      更新时间：2023-09-26

我有类似的代码

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

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

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.cs会在名为img的文件夹中查找这些图像。

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

第2部分-打开

1.将数据灯箱属性添加到任何图像链接以激活灯箱。对于属性的值，请为每个图像使用唯一的名称。例如：

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

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

2.如果有一组相关的图像要组合成一组，请对所有图像使用相同的数据灯箱属性值。例如：

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

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

相关文章：