欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

图像特效 图片特效 lightbox 详解 有大用 自己亲自做的 有大用 有大用

星期一, 2016-06-27 11:45 — adminshiping1

效果 见附件 jQuery Lightbox.zip 
jQuery Lightbox

示例一：2张独立的图片

image-1 image-1

示例二：四张图片集

   
见源代码  
 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
 <meta charset="utf-8">
 <title>Lightbox</title>
 <meta name="description" lang="en" content="Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers."/>
 <meta name="author" content="Lokesh Dhakar">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="shortcut icon" href="img/demopage/favicon.png">
 <link rel="stylesheet" href="css/screen.css">
 <link rel="stylesheet" href="css/lightbox.css">
 <link rel="stylesheet" href="http://www.yyyweb.com/demo/common/init.css">
 <style type="text/css">
 .top-banner {
 background-color: #333;
 }
 </style>
 </head>
 <body>
 <section id="examples" class="examples-section">
 <div class="container">
 <h1 style="font-size:35px">jQuery Lightbox</h1>
 <h3>示例一：2张独立的图片</h3>
 <div class="image-row">
 <a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="img/demopage/image-1.jpg" alt="image-1" /></a>
 <a class="example-image-link" href="img/demopage/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="img/demopage/image-2.jpg" alt="image-1"/></a>
 </div>
  
 <!-- <hr /> -->
  
 <h3 style="clear: both;">示例二：四张图片集</h3>
  
 <div class="image-row">
 <div class="image-set">
 <a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
 <a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
 <a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
 <a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
 </div>
 </div>
 </div>
 </section>
 <div class="footer-banner" style="width:728px; margin:0px auto"></div>
 <script src="js/jquery-1.11.0.min.js"></script>
 <script src="js/lightbox.js"></script>
 <script src="http://www.yyyweb.com/demo/common/init.js"></script>
 </body>
 </html>
 


来自  http://www.yyyweb.com/demo/lightbox/


附件大小
Package icon ​jQuery Lightbox.zip1.47 MB
普通分类: 
jquery
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2