注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery手风琴效果相册插件Accordion Gallery

媒体 fishcity 1358浏览

jquery手风琴Accordion Gallery

Accordion Gallery是一款基于jqeury的手风琴画廊插件,这款手风琴效果很特别,每个琴项都可以是一个独立的项目,可以是图片画廊,也可以是视频等对象。也就是说手风琴里面的项可以是一个图片幻灯片,您只需点击放大该项,里面的幻灯便可正常的显示,很美妙吧。

jquery实例:Accordion Gallery手风琴使用方法

引入核心文件

<link rel="stylesheet" href="css/accordiongallery.doc.css" type="text/css" />	
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/accordiongallery.core.css" type="text/css" />
<link rel="stylesheet" href="css/accordiongallery.air.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.accordiongallery.min.js"></script>

写入HTML,这里每个琴项是一个<section>,里面可以放置各类html代码。

<article id="gallery">
  <div style="text-align:center;clear:both"></div>
  <section>
    <h1>Portfolio</h1>
    <a href="images/autumn-large.jpg" title="An autumn ThemeForest theme"> <img src="images/autumn-thumb.jpg" width="125" height="90" />
    <p>The Seasons, Autumn</p>
    </a> <a href="images/autumn-home-large.jpg" title="The Homepage"> <img src="images/autumn-home-thumb.jpg" width="125" height="90" />
    <p>The Seasons, Autumn Homepage</p>
    </a> <a href="images/mustash-large.jpg" title="Online art market"> <img src="images/mustash-thumb.jpg" width="125" height="90" />
    <p>Mustash.ro</p>
    </a> <a href="images/winter-large.jpg" title="Upcoming winter ThemeForest theme"> <img src="images/winter-thumb.jpg" width="125" height="90" />
    <p>The Seasons, Winter</p>
    </a> <a href="images/winter-home-large.jpg" title="Theme homepage"> <img src="images/winter-home-thumb.jpg" width="125" height="90" />
    <p>The Seasons, Winter Homepage</p>
    </a> <a href="images/bluebusiness-home-large.jpg" title="The Homepage for BlueBusiness"> <img src="images/bluebusiness-home-thumb.jpg" width="125" height="90" />
    <p>BlueBusiness Homepage</p>
    </a> </section>
  <section>
    <h1>Products</h1>
    <a href="images/bluebusiness-large.jpg" title="Classic business theme on ThemeForest"> <img src="images/bluebusiness-thumb.jpg" width="125" height="90" />
    <p>BlueBusiness</p>
    </a> <a href="images/bluebusiness-home-large.jpg" title="The Homepage for BlueBusiness"> <img src="images/bluebusiness-home-thumb.jpg" width="125" height="90" />
    <p>BlueBusiness Homepage</p>
    </a> </section>
  <section>
    <h1>Upcoming</h1>
    <a href="images/winter-large.jpg" title="Upcoming winter ThemeForest theme"> <img src="images/winter-thumb.jpg" width="125" height="90" />
    <p>The Seasons, Winter</p>
    </a> </section>
  <section>
    <h1>Projects</h1>
    <a href="images/acorn-vp-large.jpg" title="HTML5 video player results from Dev.Opera article"> <img src="images/acorn-vp-thumb.jpg" width="125" height="90" />
    <p>Acorn Video Player</p>
    </a> <a href="images/acorn-vp2-large.jpg" title="Acorn video player with a different child theme"> <img src="images/acorn-vp2-thumb.jpg" width="125" height="90" />
    <p>Acorn Video Player, Smalldark Theme</p>
    </a> </section>
</article>

写入JS初始化

$(document).ready(function() {
	$('#gallery').accordionGallery();
});

转载请注明:jQ酷 » jQuery手风琴效果相册插件Accordion Gallery

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。