以下是 jQuery手风琴画廊特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery手风琴画廊</title>
<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>
<style>
#gallery {
width: 100%;
height: 500px;
}
</style>
<script>
$(document).ready(function() {
$('#gallery').accordionGallery();
});
</script>
</head>
<body>
<article id="home">
<header>
</header>
<article id="gallery">
<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>
</article>
</body>
</html>
JS代码(jquery.accordiongallery.min.js):
/*Accordion GalleryGhinda - Cristian Colceriuwww.ghinda.netv1.0 - 7:40 PM 11/8/2010*/
jQuery.support.transition=function(){
var a=(document.body||document.documentElement).style;
return a.WebkitTransition!==undefined||a.MozTransition!==undefined||a.OTransition!==undefined||a.transition!==undefined}
();
(function(a){
a.fn.accordionGallery=function(b){
b=a.extend({
theme:"air",maxHeight:360,scrollSpeed:2E3,minSliceWidth:100,maxSliceWidth:500,maxSliceHeight:480}
,b);
b.maxHeight=parseInt(b.maxHeight);
b.scrollSpeed=parseInt(b.scrollSpeed);
b.minSliceWidth=parseInt(b.minSliceWidth);
b.maxSliceWidth=parseInt(b.maxSliceWidth);
b.maxSliceHeight=parseInt(b.maxSliceHeight);
return this.each(function(){
var r=a(this),v=r.find("section");
r.addClass("accordiongallery "+b.theme);
v.each(function(){
var c=a(this);
c.attr({
"aria-live":"assertive","aria-atomic":"true",relevant:"additions"}
);
var e=function(){
var g=c.find("a");
g.wrapAll('<div class="accordiongallery-thumbs" aria-live="polite" />');
var f=a(".accordiongallery-thumbs",c),q=function(){
e.$scroller.stop()}
,m=function(){
e.$scroller.stop().animate({
top:0}
,b.scrollSpeed)}
,d=function(){
e.$scroller.stop().animate({
top:b.maxHeight-e.$scroller.height()}
,b.scrollSpeed)}
;
if(f.height()>b.maxHeight){
f.height(b.maxHeight).wrapInner('<div class="accordiongallery-scroller" />');
var h=a(".accordiongallery-scroller",c);
f.before('<a class="accordiongallery-scrollup">Scroll up</a>').after('<a class="accordiongallery-scrolldown">Scroll down</a>');
var k=a(".accordiongallery-scrollup",c);
k.hover(m,q);
var l=a(".accordiongallery-scrolldown",c);
l.hover(d,q)}
var i;
setTimeout(function(){
i=c.height();
c.css("height",i);
c.attr("data-originalheight",i)}
,100);
setTimeout(function(){
jQuery.support.transition&&c.addClass("agtransitions")}
,200);
return{
$scroller:h,$container:f,$scrollup:k,$scrolldown:l,$items:g}
}
(),u=function(){
var g=v.not(c),f={
}
,q=function(){
var d=new Image;
d.src=f.url;
var h='<img src="'+d.src+'" ';
if(f.title)h+='alt="'+f.title+'" ';
h+='class="accordiongallery-active-image"/>';
var k='<p class="image-caption">';
if(f.title)k+=f.title;
k+="</p>";
var l='<a class="accordiongallery-scrollleft" style="visibility:hidden">Scroll left</a><div class="accordiongallery-preview-thumbs"><div class="accordiongallery-preview-scroller">';
l+=e.$scroller?e.$scroller.html():e.$container.html();
l+='</div></div><a class="accordiongallery-scrollright" style="visibility:hidden">Scroll right</a>';
h+=k+l;
h='<p class="accordiongallery-loader">Loading... </p><div class="accordiongallery-preview" style="visibility:hidden;
opacity:0">'+h+"</div>";
c.append(h);
var i=a(".accordiongallery-preview",c),s=a(".accordiongallery-loader",c);
h=a(".accordiongallery-scrollleft",i);
k=a(".accordiongallery-scrollright",i);
var t=a(".accordiongallery-preview-thumbs",i);
l=a("a",t);
var o=a(".accordiongallery-active-image",i),p=a(".image-caption",i);
p.text()||p.hide();
var n=a(".accordiongallery-preview-scroller",i),w=n.find("a").outerWidth(true)*n.find("a").length;
n.width(w);
var x=function(j){
s.css({
visibility:"hidden",opacity:0}
);
i.css({
visibility:"visible",opacity:1}
);
if(j==true){
o.css("width","100%");
o.attr("alt","Error loading image. Please try refreshing. ")}
}
;
d.onload=function(){
x(false)}
;
d.onerror=function(){
x(true)}
;
d.src=f.url;
e.$container.hide();
if(e.$scrollup){
e.$scrollup.hide();
e.$scrolldown.hide()}
if(w>t.width()){
d=function(){
n.stop()}
;
h.hover(function(){
n.stop().animate({
left:0}
,b.scrollSpeed)}
,d);
k.hover(function(){
n.stop().animate({
left:t.outerWidth()-n.outerWidth()}
,b.scrollSpeed)}
,d);
h.css("visibility","visible");
k.css("visibility","visible")}
l.click(function(){
s.css({
visibility:"visible",opacity:1}
);
var j=new Image;
j.title=a(this).attr("title");
var y=function(z){
if(z==true){
o.css("width","100%");
o.attr("alt","Error loading image. Please try refreshing. ")}
else{
o.attr({
src:j.src,title:j.title,alt:j.title}
);
if(j.title){
p.show();
p.text(j.title)}
else p.hide()}
s.css({
visibility:"hidden",opacity:0}
)}
;
j.onload=function(){
y(false)}
;
j.onerror=function(){
y(true)}
;
j.src=a(this).attr("href");
return false}
)}
,m;
return{
init:function(){
c.find("a:has(img)").click(u.open);
setTimeout(function(){
m=c.width()}
,100)}
,open:function(){
f.url=a(this).attr("href");
f.title=a(this).attr("title");
var d=a(".active-section",r);
if(d){
a(".accordiongallery-preview",d).hide(0,function(){
a(this).remove()}
);
a(".accordiongallery-loader",d).hide(0,function(){
a(this).remove()}
);
a(".accordiongallery-thumbs",d).fadeIn(500);
a(".accordiongallery-scrollup",d).fadeIn(500);
a(".accordiongallery-scrolldown",d).fadeIn(500)}
g.removeClass("active-section").addClass("inactive-section");
c.addClass("active-section").removeClass("inactive-section");
if(jQuery.support.transition){
c.css({
width:b.maxSliceWidth,height:b.maxSliceHeight}
);
g.each(function(){
a(this).css({
width:b.minSliceWidth,height:a(this).attr("data-originalheight")*1}
)}
)}
else{
c.stop().animate({
width:b.maxSliceWidth,height:b.maxSliceHeight}
,300);
g.each(function(){
a(this).stop().animate({
width:b.minSliceWidth,height:a(this).attr("data-originalheight")}
,300)}
)}
$startedLoader=a(".accordiongallery-loader",g);
$startedLoader.css({
visibility:"hidden",opacity:0}
);
c.unbind("click");
g.click(u.close);
q();
return false}
,close:function(){
a(".accordiongallery-preview",c).hide(0,function(){
a(this).remove()}
);
e.$container.fadeIn(700);
if(e.$scrollup){
e.$scrollup.fadeIn(700);
e.$scrolldown.fadeIn(700)}
g.removeClass("inactive-section");
c.removeClass("active-section");
if(jQuery.support.transition){
c.css({
width:m,height:c.attr("data-originalheight")*1}
);
g.each(function(){
a(this).css({
width:m,height:a(this).attr("data-originalheight")*1}
)}
)}
else{
c.stop().animate({
width:m,height:c.attr("data-originalheight")}
,300);
g.each(function(){
a(this).stop().animate({
width:m,height:a(this).attr("data-originalheight")}
,300)}
)}
g.unbind("click")}
}
}
();
u.init()}
)}
)}
}
)(jQuery);
CSS代码(accordiongallery.air.css):
/*Air Themefor Accordion GalleryGhinda - Cristian Colceriuwww.ghinda.netv1.0 - 7:40 PM 11/8/2010*/
/* General */
.accordiongallery.air{overflow:hidden;padding:5px;font-family:Arial,Helvetica,'Bitstream Vera Sans',sans-serif;font-weight:bold;font-size:12px;}
/* Sections */
.accordiongallery.air section h1{margin:0 0 5px 0;padding-bottom:5px;border-bottom:1px solid #afafb9;cursor:default;font-size:13px;line-height:1em;}
.accordiongallery.air section{position:relative;width:150px;padding:10px;border:1px solid #fff;margin-right:5px;background-color:#f1f3f2;background-image:-moz-linear-gradient(top,#f1f3f2,#d0d0da);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f1f3f2),color-stop(1,#d0d0da));-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0px 0px 4px #0c3d4c;-webkit-box-shadow:0px 0px 4px #0c3d4c;box-shadow:0px 0px 4px #0c3d4c;}
.accordiongallery.air section:hover{-moz-box-shadow:0px 0px 8px #000;-webkit-box-shadow:0px 0px 8px #000;box-shadow:0px 0px 8px #000;}
/* Vertical Thumbs */
.accordiongallery.air section .accordiongallery-thumbs a{display:block;overflow:hidden;padding:5px;margin:4px;color:#555;text-align:center;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-transition:all 500ms ease-in-out;-moz-transition:all 500ms ease-in-out;-o-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out;}
.accordiongallery.air section .accordiongallery-thumbs a:hover,.accordiongallery.air section .accordiongallery-thumbs a:focus{background-color:#e7e7e7;-moz-box-shadow:0px 0px 4px #b2b2b2;-webkit-box-shadow:0px 0px 4px #b2b2b2;box-shadow:0px 0px 4px #b2b2b2;}
/* Vertical Scrollers */
.accordiongallery.air .accordiongallery-scrollup,.accordiongallery.air .accordiongallery-scrolldown{display:block;height:10px;cursor:default;text-indent:-9999px;background-repeat:no-repeat;background-position:top center;background-image:url(air-arrow-vertical.png);opacity:0.6;}
.accordiongallery.air .accordiongallery-scrollup:hover,.accordiongallery.air .accordiongallery-scrolldown:hover{opacity:1;}
.accordiongallery.air .accordiongallery-scrolldown{background-position:bottom center;}
.accordiongallery.air .active-section{background-color:#d0d0da;}
.accordiongallery.air .inactive-section a{opacity:0.5;}
/* Image View */
.accordiongallery.air .accordiongallery-preview{position:relative;opacity:0;-webkit-transition:all 500ms ease-in-out;-moz-transition:all 500ms ease-in-out;-o-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out;}
/* Loader */
.accordiongallery.air .accordiongallery-loader{position:absolute;display:block;top:10px;right:10px;width:100px;height:12px;z-index:99;text-indent:-999px;background-image:url(air-loader.gif);background-repeat:no-repeat;}
.accordiongallery.air .accordiongallery-preview>img{margin-bottom:10px;}
/* Horizontal Scroller */
.accordiongallery.air .accordiongallery-scrollleft,.accordiongallery.air .accordiongallery-scrollright{width:10px;height:65px;opacity:0.6;background-repeat:no-repeat;background-position:left center;background-image:url(air-arrow-horizontal.png);text-indent:-9999px;}
.accordiongallery.air .accordiongallery-scrollright{float:right;background-position:right center;}
.accordiongallery.air .accordiongallery-scrollleft:hover,.accordiongallery.air .accordiongallery-scrollright:hover{opacity:1;}
/* Horizontal Thumbs */
.accordiongallery.air .accordiongallery-preview-thumbs{width:455px;padding:10px;overflow:hidden;position:relative;border:1px solid #b2b2b2;background-color:#bfbfc9;-moz-box-shadow:0px 2px 2px #fff;-webkit-box-shadow:0px 0px 4px #b2b2b2;box-shadow:0px 0px 4px #b2b2b2;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.accordiongallery.air .accordiongallery-preview-thumbs a{margin-right:10px;opacity:0.7;}
.accordiongallery.air .accordiongallery-preview-thumbs a img{border:0px;}
.accordiongallery.air .accordiongallery-preview-thumbs a:hover,.accordiongallery.air .accordiongallery-preview-thumbs a:focus{opacity:1;}
.accordiongallery.air .accordiongallery-preview-scroller a img{width:80px;height:auto;}
.accordiongallery.air .accordiongallery-preview-scroller a p{display:none;}
.accordiongallery.air .accordiongallery-preview .image-caption{position:absolute;top:270px;left:50px;width:380px;padding:5px;border:1px solid #fff;background-color:#fff;background-color:rgba(255,255,255,0.5);color:#000;text-align:center;text-shadow:0px 1px 1px #fff;cursor:default;-moz-box-shadow:0px 0px 10px #333;-webkit-box-shadow:0px 0px 10px #333;box-shadow:0px 0px 10px #333;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
CSS代码(accordiongallery.core.css):
/*HTML5 Accordion GalleryGhinda - Cristian Colceriuwww.ghinda.netv1.0 - 7:40 PM 11/8/2010*/
/* accordion elements */
.accordiongallery{overflow:hidden;display:block;}
.accordiongallery section{float:left;display:block;overflow:hidden;}
.accordiongallery .agtransitions{-webkit-transition:all 500ms ease-in-out;-moz-transition:all 500ms ease-in-out;-o-transition:all 500ms ease-in-out;transition:all 500ms ease-in-out;}
.accordiongallery section .accordiongallery-thumbs a{display:block;}
.accordiongallery section a img{border:0px;margin:0px;}
.accordiongallery section a p{border:0px;margin:0px;}
.accordiongallery section .accordiongallery-thumbs{overflow:hidden;position:relative;}
.accordiongallery section .accordiongallery-scroller{position:relative;top:0px;}
.accordiongallery .accordiongallery-scrollup,.accordiongallery .accordiongallery-scrolldown{display:block;cursor:default;}
.accordiongallery .active-section{}
.accordiongallery .inactive-section a{}
/* preview page */
.accordiongallery-preview>img{clear:both;}
.accordiongallery-scrollleft,.accordiongallery .accordiongallery-scrollright{display:block;float:left;cursor:default;}
.accordiongallery .accordiongallery-scrollright{float:right;}
.accordiongallery-preview-thumbs{float:left;overflow:hidden;position:relative;}
.accordiongallery-preview-thumbs a img{float:left;}
.accordiongallery-preview-thumbs a{display:block;float:left;}
.accordiongallery-preview-scroller{position:relative;overflow:hidden;left:0px;}
CSS代码(accordiongallery.doc.css):
/*Accordion Gallery DocumentationGhinda - Cristian Colceriuwww.ghinda.netv1.0 - 7:40 PM 11/8/2010*/
html{background-color:#5F2F00;font-family:Arial,Helvetica,sans-serif;color:#000;}
body{width:920px;padding:0px 20px;margin:20px auto;border:1px solid #CFA174;background-color:#efefef;-moz-box-shadow:0px 0px 10px #222;-webkit-box-shadow:0px 0px 10px #222;box-shadow:0px 0px 10px #222;}
a{position:relative;color:#19177F;}
a:hover,a:focus{color:#0300FF;text-decoration:none;}
a:active{top:1px;}
/* header */
header{padding:0px 20px 20px 20px;margin:0px -20px 20px -20px;overflow:hidden;border-bottom:1px solid #596600;background-color:#8e9c06;background-image:-moz-linear-gradient(top,#c7ca21,#8e9c06);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#c7ca21),color-stop(1,#8e9c06));}
header .item-details{padding:5px 20px;margin:0px -20px 30px -20px;border-bottom:1px solid #663607;background-color:#89490b;background-image:-moz-linear-gradient(top,#a35d18,#89490b);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#a35d18),color-stop(1,#89490b));color:#fff;}
header .item-details time{float:right;}
header .item-type{font-weight:bold;}
header .vcard{float:right;line-height:16px;opacity:0.5;}
header .vcard:hover{opacity:1;}
header .vcard span,header .vcard a{display:block;text-align:right;}
header .vcard span{font-size:14px;font-weight:bold;}
header h1{margin-bottom:5px;font-size:38px;letter-spacing:-2px;text-shadow:0px 1px 1px #c7ca21;}
header .sub-title{margin:0px;}
/* content */
section{overflow:hidden;}
section nav{float:right;padding:30px 0px 30px 20px;margin-left:40px;margin-right:30px;border-left:1px solid #CFCFCF;font-size:14px;font-weight:bold;}
section nav li{line-height:2.5em;}
section h2{margin-top:20px;color:#333;font-size:24px;letter-spacing:-1px;text-shadow:0px 1px 1px #aaa;}
.step{padding:10px;background-color:#ddd;border-bottom:1px solid #aaa;border-top:1px solid #aaa;font-size:14px;font-weight:bold;}
pre{padding:10px;overflow:auto;background-color:#333;color:#fff;}
/* options table */
#options table{}
#options table th{border:1px solid #bbb;background:#106F00;color:#FFFFFF;font-weight:normal;padding:5px 10px;text-align:left;}
#options table td{padding:5px 10px;border:1px solid #bbb;}
#options table tr.even{background:#ddd;}
#options table .small-column{width:90px;}
/* footer */
footer{overflow:hidden;padding:20px 20px 20px 20px;margin:0px -20px 0px -20px;overflow:hidden;border-top:1px solid #92571d;background-color:#a56628;background-image:-moz-linear-gradient(top,#b57b42,#a56628);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#b57b42),color-stop(1,#a56628));}
footer .copy{float:right;line-height:1em;text-align:right;}
分享到QQ
分享到微博
微信扫一扫
