jQuery 点击图片放大灯箱效果

最新推荐文章于 2021-04-14 15:01:51 发布

Joshua02

最新推荐文章于 2021-04-14 15:01:51 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： js jquery

本文链接：https://blog.youkuaiyun.com/a314753967/article/details/82593382

js 同时被 2 个专栏收录

45 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

本文介绍如何使用LightBox2插件实现网页中图片的弹窗展示效果，包括单张图片展示和一组图片轮播的功能，并提供具体的HTML、CSS和JavaScript代码示例。

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

使用插件lightBox2，原文及实例代码：

http://www.shouce.ren/study/api/s/6948

github地址：https://github.com/lokesh/lightbox2/

引入js及 css

<link rel="stylesheet" href="//ku.shouce.ren/libs/lightbox/2.7.1/css/lightbox.css">
<script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.7.2.min.js"></script>
<script type="text/javascript" src="//ku.shouce.ren/libs/lightbox/2.7.1/js/lightbox.min.js"></script>

单张图片展示：

<div class="example">
	<h3>单张图片展示</h3>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-1.jpg" data-lightbox="example-1">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-1.jpg" alt="image-1">
	</a>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-2.jpg" data-lightbox="example-2" data-title="可选的标题">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-2.jpg" alt="image-2">
	</a>
</div>

一组图片展示：

<div class="example">
	<h3>一组图片</h3>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-3.jpg" data-lightbox="example-set" data-title="点击图片的右半边进入下一张">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-3.jpg" alt="thumb-3">
	</a>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-4.jpg" data-lightbox="example-set" data-title="按键盘上的右箭头也可以进入下一张">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-4.jpg" alt="thumb-4">
	</a>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-5.jpg" data-lightbox="example-set" data-title="下一张图片提前加载">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-5.jpg" alt="thumb-5">
	</a>
	<a class="example-image-link" href="//ku.shouce.ren/libs/lightbox/2.7.1/img/image-6.jpg" data-lightbox="example-set" data-title="点击图片以外的区域或者关闭按钮，即可关闭灯窗。">
		<img class="example-image" src="//ku.shouce.ren/libs/lightbox/2.7.1/img/thumb-6.jpg" alt="thumb-6">
	</a>
</div>