效果如下
具体方法我已经整理成文件,可以预览查看效果,也可以直接下载浏览源码:
代码如下 | 复制代码 |
<!DOCTYPE html> <html> <head> <title>图片放大浏览</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.2" media="screen" /> <style type="text/css"> .fancybox-custom .fancybox-skin { box-shadow: 0 0 50px #222; } </style> </head> <body> <p> <a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a> <a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a> <a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a> |