lightbox插件可以實(shí)現(xiàn)圖片的預(yù)覽功能

lightbox插件的github地址：https://github.com/lokesh/lightbox2

lightbox插件的簡單使用

一：引入lightbox的js

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

二：引入lightbox的css

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

三：html實(shí)現(xiàn)圖片預(yù)覽

1：單張圖片的圖片預(yù)覽實(shí)現(xiàn)

<a href="/images/a1.jpg" data-lightbox="image-1" data-title="圖片1"><img src="/images/a1.jpg" alt=""> </a>

2：多張圖片的圖片預(yù)覽實(shí)現(xiàn)(data-lightbox使用相同的屬性值實(shí)現(xiàn)多圖預(yù)覽)

<a href="/images/a1.jpg" data-lightbox="image-1" data-title="圖片1"><img src="/images/a1.jpg" alt=""> </a> <a href="/images/a2.jpg" data-lightbox="image-1" data-title="圖片2"><img src="/images/a2.jpg" alt=""> </a>

如上我們就可以使用lightbox插件實(shí)現(xiàn)簡單的圖片預(yù)覽功能

總結(jié)

以上是生活随笔為你收集整理的使用lightbox插件实现图片预览功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。