以下是 22款不同效果产品图片展示切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>22款不同效果产品图片展示切换</title>
<meta charset="UTF-8">
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.quick-view.js"></script>
<link href="css/default.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 8]>
<link href="css/default-ie.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<link href="css/layout.css" rel="stylesheet" media="screen" type="text/css"/>
<link href="css/quick-view.css" rel="stylesheet" media="screen" type="text/css"/>
</head>
<body>
<div id="main">
<!-- begin: projects -->
<h2><span class="inner">Projects</span></h2>
<div class="row cfix">
<div class="centerH_outer">
<div class="centerH_inner cfix">
<div class="quickView project" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/project1/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/project1/01.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-01.jpg"/></a></li>
<li data-image="images/project1/02.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-02.jpg"/></a></li>
<li data-image="images/project1/03.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-03.jpg"/></a></li>
<li data-image="images/project1/04.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-04.jpg"/></a></li>
<li data-image="images/project1/05.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Project name</a></div>
<div class="count">7 images</div>
</div>
</div>
</div>
<div class="quickView project" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/project2/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/project2/01.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-01.jpg"/></a></li>
<li data-image="images/project2/02.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-02.jpg"/></a></li>
<li data-image="images/project2/03.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-03.jpg"/></a></li>
<li data-image="images/project2/04.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-04.jpg"/></a></li>
<li data-image="images/project2/05.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Project name</a></div>
<div class="count">7 images</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row cfix">
<div class="centerH_outer">
<div class="centerH_inner cfix">
<div class="quickView project bottomPosition" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/project1/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/project1/01.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-01.jpg"/></a></li>
<li data-image="images/project1/02.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-02.jpg"/></a></li>
<li data-image="images/project1/03.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-03.jpg"/></a></li>
<li data-image="images/project1/04.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-04.jpg"/></a></li>
<li data-image="images/project1/05.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Project name</a></div>
<div class="count">7 images</div>
</div>
</div>
</div>
<div class="quickView project bottomPosition" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/project2/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/project2/01.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-01.jpg"/></a></li>
<li data-image="images/project2/02.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-02.jpg"/></a></li>
<li data-image="images/project2/03.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-03.jpg"/></a></li>
<li data-image="images/project2/04.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-04.jpg"/></a></li>
<li data-image="images/project2/05.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Project name</a></div>
<div class="count">7 images</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2><span class="inner">Projects (hidden thumbs)</span></h2>
<div class="row cfix">
<div class="centerH_outer">
<div class="centerH_inner cfix">
<div class="quickView project hiddenThumbs bottomPosition" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/project1/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/project1/01.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-01.jpg"/></a></li>
<li data-image="images/project1/02.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-02.jpg"/></a></li>
<li data-image="images/project1/03.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-03.jpg"/></a></li>
<li data-image="images/project1/04.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-04.jpg"/></a></li>
<li data-image="images/project1/05.jpg"><a href="#" class="thumb"><img src="images/project1/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Project name</a></div>
<div class="count">7 images</div>
</div>
</div>
</div>
<div class="quickView project hiddenThumbs" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/project2/01.jpg"/></a>
<ul class="quickNav" data-quick-view="quickNav">
<li data-image="images/project2/01.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-01.jpg"/></a></li>
<li data-image="images/project2/02.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-02.jpg"/></a></li>
<li data-image="images/project2/03.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-03.jpg"/></a></li>
<li data-image="images/project2/04.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-04.jpg"/></a></li>
<li data-image="images/project2/05.jpg"><a href="#" class="thumb"><img src="images/project2/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Project name</a></div>
<div class="count">7 images</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end: projects -->
<!-- begin: products -->
<h2><span class="inner">Products</span></h2>
<div class="row cfix">
<div class="centerH_outer">
<div class="centerH_inner cfix">
<div class="quickView product" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/product1/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/product1/01.jpg"><a href="#" class="thumb"><img src="images/product1/thumb-01.jpg"/></a></li>
<li data-image="images/product1/02.jpg"><a href="#" class="thumb"><img src="images/product1/thumb-02.jpg"/></a></li>
<li data-image="images/product1/03.jpg"><a href="#" class="thumb"><img src="images/product1/thumb-03.jpg"/></a></li>
<li data-image="images/product1/04.jpg"><a href="#" class="thumb"><img src="images/product1/thumb-04.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="brand">Brandname</div>
<div class="name"><a href="#">Product name</a></div>
<div class="rating"><div class="value" style="width: 45px;"></div></div>
<div class="price">45$</div>
</div>
</div>
</div>
<div class="quickView product" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/product2/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/product2/01.jpg"><a href="#" class="thumb"><img src="images/product2/thumb-01.jpg"/></a></li>
<li data-image="images/product2/02.jpg"><a href="#" class="thumb"><img src="images/product2/thumb-02.jpg"/></a></li>
<li data-image="images/product2/03.jpg"><a href="#" class="thumb"><img src="images/product2/thumb-03.jpg"/></a></li>
<li data-image="images/product2/04.jpg"><a href="#" class="thumb"><img src="images/product2/thumb-04.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="brand">Brandname</div>
<div class="name"><a href="#">Product name</a></div>
<div class="rating"><div class="value" style="width: 45px;"></div></div>
<div class="price">45$</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2><span class="inner">Products (hidden thumbs)</span></h2>
<div class="row cfix">
<div class="centerH_outer">
<div class="centerH_inner cfix">
<div class="quickView product hiddenThumbs" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/product1/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/product1/01.jpg"><a href="#" class="thumb"><img src="images/product1/thumb-01.jpg"/></a></li>
<li data-image="images/product1/02.jpg"><a href="#" class="thumb"><img src="images/product1/thumb-02.jpg"/></a></li>
<li data-image="images/product1/03.jpg"><a href="#" class="thumb"><img src="images/product1/thumb-03.jpg"/></a></li>
<li data-image="images/product1/04.jpg"><a href="#" class="thumb"><img src="images/product1/thumb-04.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="brand">Brandname</div>
<div class="name"><a href="#">Product name</a></div>
<div class="rating"><div class="value" style="width: 45px;"></div></div>
<div class="price">45$</div>
</div>
</div>
</div>
<div class="quickView product hiddenThumbs" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/product2/01.jpg"/></a>
<ul class="quickNav" data-quick-view="quickNav">
<li data-image="images/product2/01.jpg"><a href="#" class="thumb"><img src="images/product2/thumb-01.jpg"/></a></li>
<li data-image="images/product2/02.jpg"><a href="#" class="thumb"><img src="images/product2/thumb-02.jpg"/></a></li>
<li data-image="images/product2/03.jpg"><a href="#" class="thumb"><img src="images/product2/thumb-03.jpg"/></a></li>
<li data-image="images/product2/04.jpg"><a href="#" class="thumb"><img src="images/product2/thumb-04.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="brand">Brandname</div>
<div class="name"><a href="#">Product name</a></div>
<div class="rating"><div class="value" style="width: 45px;"></div></div>
<div class="price">45$</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end: products -->
<!-- begin: places -->
<h2><span class="inner">Places</span></h2>
<div class="row cfix">
<div class="centerH_outer">
<div class="centerH_inner cfix">
<div class="quickView place" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/place1/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/place1/01.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-01.jpg"/></a></li>
<li data-image="images/place1/02.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-02.jpg"/></a></li>
<li data-image="images/place1/03.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-03.jpg"/></a></li>
<li data-image="images/place1/04.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-04.jpg"/></a></li>
<li data-image="images/place1/05.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Exclusive Private Room</a></div>
<div class="place">Amsterdam, Netherlands</div>
<div class="price"><span class="value"><span class="currency">$ </span>45</span> <span class="period">per night</span></div>
</div>
</div>
</div>
<div class="quickView place" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/place2/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/place2/01.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-01.jpg"/></a></li>
<li data-image="images/place2/02.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-02.jpg"/></a></li>
<li data-image="images/place2/03.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-03.jpg"/></a></li>
<li data-image="images/place2/04.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-04.jpg"/></a></li>
<li data-image="images/place2/05.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Exclusive Private Room</a></div>
<div class="place">Amsterdam, Netherlands</div>
<div class="price"><span class="value"><span class="currency">$ </span>45</span> <span class="period">per night</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2><span class="inner">Places (hidden thumbs)</span></h2>
<div class="row cfix">
<div class="centerH_outer">
<div class="centerH_inner cfix">
<div class="quickView place hiddenThumbs" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/place1/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/place1/01.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-01.jpg"/></a></li>
<li data-image="images/place1/02.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-02.jpg"/></a></li>
<li data-image="images/place1/03.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-03.jpg"/></a></li>
<li data-image="images/place1/04.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-04.jpg"/></a></li>
<li data-image="images/place1/05.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Exclusive Private Room</a></div>
<div class="place">Amsterdam, Netherlands</div>
<div class="price"><span class="value"><span class="currency">$ </span>45</span> <span class="period">per night</span></div>
</div>
</div>
</div>
<div class="quickView place hiddenThumbs" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/place2/01.jpg"/></a>
<ul class="quickNav" data-quick-view="quickNav">
<li data-image="images/place2/01.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-01.jpg"/></a></li>
<li data-image="images/place2/02.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-02.jpg"/></a></li>
<li data-image="images/place2/03.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-03.jpg"/></a></li>
<li data-image="images/place2/04.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-04.jpg"/></a></li>
<li data-image="images/place2/05.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Exclusive Private Room</a></div>
<div class="place">Amsterdam, Netherlands</div>
<div class="price"><span class="value"><span class="currency">$ </span>45</span> <span class="period">per night</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end: places -->
<!-- begin: members -->
<h2><span class="inner">Members</span></h2>
<div class="row cfix">
<div class="centerH_outer">
<div class="centerH_inner cfix">
<div class="quickView member" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/member1/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/member1/01.jpg"><a href="#" class="thumb"><img src="images/member1/thumb-01.jpg"/></a></li>
<li data-image="images/member1/02.jpg"><a href="#" class="thumb"><img src="images/member1/thumb-02.jpg"/></a></li>
<li data-image="images/member1/03.jpg"><a href="#" class="thumb"><img src="images/member1/thumb-03.jpg"/></a></li>
<li data-image="images/member1/04.jpg"><a href="#" class="thumb"><img src="images/member1/thumb-04.jpg"/></a></li>
<li data-image="images/member1/05.jpg"><a href="#" class="thumb"><img src="images/member1/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Username <span class="age female">age 21</span></a></div>
<div class="place">Madrid, Spain</div>
</div>
<ul class="stats">
<li><a href="#"><span class="count">29</span> Photos</a></li>
<li><a href="#"><span class="count">3</span> Videos</a></li>
<li><a href="#"><span class="count">2</span> Reviews</a></li>
</ul>
</div>
</div>
<div class="quickView member" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/member2/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/member2/01.jpg"><a href="#" class="thumb"><img src="images/member2/thumb-01.jpg"/></a></li>
<li data-image="images/member2/02.jpg"><a href="#" class="thumb"><img src="images/member2/thumb-02.jpg"/></a></li>
<li data-image="images/member2/03.jpg"><a href="#" class="thumb"><img src="images/member2/thumb-03.jpg"/></a></li>
<li data-image="images/member2/04.jpg"><a href="#" class="thumb"><img src="images/member2/thumb-04.jpg"/></a></li>
<li data-image="images/member2/05.jpg"><a href="#" class="thumb"><img src="images/member2/thumb-05.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Username <span class="age male">age 40</span></a></div>
<div class="place">Madrid, Spain</div>
</div>
<ul class="stats">
<li><a href="#"><span class="count">29</span> Photos</a></li>
<li><a href="#"><span class="count">3</span> Videos</a></li>
<li><a href="#"><span class="count">2</span> Reviews</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- end: members -->
<!-- begin: video -->
<h2><span class="inner">Video</span></h2>
<div class="row cfix">
<div class="centerH_outer">
<div class="centerH_inner cfix">
<div class="quickView video bottomPosition" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/video1/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/video1/01.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-01.jpg"/></a></li>
<li data-image="images/video1/02.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-02.jpg"/></a></li>
<li data-image="images/video1/03.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-03.jpg"/></a></li>
<li data-image="images/video1/04.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-04.jpg"/></a></li>
<li data-image="images/video1/05.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-05.jpg"/></a></li>
<li data-image="images/video1/06.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-06.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Video Clip</a></div>
<div class="length">2:37</div>
</div>
</div>
</div>
<div class="quickView video bottomPosition" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/video2/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/video2/01.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-01.jpg"/></a></li>
<li data-image="images/video2/02.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-02.jpg"/></a></li>
<li data-image="images/video2/03.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-03.jpg"/></a></li>
<li data-image="images/video2/04.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-04.jpg"/></a></li>
<li data-image="images/video2/05.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-05.jpg"/></a></li>
<li data-image="images/video2/06.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-06.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Video Clip</a></div>
<div class="length">2:37</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2><span class="inner">Video (hidden thumbs)</span></h2>
<div class="row cfix">
<div class="centerH_outer">
<div class="centerH_inner cfix">
<div class="quickView video hiddenThumbs bottomPosition" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/video1/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/video1/01.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-01.jpg"/></a></li>
<li data-image="images/video1/02.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-02.jpg"/></a></li>
<li data-image="images/video1/03.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-03.jpg"/></a></li>
<li data-image="images/video1/04.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-04.jpg"/></a></li>
<li data-image="images/video1/05.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-05.jpg"/></a></li>
<li data-image="images/video1/06.jpg"><a href="#" class="thumb"><img src="images/video1/thumb-06.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Video Clip</a></div>
<div class="length">2:37</div>
</div>
</div>
</div>
<div class="quickView video hiddenThumbs bottomPosition" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/video2/01.jpg"/></a>
<ul class="quickNav" data-quick-view="quickNav">
<li data-image="images/video2/01.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-01.jpg"/></a></li>
<li data-image="images/video2/02.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-02.jpg"/></a></li>
<li data-image="images/video2/03.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-03.jpg"/></a></li>
<li data-image="images/video2/04.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-04.jpg"/></a></li>
<li data-image="images/video2/05.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-05.jpg"/></a></li>
<li data-image="images/video2/06.jpg"><a href="#" class="thumb"><img src="images/video2/thumb-06.jpg"/></a></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Video Clip</a></div>
<div class="length">2:37</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end: video -->
<!-- begin: places bottom position -->
<h2><span class="inner">Bottom position, Empty thumb</span></h2>
<div class="row cfix">
<div class="centerH_outer">
<div class="centerH_inner cfix">
<div class="quickView place bottomPosition" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/place1/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/place1/01.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-01.jpg"/></a></li>
<li data-image="images/place1/02.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-02.jpg"/></a></li>
<li data-image="images/place1/03.jpg"><a href="#" class="thumb"><img src="images/place1/thumb-03.jpg"/></a></li>
<li class="empty"><span class="thumb"></span></li>
<li class="empty"><span class="thumb"></span></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Exclusive Private Room</a></div>
<div class="place">Amsterdam, Netherlands</div>
<div class="price"><span class="value"><span class="currency">$ </span>45</span> <span class="period">per night</span></div>
</div>
</div>
</div>
<div class="quickView place bottomPosition hiddenThumbs" data-plugin="quickView">
<div class="padding">
<div class="gallery">
<a class="preview" href="#"><img data-quick-view="previewImage" src="images/place2/01.jpg"/></a>
<ul class="thumbs">
<li data-image="images/place2/01.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-01.jpg"/></a></li>
<li data-image="images/place2/02.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-02.jpg"/></a></li>
<li data-image="images/place2/03.jpg"><a href="#" class="thumb"><img src="images/place2/thumb-03.jpg"/></a></li>
<li class="empty"><span class="thumb"></span></li>
<li class="empty"><span class="thumb"></span></li>
</ul>
</div>
<div class="info">
<div class="name"><a href="#">Exclusive Private Room</a></div>
<div class="place">Amsterdam, Netherlands</div>
<div class="price"><span class="value"><span class="currency">$ </span>45</span> <span class="period">per night</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- begin: places bottom position -->
</div>
<script type="text/javascript">
$(document).ready(function () {
jQuery('*[data-plugin*=quickView]').quickView();
});
</script>
</body>
</html>
JS代码(jquery.quick-view.js):
/** * jQuery - QuickView plugin file. */
(function($){
//OddsMenu class function QuickView($holder,settings){
this.holder = $holder;
this.previewImage = this.holder.find('*[data-quick-view="previewImage"]');
this.originalImageSrc = this.previewImage.attr('src');
this.thumbs = this.holder.find('*[data-image]');
this.quickNav = this.holder.find('*[data-quick-view="quickNav"]');
this.settings = $.extend({
}
,$.fn.quickView.defaults,settings ||{
}
);
this.actualIndex = 0;
this.timer = null;
}
//QuickView class methods $.extend(QuickView.prototype,{
/** * init QuickView */
init:function(){
//thumbs this.thumbs.each($.proxy(function(index,element){
var $element = $(element);
$element.mouseenter($.proxy(function(){
this.show(index);
}
,this));
$element.mouseleave($.proxy(function(){
this.clear();
}
,this));
//preload image if($element.find('img').length == 0 && !$element.data('preload-image')){
var image = new Image();
image.src = $element.data('image');
}
}
,this));
//activate first thumb if(this.thumbs.find('.active').length == 0){
$(this.thumbs[0]).addClass('active');
}
this.holder.css('float','left');
var width = this.holder.outerWidth();
this.holder.attr('style','');
this.holder.width(width);
//quick nav if(this.quickNav.length > 0){
this.quickNav.css('left',(this.quickNav.parent().outerWidth() - this.quickNav.outerWidth()) / 2);
}
//autoplay if(this.settings.autoPlay.active){
this.previewImage.mouseenter($.proxy(this.play,this));
this.previewImage.mouseleave($.proxy(this.stop,this));
}
}
,//show image show:function(index){
this.actualIndex = index;
var element = $(this.thumbs[index]);
this.thumbs.removeClass('active');
element.addClass('active');
if(element.find('img').length > 0){
this.previewImage.attr('src',element.find('img').attr('src'));
}
else if(element.data('preload-image')){
this.previewImage.attr('src',element.data('preload-image'));
}
this.previewImage.attr('src',element.data('image'));
}
,//clear image clear:function(){
if(this.settings.returnToFirst){
this.actualIndex = 0;
this.thumbs.removeClass('active');
$(this.thumbs[0]).addClass('active');
this.previewImage.attr('src',this.originalImageSrc);
}
}
,//play play:function(){
this.stop();
this.timer = setInterval($.proxy(function(){
this.show((this.actualIndex + 1) % this.thumbs.length);
}
,this),this.settings.autoPlay.delay);
this.holder.addClass('play');
}
,//stop stop:function(){
if(this.timer) clearInterval(this.timer);
this.clear();
this.holder.removeClass('play');
}
}
);
//plugin code $.extend($.fn,{
quickView:function(options){
var ret;
this.each(function(){
var $this = $(this);
var quickView = $this.data('quickView');
if (!quickView){
quickView = new QuickView($this,options);
quickView.init();
$this.data('quickView',quickView);
}
ret = ret ? ret.add($this):$this;
}
);
return ret;
}
}
);
$.fn.quickView.defaults ={
returnToFirst:true,autoPlay:{
active:true,delay:2000}
}
;
}
)(jQuery);
CSS代码(layout.css):
body{background:#f2f2f2;margin:0;padding:0;text-align:center;font-family:'Open Sans',Arial,sans-serif;}
#main{padding-top:120px;padding-bottom:120px;width:1027px;margin:0 auto;}
h1{letter-spacing:-1px;font-size:42px;font-weight:300;margin-bottom:30px;}
h1 .em{font-weight:400;}
h2{font-weight:300;letter-spacing:-1px;font-size:26px;border-bottom:1px solid #c4c4c4;margin:0 200px 60px 200px;}
h2 .inner{padding:0 10px;background:#f2f2f2;position:relative;top:17px}
.intro{color:#4c4c4c;font-size:14px;line-height:1.6em;margin-bottom:80px;padding:0 100px;}
.row{padding:5px 0;margin-bottom:60px;overflow:hidden;}
.row .quickView{float:left;margin-left:30px;}
.row .quickView.place{margin-left:25px;}
.row .quickView:first-child{margin:0;}
分享到QQ
分享到微博
微信扫一扫
