jQuery图片浏览控件lightBox

Posted 小松博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery图片浏览控件lightBox相关的知识,希望对你有一定的参考价值。

下面我来写一个demo简单演示一下
首先下载lightBox插件,取出插件需要的文件
css/lightbox.css
js/jquery-1.11.0.min.js
js/lightbox.js
新建demo.html,内容为

 
   
   
 
  1. <!doctype html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>demo</title>

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

  7. </head>

  8. <body>

  9. <a href="https://static.phpsong.com/wp-content/uploads/2015/03/2015032206005571160.jpg" data-lightbox="roadtrip"><img src="https://static.phpsong.com/wp-content/uploads/2015/03/2015032206005571160-220x150.jpg" width="220" height="150"></a>

  10. <a href="https://static.phpsong.com/wp-content/uploads/2015/03/2015030609524411958.jpg" data-lightbox="roadtrip"><img src="https://static.phpsong.com/wp-content/uploads/2015/03/2015030609524411958.jpg" width="220" height="150"></a>

  11. <a href="https://static.phpsong.com/wp-content/uploads/2015/03/2015031712391081884.jpg" data-lightbox="roadtrip"><img src="https://static.phpsong.com/wp-content/uploads/2015/03/2015031712391081884.jpg" width="220" height="150"></a>

  12.  

  13. <script src="js/jquery-1.11.0.min.js"></script>

  14. <script src="js/lightbox.js"></script>

  15. </body>

  16. </html>

直接预览

点击图片的效果

QQ交流群:136351212(满) 455721967


以上是关于jQuery图片浏览控件lightBox的主要内容,如果未能解决你的问题,请参考以下文章

支持移动触摸的jQuery图片Lightbox插件

jQuery Lightbox图片放大预览

PHP+jquery 瀑布流+LightBox图片盒子特效

JQuery Lightbox代码

PHP CSS3 目录直读式Lightbox 画廊图片展示

JavaScipt实现LightBox效果