以下是 jQuery可定制画廊插件特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.ad-gallery.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.ad-gallery.js"></script>
<script type="text/javascript">
$(function() {
$('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
$('img.image1').data('ad-title', 'Title through $.data');
$('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
$('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
$('#toggle-description').click(
function() {
if(!galleries[0].settings.description_wrapper) {
galleries[0].settings.description_wrapper = $('#descriptions');
} else {
galleries[0].settings.description_wrapper = false;
}
return false;
}
);
});
</script>
<style type="text/css">
* {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Arial, sans-serif;
color: #333;
line-height: 140%;
}
select, input, textarea {
font-size: 1em;
}
body {
padding: 30px;
font-size: 70%;
width: 800px;
}
h2 {
margin-top: 1.2em;
margin-bottom: 0;
padding: 0;
border-bottom: 1px dotted #dedede;
}
h3 {
margin-top: 1.2em;
margin-bottom: 0;
padding: 0;
}
.example {
border: 1px solid #CCC;
background: #f2f2f2;
padding: 10px;
}
ul {
list-style-image:url(list-style.gif);
}
pre {
font-family: "Lucida Console", "Courier New", Verdana;
border: 1px solid #CCC;
background: #f2f2f2;
padding: 10px;
}
code {
font-family: "Lucida Console", "Courier New", Verdana;
margin: 0;
padding: 0;
}
#gallery {
padding: 30px;
background: #e1eef5;
}
#descriptions {
position: relative;
height: 50px;
background: #EEE;
margin-top: 10px;
width: 640px;
padding: 10px;
overflow: hidden;
}
#descriptions .ad-image-description {
position: absolute;
}
#descriptions .ad-image-description .ad-description-title {
display: block;
}
</style>
<title>A demo of AD Gallery - Coffeescripter.com</title>
</head>
<body>
<div id="container">
<h1>AD Gallery, gallery plugin for jQuery</h1>
<p>A highly customizable gallery plugin for jQuery.</p>
<p>Read more here: <a href="http://coffeescripter.com/2009/07/ad-gallery-a-jquery-gallery-plugin/" target="_blank">http://coffeescripter.com/2009/07/ad-gallery-a-jquery-gallery-plugin/</a> | <a href="http://coffeescripter.com/code/">More code at Coffeescripter.com</a></p>
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper">
</div>
<div class="ad-controls">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li>
<a href="images/1.jpg">
<img src="images/thumbs/t1.jpg" class="image0">
</a>
</li>
<li>
<a href="images/10.jpg">
<img src="images/thumbs/t10.jpg" title="A title for 10.jpg" alt="This is a nice, and incredibly descriptive, description of the image 10.jpg" class="image1">
</a>
</li>
<li>
<a href="images/11.jpg">
<img src="images/thumbs/t11.jpg" title="A title for 11.jpg" longdesc="http://coffeescripter.com" alt="This is a nice, and incredibly descriptive, description of the image 11.jpg" class="image2">
</a>
</li>
<li>
<a href="images/12.jpg">
<img src="images/thumbs/t12.jpg" title="A title for 12.jpg" alt="This is a nice, and incredibly descriptive, description of the image 12.jpg" class="image3">
</a>
</li>
<li>
<a href="images/13.jpg">
<img src="images/thumbs/t13.jpg" title="A title for 13.jpg" alt="This is a nice, and incredibly descriptive, description of the image 13.jpg" class="image4">
</a>
</li>
<li>
<a href="images/14.jpg">
<img src="images/thumbs/t14.jpg" title="A title for 14.jpg" alt="This is a nice, and incredibly descriptive, description of the image 14.jpg" class="image5">
</a>
</li>
<li>
<a href="images/2.jpg">
<img src="images/thumbs/t2.jpg" title="A title for 2.jpg" alt="This is a nice, and incredibly descriptive, description of the image 2.jpg" class="image6">
</a>
</li>
<li>
<a href="images/3.jpg">
<img src="images/thumbs/t3.jpg" title="A title for 3.jpg" alt="This is a nice, and incredibly descriptive, description of the image 3.jpg" class="image7">
</a>
</li>
<li>
<a href="images/4.jpg">
<img src="images/thumbs/t4.jpg" title="A title for 4.jpg" alt="This is a nice, and incredibly descriptive, description of the image 4.jpg" class="image8">
</a>
</li>
<li>
<a href="images/5.jpg">
<img src="images/thumbs/t5.jpg" title="A title for 5.jpg" alt="This is a nice, and incredibly descriptive, description of the image 5.jpg" class="image9">
</a>
</li>
<li>
<a href="images/6.jpg">
<img src="images/thumbs/t6.jpg" title="A title for 6.jpg" alt="This is a nice, and incredibly descriptive, description of the image 6.jpg" class="image10">
</a>
</li>
<li>
<a href="images/7.jpg">
<img src="images/thumbs/t7.jpg" title="A title for 7.jpg" alt="This is a nice, and incredibly descriptive, description of the image 7.jpg" class="image11">
</a>
</li>
<li>
<a href="images/8.jpg">
<img src="images/thumbs/t8.jpg" title="A title for 8.jpg" alt="This is a nice, and incredibly descriptive, description of the image 8.jpg" class="image12">
</a>
</li>
<li>
<a href="images/9.jpg">
<img src="images/thumbs/t9.jpg" title="A title for 9.jpg" alt="This is a nice, and incredibly descriptive, description of the image 9.jpg" class="image13">
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="descriptions">
</div>
<p>Examples of how you can alter the behaviour on the fly;
Effect: <select id="switch-effect">
<option value="slide-hori">Slide horizontal</option>
<option value="slide-vert">Slide vertical</option>
<option value="resize">Shrink/grow</option>
<option value="fade">Fade</option>
<option value="">None</option>
</select><br>
<a href="#" id="toggle-slideshow">Toggle slideshow</a> |
<a href="#" id="toggle-description">Toggle having description outside of image</a>
</p>
</div>
</body>
</html>
JS代码(jquery.ad-gallery.pack.js):
/** * Copyright (c) 2010 Anders Ekdahl (http://coffeescripter.com/) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * * Version:1.2.4 * * Demo and documentation:http://coffeescripter.com/code/ad-gallery/ */
eval(function(p,a,c,k,e,r){
e=function(c){
return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
if(!''.replace(/^/,String)){
while(c--)r[e(c)]=k[c]||e(c);
k=[function(e){
return r[e]}
];
e=function(){
return'\\w+'}
;
c=1}
;
while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
return p}
('(8($){
$.3n.3o=8(b){
5 c={
2s:\'Z.3p\',1W:0,1X:q,11:0.7,2t:q,1b:3q,v:q,x:q,2u:B,2v:B,1Y:0,t:{
1c:B,1Z:q,1d:3r,2w:\'3s\',2x:\'3t\',20:B,2y:\'(\',2z:\')\',2A:q,2B:q}
,2C:\'21-2D\',2E:B,1z:B,1A:{
1e:q,2F:q,2G:q}
}
;
5 d=$.2H(q,c,b);
4(b&&b.t){
d.t=$.2H(q,c.t,b.t)}
;
4(!d.t.1c){
d.t.1Z=q}
;
5 e=[];
$(3).2I(8(){
5 a=1B 22(3,d);
e[e.J]=a}
);
w e}
;
8 2J(a,b,c){
5 d=12(a.u(\'Q\'),10);
4(b==\'C\'){
5 e=\'-\'+3.D+\'z\';
a.u(\'Q\',3.D+\'z\')}
y{
5 e=3.D+\'z\';
a.u(\'Q\',\'-\'+3.D+\'z\')}
;
4(c){
c.u(\'1f\',\'-\'+c[0].1C+\'z\');
c.13({
1f:0}
,3.r.1b*2)}
;
4(3.R){
3.R.13({
1f:\'-\'+3.R[0].1C+\'z\'}
,3.r.1b*2)}
;
w{
1g:{
Q:e}
,1h:{
Q:d}
}
}
;
8 2K(a,b,c){
5 d=12(a.u(\'C\'),10);
4(b==\'C\'){
5 e=\'-\'+3.K+\'z\';
a.u(\'C\',3.K+\'z\')}
y{
5 e=3.K+\'z\';
a.u(\'C\',\'-\'+3.K+\'z\')}
;
4(c){
c.u(\'1f\',\'-\'+c[0].1C+\'z\');
c.13({
1f:0}
,3.r.1b*2)}
;
4(3.R){
3.R.13({
1f:\'-\'+3.R[0].1C+\'z\'}
,3.r.1b*2)}
;
w{
1g:{
C:e}
,1h:{
C:d}
}
}
;
8 2L(a,b,c){
5 d=a.v();
5 e=a.x();
5 f=12(a.u(\'C\'),10);
5 g=12(a.u(\'Q\'),10);
a.u({
v:0,x:0,Q:3.D/2,C:3.K/2}
);
w{
1g:{
v:0,x:0,Q:3.D/2,C:3.K/2}
,1h:{
v:d,x:e,Q:g,C:f}
}
}
;
8 2M(a,b,c){
a.u(\'S\',0);
w{
1g:{
S:0}
,1h:{
S:1}
}
}
;
8 2N(a,b,c){
a.u(\'S\',0);
w{
1g:{
S:0}
,1h:{
S:1}
,1d:0}
}
;
8 22(a,b){
3.1e(a,b)}
;
22.2O={
17:q,T:q,1D:q,V:q,Z:q,1r:q,N:q,1E:q,1F:q,1i:q,1j:q,t:q,K:0,D:0,O:0,18:q,R:q,1G:0,r:q,G:q,1k:q,1H:q,1e:8(b,c){
5 d=3;
3.17=$(b);
3.r=c;
3.2P();
3.2Q();
4(3.r.v){
3.K=3.r.v;
3.T.v(3.r.v);
3.17.v(3.r.v)}
y{
3.K=3.T.v()}
;
4(3.r.x){
3.D=3.r.x;
3.T.x(3.r.x)}
y{
3.D=3.T.x()}
;
3.1G=3.V.v();
3.O=0;
3.18=q;
3.R=q;
3.1k=q;
3.2R();
4(3.r.2u){
3.2S()}
;
5 e=8(a){
w d.1I(a)}
;
3.t=1B 23(e,3.r.t);
3.L.F(3.t.2T());
4(3.r.t.1c){
3.t.1c()}
y{
3.t.24()}
;
4(3.r.2v){
3.2U()}
;
4(3.r.2E){
3.2V()}
;
5 f=12(3.r.1W,10);
4(25.26.27&&25.26.27.3u(\'#s-W\')===0){
f=25.26.27.2W(/[^0-9]+/g,\'\');
4((f*1)!=f){
f=3.r.1W}
}
;
3.1J(B);
3.1s(f,8(){
4(d.r.t.1Z){
d.14(f+1);
d.t.1t()}
}
);
3.P(3.r.1A.1e)}
,2Q:8(){
3.1H={
\'21-3v\':2J,\'21-2D\':2K,\'3w\':2L,\'3x\':2M,\'3y\':2N}
}
,2P:8(){
3.L=3.17.E(\'.s-L\');
3.1D=$(\'<p H="s-3z"></p>\');
3.L.F(3.1D);
3.T=3.17.E(\'.s-W-17\');
3.T.3A();
3.V=3.17.E(\'.s-V\');
3.N=3.V.E(\'.s-3B\');
3.1r=$(\'<A H="s-1r"></A>\');
3.Z=$(\'<19 H="s-Z" 1K="\'+3.r.2s+\'">\');
3.T.F(3.Z);
3.Z.15();
$(1L.3C).F(3.1r)}
,1J:8(a){
4(a){
3.Z.1l()}
y{
3.Z.15()}
}
,3D:8(a,b){
4($.28(b)){
3.1H[a]=b}
}
,2R:8(){
5 f=3;
3.G=[];
5 g=0;
5 h=0;
5 j=3.N.E(\'a\');
5 k=j.J;
4(3.r.11<1){
j.E(\'19\').u(\'S\',3.r.11)}
;
j.2I(8(i){
5 a=$(3);
5 b=a.I(\'2X\');
5 c=a.E(\'19\');
4(!f.29(c[0])){
c.2Y(8(){
g+=3.1u.1u.2a;
h++}
)}
y{
g+=c[0].1u.1u.2a;
h++}
;
a.1M(\'s-1N\'+i);
a.1v(8(){
f.1s(i);
f.t.M();
w q}
).2Z(8(){
4(!$(3).1w(\'.s-1m\')&&f.r.11<1){
$(3).E(\'19\').1O(1P,1)}
;
f.14(i)}
,8(){
4(!$(3).1w(\'.s-1m\')&&f.r.11<1){
$(3).E(\'19\').1O(1P,f.r.11)}
}
);
5 a=q;
4(c.1n(\'s-1x\')){
a=c.1n(\'s-1x\')}
y 4(c.I(\'2b\')&&c.I(\'2b\').J){
a=c.I(\'2b\')}
;
5 d=q;
4(c.1n(\'s-1o\')){
d=c.1n(\'s-1o\')}
y 4(c.I(\'2c\')&&c.I(\'2c\').J){
d=c.I(\'2c\')}
;
5 e=q;
4(c.1n(\'s-U\')){
e=c.1n(\'s-U\')}
y 4(c.I(\'U\')&&c.I(\'U\').J){
e=c.I(\'U\')}
;
f.G[i]={
1N:c.I(\'1K\'),W:b,2d:q,1p:q,1o:d,U:e,1q:q,1x:a}
}
);
5 l=2e(8(){
4(k==h){
f.V.E(\'.s-1N-3E\').u(\'v\',g+\'z\');
1Q(l)}
}
,3F)}
,2V:8(){
5 a=3;
$(1L).31(8(e){
4(e.2f==39){
a.1I();
a.t.M()}
y 4(e.2f==37){
a.2g();
a.t.M()}
}
)}
,2S:8(){
3.1i=$(\'<A H="s-2h"><A H="s-2h-W"></A></A>\');
3.1j=$(\'<A H="s-32"><A H="s-32-W"></A></A>\');
3.T.F(3.1i);
3.T.F(3.1j);
5 a=3;
3.1j.33(3.1i).3G(8(e){
$(3).u(\'x\',a.D);
$(3).E(\'A\').1l()}
).3H(8(e){
$(3).E(\'A\').15()}
).1v(8(){
4($(3).1w(\'.s-2h\')){
a.1I();
a.t.M()}
y{
a.2g();
a.t.M()}
}
).E(\'A\').u(\'S\',0.7)}
,2U:8(){
5 c=3;
3.1F=$(\'<A H="s-2i"></A>\');
3.1E=$(\'<A H="s-3I"></A>\');
3.V.F(3.1F);
3.V.34(3.1E);
5 d=0;
5 e=q;
$(3.1E).33(3.1F).1v(8(){
5 a=c.1G-3J;
4(c.r.1Y>0){
5 a=c.r.1Y}
;
4($(3).1w(\'.s-2i\')){
5 b=c.N.1a()+a}
y{
5 b=c.N.1a()-a}
;
4(c.r.t.20){
c.t.M()}
;
c.N.13({
1a:b+\'z\'}
);
w q}
).u(\'S\',0.6).2Z(8(){
5 b=\'C\';
4($(3).1w(\'.s-2i\')){
b=\'2j\'}
;
e=2e(8(){
d++;
4(d>30&&c.r.t.20){
c.t.M()}
;
5 a=c.N.1a()+1;
4(b==\'C\'){
a=c.N.1a()-1}
;
c.N.1a(a)}
,10);
$(3).u(\'S\',1)}
,8(){
d=0;
1Q(e);
$(3).u(\'S\',0.6)}
)}
,2k:8(){
3.1D.2l((3.O+1)+\' / \'+3.G.J);
4(!3.r.1z){
3.1j.1l().u(\'x\',3.D);
3.1i.1l().u(\'x\',3.D);
4(3.O==(3.G.J-1)){
3.1i.15()}
;
4(3.O==0){
3.1j.15()}
}
;
3.P(3.r.1A.2F)}
,35:8(a,b){
4(b>3.D){
5 c=a/b;
b=3.D;
a=3.D*c}
;
4(a>3.K){
5 c=b/a;
a=3.K;
b=3.K*c}
;
w{
v:a,x:b}
}
,36:8(a,b,c){
a.u(\'Q\',\'38\');
4(c<3.D){
5 d=3.D-c;
a.u(\'Q\',(d/2)+\'z\')}
;
a.u(\'C\',\'38\');
4(b<3.K){
5 d=3.K-b;
a.u(\'C\',(d/2)+\'z\')}
}
,3a:8(a){
5 b=q;
4(a.1o.J||a.U.J){
5 c=\'\';
4(a.U.J){
c=\'<3b H="s-3c-U">\'+a.U+\'</3b>\'}
;
5 b=\'\';
4(a.1o.J){
b=\'<16>\'+a.1o+\'</16>\'}
;
b=$(\'<p H="s-W-3c">\'+c+b+\'</p>\')}
;
w b}
,1s:8(a,b){
4(3.G[a]&&!3.1k){
5 c=3;
5 d=3.G[a];
3.1k=B;
4(!d.1p){
3.1J(B);
3.14(a,8(){
c.1J(q);
c.2m(a,b)}
)}
y{
3.2m(a,b)}
}
}
,2m:8(a,b){
4(3.G[a]){
5 c=3;
5 d=3.G[a];
5 e=$(1L.3K(\'A\')).1M(\'s-W\');
5 f=$(1B 3d()).I(\'1K\',d.W);
4(d.1x){
5 g=$(\'<a 2X="\'+d.1x+\'" 3L="3M"></a>\');
g.F(f);
e.F(g)}
y{
e.F(f)}
3.T.34(e);
5 h=3.35(d.1q.v,d.1q.x);
f.I(\'v\',h.v);
f.I(\'x\',h.x);
e.u({
v:h.v+\'z\',x:h.x+\'z\'}
);
3.36(e,h.v,h.x);
5 i=3.3a(d,e);
4(i){
4(!3.r.1X){
e.F(i);
5 j=h.v-12(i.u(\'3e-C\'),10)-12(i.u(\'3e-2j\'),10);
i.u(\'v\',j+\'z\')}
y{
3.r.1X.F(i)}
}
;
3.3f(3.V.E(\'.s-1N\'+a));
5 k=\'2j\';
4(3.O<a){
k=\'C\'}
;
3.P(3.r.1A.2G);
4(3.18||3.r.2t){
5 l=3.r.1b;
5 m=\'3N\';
5 n=3.1H[3.r.2C].2n(3,e,k,i);
4(1R n.1d!=\'1S\'){
l=n.1d}
;
4(1R n.3g!=\'1S\'){
m=n.3g}
;
4(3.18){
5 o=3.18;
5 p=3.R;
o.13(n.1g,l,m,8(){
o.3h();
4(p)p.3h()}
)}
;
e.13(n.1h,l,m,8(){
c.O=a;
c.18=e;
c.R=i;
c.1k=q;
c.2k();
c.P(b)}
)}
y{
3.O=a;
3.18=e;
c.R=i;
3.1k=q;
c.2k();
3.P(b)}
}
}
,3i:8(){
4(3.O==(3.G.J-1)){
4(!3.r.1z){
w q}
;
5 a=0}
y{
5 a=3.O+1}
;
w a}
,1I:8(a){
5 b=3.3i();
4(b===q)w q;
3.14(b+1);
3.1s(b,a);
w B}
,3j:8(){
4(3.O==0){
4(!3.r.1z){
w q}
;
5 a=3.G.J-1}
y{
5 a=3.O-1}
;
w a}
,2g:8(a){
5 b=3.3j();
4(b===q)w q;
3.14(b-1);
3.1s(b,a);
w B}
,3O:8(){
5 a=3;
5 i=0;
8 2o(){
4(i<a.G.J){
i++;
a.14(i,2o)}
}
;
a.14(i,2o)}
,14:8(a,b){
4(3.G[a]){
5 c=3.G[a];
4(!3.G[a].1p){
5 d=$(1B 3d());
d.I(\'1K\',c.W);
4(!3.29(d[0])){
3.1r.F(d);
5 e=3;
d.2Y(8(){
c.1p=B;
c.1q={
v:3.v,x:3.x}
;
e.P(b)}
).2d(8(){
c.2d=B;
c.1p=q;
c.1q=q}
)}
y{
c.1p=B;
c.1q={
v:d[0].v,x:d[0].x}
;
3.P(b)}
}
y{
3.P(b)}
}
}
,29:8(a){
4(1R a.3k!=\'1S\'&&!a.3k){
w q}
;
4(1R a.3l!=\'1S\'&&a.3l==0){
w q}
;
w B}
,3f:8(a){
3.N.E(\'.s-1m\').3m(\'s-1m\');
a.1M(\'s-1m\');
4(3.r.11<1){
3.N.E(\'a:3P(.s-1m) 19\').1O(1P,3.r.11);
a.E(\'19\').1O(1P,1)}
;
5 b=a[0].1u.3Q;
b-=(3.1G/2)-(a[0].2a/2);
3.N.13({
1a:b+\'z\'}
)}
,P:8(a){
4($.28(a)){
a.2n(3)}
}
}
;
8 23(a,b){
3.1e(a,b)}
;
23.2O={
1T:q,1U:q,X:q,L:q,r:q,2p:q,1y:q,Y:q,1V:q,1e:8(a,b){
5 c=3;
3.2p=a;
3.r=b}
,2T:8(){
3.1T=$(\'<16 H="s-t-1t">\'+3.r.2w+\'</16>\');
3.1U=$(\'<16 H="s-t-M">\'+3.r.2x+\'</16>\');
3.X=$(\'<16 H="s-t-X"></16>\');
3.L=$(\'<A H="s-t-L"></A>\');
3.L.F(3.1T).F(3.1U).F(3.X);
3.X.15();
5 a=3;
3.1T.1v(8(){
a.1t()}
);
3.1U.1v(8(){
a.M()}
);
$(1L).31(8(e){
4(e.2f==3R){
4(a.Y){
a.M()}
y{
a.1t()}
}
}
);
w 3.L}
,24:8(){
3.1y=q;
3.M();
3.L.15()}
,1c:8(){
3.1y=B;
3.L.1l()}
,3S:8(){
4(3.1y){
3.24()}
y{
3.1c()}
}
,1t:8(){
4(3.Y||!3.1y)w q;
5 a=3;
3.Y=B;
3.L.1M(\'s-t-Y\');
3.2q();
3.P(3.r.2A);
w B}
,M:8(){
4(!3.Y)w q;
3.Y=q;
3.X.15();
3.L.3m(\'s-t-Y\');
1Q(3.1V);
3.P(3.r.2B);
w B}
,2q:8(){
5 c=3;
5 d=3.r.2y;
5 e=3.r.2z;
1Q(c.1V);
3.X.1l().2l(d+(3.r.1d/2r)+e);
5 f=0;
3.1V=2e(8(){
f+=2r;
4(f>=c.r.1d){
5 a=8(){
4(c.Y){
c.2q()}
;
f=0}
;
4(!c.2p(a)){
c.M()}
;
f=0}
;
5 b=12(c.X.3T().2W(/[^0-9]/g,\'\'),10);
b--;
4(b>0){
c.X.2l(d+b+e)}
}
,2r)}
,P:8(a){
4($.28(a)){
a.2n(3)}
}
}
}
)(3U);
',62,243,'|||this|if|var|||function||||||||||||||||||false|settings|ad|slideshow|css|width|return|height|else|px|div|true|left|image_wrapper_height|find|append|images|class|attr|length|image_wrapper_width|controls|stop|thumbs_wrapper|current_index|fireCallback|top|current_description|opacity|image_wrapper|title|nav|image|countdown|running|loader||thumb_opacity|parseInt|animate|preloadImage|hide|span|wrapper|current_image|img|scrollLeft|animation_speed|enable|speed|init|bottom|old_image|new_image|next_link|prev_link|in_transition|show|active|data|desc|preloaded|size|preloads|showImage|start|parentNode|click|is|link|enabled|cycle|callbacks|new|offsetHeight|gallery_info|scroll_back|scroll_forward|nav_display_width|animations|nextImage|loading|src|document|addClass|thumb|fadeTo|300|clearInterval|typeof|undefined|start_link|stop_link|countdown_interval|start_at_index|description_wrapper|scroll_jump|autostart|stop_on_scroll|slide|AdGallery|AdGallerySlideshow|disable|window|location|hash|isFunction|isImageLoaded|offsetWidth|longdesc|alt|error|setInterval|keyCode|prevImage|next|forward|right|_afterShow|html|_showWhenLoaded|call|preloadNext|nextimage_callback|_next|1000|loader_image|animate_first_image|display_next_and_prev|display_back_and_forward|start_label|stop_label|countdown_prefix|countdown_sufix|onStart|onStop|effect|hori|enable_keyboard_move|afterImageVisible|beforeImageVisible|extend|each|VerticalSlideAnimation|HorizontalSlideAnimation|ResizeAnimation|FadeAnimation|NoneAnimation|prototype|setupElements|setupAnimations|findImages|initNextAndPrev|create|initBackAndForward|initKeyEvents|replace|href|load|hover||keydown|prev|add|prepend|_getContainedImageSize|_centerImage||0px||_getDescription|strong|description|Image|padding|highLightThumb|easing|remove|nextIndex|prevIndex|complete|naturalWidth|removeClass|fn|adGallery|gif|400|5000|Start|Stop|indexOf|vert|resize|fade|none|info|empty|thumbs|body|addAnimation|list|100|mouseover|mouseout|back|50|createElement|target|_blank|swing|preloadAll|not|offsetLeft|83|toggle|text|jQuery'.split('|'),0,{
}
))CSS代码(jquery.ad-gallery.css):
.ad-gallery{width:600px;}
.ad-gallery,.ad-gallery *{margin:0;padding:0;}
.ad-gallery .ad-image-wrapper{width:100%;height:400px;margin-bottom:10px;position:relative;overflow:hidden;}
.ad-gallery .ad-image-wrapper .ad-loader{position:absolute;z-index:10;top:48%;left:48%;border:1px solid #CCC;}
.ad-gallery .ad-image-wrapper .ad-next{position:absolute;right:0;top:0;width:25%;height:100%;cursor:pointer;display:block;z-index:100;}
.ad-gallery .ad-image-wrapper .ad-prev{position:absolute;left:0;top:0;width:25%;height:100%;cursor:pointer;display:block;z-index:100;}
.ad-gallery .ad-image-wrapper .ad-prev,.ad-gallery .ad-image-wrapper .ad-next{/* Or else IE will hide it */
background:url(non-existing.jpg)\9}
.ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image,.ad-gallery .ad-image-wrapper .ad-next .ad-next-image{background:url(ad_prev.png);width:30px;height:30px;display:none;position:absolute;top:47%;left:0;z-index:101;}
.ad-gallery .ad-image-wrapper .ad-next .ad-next-image{background:url(ad_next.png);width:30px;height:30px;right:0;left:auto;}
.ad-gallery .ad-image-wrapper .ad-image{position:absolute;overflow:hidden;top:0;left:0;z-index:9;}
.ad-gallery .ad-image-wrapper .ad-image a img{border:0;}
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description{position:absolute;bottom:0px;left:0px;padding:7px;text-align:left;width:100%;z-index:2;background:url(opa75.png);color:#000;}
* html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description{background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=scale,src='opa75.png');}
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title{display:block;}
.ad-gallery .ad-controls{height:20px;}
.ad-gallery .ad-info{float:left;}
.ad-gallery .ad-slideshow-controls{float:right;}
.ad-gallery .ad-slideshow-controls .ad-slideshow-start,.ad-gallery .ad-slideshow-controls .ad-slideshow-stop{padding-left:5px;cursor:pointer;}
.ad-gallery .ad-slideshow-controls .ad-slideshow-countdown{padding-left:5px;font-size:0.9em;}
.ad-gallery .ad-slideshow-running .ad-slideshow-start{cursor:default;font-style:italic;}
.ad-gallery .ad-nav{width:100%;position:relative;}
.ad-gallery .ad-forward,.ad-gallery .ad-back{position:absolute;top:0;height:100%;z-index:10;}
/* IE 6 doesn't like height:100% */
* html .ad-gallery .ad-forward,.ad-gallery .ad-back{height:100px;}
.ad-gallery .ad-back{cursor:pointer;left:-20px;width:13px;display:block;background:url(ad_scroll_back.png) 0px 22px no-repeat;}
.ad-gallery .ad-forward{cursor:pointer;display:block;right:-20px;width:13px;background:url(ad_scroll_forward.png) 0px 22px no-repeat;}
.ad-gallery .ad-nav .ad-thumbs{overflow:hidden;width:100%;}
.ad-gallery .ad-thumbs .ad-thumb-list{float:left;width:9000px;list-style:none;}
.ad-gallery .ad-thumbs li{float:left;padding-right:5px;}
.ad-gallery .ad-thumbs li a{display:block;}
.ad-gallery .ad-thumbs li a img{border:3px solid #CCC;display:block;}
.ad-gallery .ad-thumbs li a.ad-active img{border:3px solid #616161;}
/* Can't do display none,since Opera won't load the images then */
.ad-preloads{position:absolute;left:-9000px;top:-9000px;}
分享到QQ
分享到微博
微信扫一扫
