jQuery点击图片弹出层显示详情

简单实用的图片弹出层，点击对应的图片按钮弹出一个悬浮层，包括对应图片集（这里是图集，可以点击图片左右箭头进行预览切换）、文字介绍、购物车按钮以及更多详细等，可以自行增加多个图片或按钮等。

分类：悬浮层/弹出层 > 弹窗难易：初级

查看演示下载资源下载积分： 30 积分

页面的头部需要引入CSS样式、jquery库及javascript插件：

<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/velocity.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>

body分为两个大的部分：第一个是初始的图片（含预览按钮），第二个是弹窗内容（包括图片集和详情内容），以下是示例代码：

<ul class="cd-items cd-container">
	<li class="cd-item">
		<img src="images/g.png" alt="Item Preview">
		<a href="#" class="cd-trigger">点击预览</a>
	</li>
</ul>
<div class="cd-quick-view">
	<div class="cd-slider-wrapper">
		<ul class="cd-slider">
			<li class="selected"><img src="images/g.png" alt="Product 1"></li>
			<li><img src="images/g2.png" alt="Product 2"></li>
			<li><img src="images/g3.png" alt="Product 3"></li>
		</ul>

		<ul class="cd-slider-navigation">
			<li><a class="cd-next" href="#">上一页</a></li>
			<li><a class="cd-prev" href="#">下一页</a></li>
		</ul>
	</div>
	<div class="cd-item-info">
		<h2>新鲜小黄瓜 迷你黄瓜 荷兰黄瓜</h2>
		<p>叶柄稍粗糙，有糙硬毛，长10-16(-20)厘米；叶片宽卵状心形，膜质，长、宽均7-20厘米，两面甚粗糙，被糙硬毛，3-5个角或浅裂，裂片三角形，有齿，有时边缘有缘毛，先端急尖或渐尖，基部弯缺半圆形，宽2-3厘米，深2-2.5厘米，有时基部向后靠合。</p>

		<ul class="cd-item-action">
			<li><button class="add-to-cart">加入购物车</button></li>					
			<li><a href="#">了解更多</a></li>	
		</ul>
	</div>
	<a href="#" class="cd-close">关闭</a>
</div>