JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<div id="container" class="container">
		<ul class="list clear-fix">
			<li class="item">
				<a href="http://m2.img.papaapp.com/farm5/d/2014/0126/14/CC9341D307D8785412BB21B1AC3DCB68_B500_900_500_312.jpeg" class="J_lightbox">
					<img src="http://m3.img.papaapp.com/farm5/d/2014/0126/14/A8D7A16A5F2719E83E862E004B236513_B500_900_96_96.jpeg" alt="">
				</a>
			</li>
			<li class="item">
				<a href="http://m2.img.papaapp.com/farm5/d/2014/0126/14/B2E9326244EBA1343B172C36BE714BE9_B500_900_500_312.jpeg" class="J_lightbox">
					<img src="http://m3.img.papaapp.com/farm5/d/2014/0126/14/85F1C61E4A0D8A6CFA151423CFC539AA_B500_900_96_96.jpeg" alt="">
				</a>
			</li>
			<li class="item">
				<a href="http://m3.img.papaapp.com/farm4/d/2014/0126/14/B301076D7A49E4D6E26B2A2AD2BEA39D_B500_900_500_346.jpeg" class="J_lightbox">
					<img src="http://m2.img.papaapp.com/farm4/d/2014/0126/14/F408D5747423B922C4BE3BAFBBF8A8B6_B500_900_96_96.jpeg">
				</a>
			</li>
		</ul>
	</div>
	<div id="lightbox" class="lightbox">
		<img src="http://m2.img.papaapp.com/farm5/d/2014/0126/14/E6520E9D47F0FE8AB04B93BE922C6707_ORIG_1_1.gif">
		<span class="closebtn"></span>
		<span class="prevbtn"><i></i></span>
		<span class="nextbtn"><i></i></span>
	</div>

CSS

* {
   margin: 0;
   padding: 0;
}
ul {
	list-style: none;
}
.clear-fix {
	zoom: 1;
}
.clear-fix:after {
	clear: both;
	content: '';
	display: block;
	visibility: hidden;
}
img {border:none;}
.container {
	margin: 0 auto;
	width: 990px;
}
.container .list .item {
	float: left;
	margin-left: 10px;
	margin-top: 9px;
	width: 98px;
	height: 99px;
}
.container .list .item a {
	display: block;
	margin-top: 1px;
	width: 96px;
	height: 96px;
	border: 1px solid #ccc;
}
.container .list .item a:hover {
	margin-top: 0;
	border: 1px solid #000;
}

.container .bigPic a {
	display: block;
	margin-top: 1px;
	width: 200px;
	height: 200px;
	border: 1px solid #ccc;
}
.container .bigPic a:hover {
	margin-top: 0;
	border-color: #000;
}
/*Loading*/
.maskLayer {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    overflow: hidden;
}

/*image layer*/
.lightbox {
    display: none;
    position: absolute;
    box-shadow: 0 0 10px #ccc;
    border: 0 solid #fff;
    background-color: #fff;
}
.lightbox .closebtn {
    background: url("http://m2.img.papaapp.com/farm5/d/2014/0126/14/987B49953E9FD7115030BF5435F01E39_B500_900_40_40.png") no-repeat -9999px -9999px;
}

.lightbox .prevbtn i,.lightbox .nextbtn i{
    background: url(http://img03.taobaocdn.com/tps/i3/T1Uj4lFbxcXXbBHXws-110-160.png) no-repeat -9999px -9999px;
    _background: url(http://img04.taobaocdn.com/tps/i4/T11GBkFeBfXXbBHXws-110-160.png) no-repeat -9999px -9999px;
}

.lightbox .closebtn {
    position: absolute;
    right:0;
    top: 0;
    z-index: 9;
    width: 40px;
    height: 40px;
    background-position: 0 0;
    cursor: pointer;
}
.lightbox .prevbtn,.lightbox .nextbtn {
    display: none;
    position: absolute;
    width: 30%;
    height: 100%;
    top: 0;
    cursor: pointer;
    background: url(data:);
}
.lightbox .prevbtn {
    left: 0;
}
.lightbox .nextbtn {
    right: 0;
}
.lightbox .prevbtn i,.lightbox .nextbtn i {
   ...

JavaScript

/**
 * JS灯箱效果
 * @time 2014-1-24
 * @author tugenhua
 */

 function LightBox(options) {
	
	 /**
	  * 参数说明
	  * @container 容器标识，父级盒子ID
	  * @targetCls 元素选择器，需要弹出的图片链接dom节点
	  * @layer 浮层模版选择器
	  * @closebtn 关闭浮层的X按钮
	  * @prev 上一张触发器
	  * @next 下一张触发器
	  * @easing jquery 动画函数 默认为 'linear' 或者 'swing' 或者jquery自带的动画效果
	  */
	this.config = {
		container          :   '#container',
		targetCls          :   '.J_lightbox',
		layer              :   '#lightbox',
		closebtn           :   '.closebtn',
		prev               :   '.prevbtn',
		next               :   '.nextbtn',
		easing             :   'linear'    
	};

	this.cache = {
		isShow        :  false, 
		currentImg    :  null
	};
	// 初始化
	this.init(options);
 }

 LightBox.prototype = {

	constructor: LightBox,
	
	init: function(options) {
		this.config = $.extend(this.config, options || {});
		var self = this,
			_config = self.config;
		
		// 点击
		self._click();
	},
	/*
	 * 获取元素的位置
	 * @method _getPos()
	 * @param node 元素的节点
	 * {private}
	 */
	_getPos: function(node) {
		var pos = {},
			xy = $(node)[0].getBoundingClientRect(),
			sl = $(window).scrollLeft(),
			st = $(window).scrollTop();
		pos.x = xy.left + sl;
		pos.y = xy.top + st;
		return pos;
	},
	/*
	 * 点击页面上图片
	 * @method _click();
	 * {private}
	 */
	_click: function() {
		var self = this,
			_config = self.config,
			_cache = self.cache;

		$(_config.targetCls).each(function(index,item) {
			$(item).unbind('click');
			$(item).bind('click',function(e){
				e.preventDefault();
				_cache.currentImg = $(_config.targetCls).index($(this));

				// 显示loading加载效果
				self._showLoadMask();
				
				// 加载内容
				self._onLoad($(this).attr('href'),this);
			});

			// 鼠标mouseover事件(移到动画层)
			$(_config.layer).mouseover(function(){
				if(_cache.currentImg != 0) {
					$(_config.prev).css('display','block');
				}
				if(_cache.currentImg != ($(_config.targetCls).length - 1)) {
					$(_config.next).css('display','block');
				}
			});
			// 鼠标移出 隐藏上一页按钮...