
HTML
首先在#gallery放置多个缩略图,并加上#fullPreview显示大图区域
<ul id="gallery">
<li id="fullPreview">
</li>
<li>
<a href="img/full/1.jpg">
</a>
<img data-original="img/thumb/1.jpg" src="img/thumb/1.jpg" width="240"
height="150" alt="Fish">
<div class="overLayer">
</div>
<div class="infoLayer">
<ul>
<li>
<h2>
Fish
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>
Monday, 14th April 2093:
</strong>
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum.
</p>
</li>
<li>
<a href="img/full/2.jpg">
</a>
<img data-original="img/thumb/2.jpg" src="img/thumb/2.jpg" width="240"
height="150" alt="Golden Gate">
<div class="overLayer">
</div>
<div class="infoLayer">
<ul>
<li>
<h2>
New York
</h2>
</li>
<li>
<p>
View Picture
</p>
</li>
</ul>
</div>
<p class="projectInfo">
<strong>
Monday, 14th April 2093:
</strong>
sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum.
</p>
</li>
</ul> jQuery
调用least插件非常简单:
$(function() {
$('#gallery').least();
}); gallery画廊插件相关API
参数 描述 默认值 random 随机排列缩略图 true lazyload 延迟加载图片 true scrollToGallery 点击缩略图时滚动到查看大图顶部(当页面高度小于窗口高度时,滚动似乎有 bug) true*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
