JS兼容移动端的图片放大查看器glightbox.js

简介

GLightbox是一个简单而强大的图片放大查看插件,支持手机移端的动画廊lightbox插件。

使用

1.  引入 glightbox.js 文件

2.  HTML

添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

您可以使用CSS来设置图像容器的样式。

#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 
#overlay img{ border: none; }

要在页面上创建“阴影”效果，您需要使用PNG文件和一些额外的CSS。由于IE对PNG透明度的非正统支持，CSS有点混乱：

#overlay{ background-image: url(overlay.png); }

* html #overlay{
	background-color: #000;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
	}

相关链接

GitHub 地址 ：  https://github.com/biati-digital/glightbox

官方网站 ：https://lokeshdhakar.com/projects/lightbox/

在线演示 ：https://biati-digital.github.io/glightbox/