jQuery的精美相册效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery的精美相册效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于jQuery的精美相册效果</title>
	<script type="text/javascript" src="js/mootools-for-gallery.js"> </script>
	<script type="text/javascript" src="js/UvumiGallery-compressed.js"> </script>
	<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-gallery.css" />
	<style type="text/css">
		body,html{
			background-color:#333;
			margin:0;
			padding:0;
			font-family:Trebuchet MS, Helvetica, sans-serif; color:#FFFFFF
		}a{ color:#FFCC00}

		#gallery{
			margin:20px auto;
			height:500px;
			width:860px;
			position:relative;
			color:#aaa;
			padding:20px;
			overflow:hidden;
			border:1px solid #888;
			background-color:#000;
		}
	</style>
	<script type="text/javascript">
		new UvumiGallery({container:'gallery'});
	</script>
</head>
<body>
	<div id="gallery">
		<a href="images/ben-clapp.jpg">
		<img src="images/th_ben-clapp.jpg" alt="Ben Clapp master drummer"/></a>
		<a href="images/black-joe.jpg">
		<img src="images/th_black-joe.jpg" alt="Black Joe Lewis of Austin, Texas"/></a>
		<a href="images/blue-guitar.jpg">
		<img src="images/th_blue-guitar.jpg" alt="Classic Gibson SG in metalic blue"/></a>
		<a href="images/favilla-neck.jpg">
		<img src="images/th_favilla-neck.jpg" alt="Acoustic guitarist self portrait"/></a>
		<a href="images/gibson-rock-out.jpg">
		<img src="images/th_gibson-rock-out.jpg" alt="Running the line on a Gibson Les Paul"/></a>
		<a href="images/sprux-guitar.jpg">
		<img src="images/th_sprux-guitar.jpg" alt="Going to Austin"/></a>
		<a href="images/harp-and-shure.jpg">
		<img src="images/th_harp-and-shure.jpg" alt="Bullet with a blues harp"/></a>
		<a href="images/mandolin.jpg">
		<img src="images/th_mandolin.jpg" alt="Electric mandolin street musician"/></a>
		<a href="images/mariomicrophone.jpg">
		<img src="images/th_mariomicrophone.jpg" alt="Mario Matteoli at the mic"/></a>
		<a href="images/marshall.jpg">
		<img src="images/th_marshall.jpg" alt="Marshall amplification"/></a>
		<a href="images/mcfadden.jpg">
		<img src="images/th_mcfadden.jpg" alt="Classic Eric McFadden style"/></a>
		<a href="images/microphone.jpg">
		<img src="images/th_microphone.jpg" alt="Stock microphone photo"/></a>
		<a href="images/power-supply.jpg">
		<img src="images/th_power-supply.jpg" alt="DC Power supply for your rack"/></a>
		<a href="images/reels.jpg">
		<img src="images/th_reels.jpg" alt="Ampex on the move"/></a>
		<a href="images/broken.jpg"><img src="images/thumbs/broken.jpg" alt="Broken link example"/></a>
		<a href="images/scott-h-biram.jpg">
		<img src="images/th_scott-h-biram.jpg" alt="Dirty old one-man band"/></a>
		<a href="images/teac-34b.jpg">
		<img src="images/th_teac-34b.jpg" alt="Teac 34B reel to reel"/></a>
		<a href="images/turntable.jpg">
		<img src="images/th_turntable.jpg" alt="Stock photo of a turntable"/></a>
		<a href="images/vermin-guitars.jpg">
		<img src="images/th_vermin-guitars.jpg" alt="Caption missing..."/></a>
		<a href="images/weary-boys.jpg">
		<img src="images/th_weary-boys.jpg" alt="Live music in Lafayette"/></a>
	</div>
</body>
</html>

JS代码(UvumiGallery-compressed.js):

/*UvumiTools Gallery v1.0.2 http://tools.uvumi.com/gallery.htmlCopyright (c) 2008 Uvumi LLCPermission is hereby granted,free of charge,to any personobtaining a copy of this software and associated documentationfiles (the "Software"),to deal in the Software withoutrestriction,including without limitation the rights to use,copy,modify,merge,publish,distribute,sublicense,and/or sellcopies of the Software,and to permit persons to whom theSoftware is furnished to do so,subject to the followingconditions:The above copyright notice and this permission notice shall beincluded in all copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIESOF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE ANDNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHTHOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISINGFROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OROTHER DEALINGS IN THE SOFTWARE.*/
var UvumiGallery=new Class({
	Implements:Options,options:{
	caption:true,thumbSize:120,spacing:40,loadingImg:'css/ajax-loader.gif',missingThumbClass:'missing-thumbnail',progressClass:'progress-bar',errorMessageClass:'error-message',captionClass:'caption'}
,initialize:function(a){
	this.setOptions(a);
	window.addEvent('domready',this.domReady.bind(this))}
,domReady:function(){
	this.container=$(this.options.container)||$$('body')[0];
	this.container.setStyles({
	'position':(this.container.getStyle('position')=='absolute'?'absolute':'relative'),'width':(this.container.getStyle('width')=='auto'?this.container.getSize().x:this.container.getStyle('width')),'height':(this.container.getStyle('height')=='auto'?this.container.getSize().y:this.container.getStyle('height'))}
);
	this.anchors=this.container.getElements('a').dispose();
	this.nbrImages=this.anchors.length;
	this.images=new Hash();
	if(this.options.caption){
	this.captions=new Hash()}
this.anchors.each(this.getImageInfo,this);
	this.loaded=false;
	var a=new Asset.image(this.options.loadingImg);
	this.build();
	this.load()}
,getImageInfo:function(a){
	var b=a.get('href');
	if(Browser.Engine.trident){
	b=b.replace('about:','')}
var c=a.getFirst('img');
	var d=c.get('src');
	this.images.set(d,b);
	if(this.options.caption){
	var e=c.get('alt');
	if($defined(e)){
	this.captions.set(b,e)}
}
}
,build:function(){
	this.pusher=new Element('div',{
	'styles':{
	'position':'absolute','width':1,'left':0}
}
);
	this.container.setStyles({
	'background-repeat':'no-repeat','background-position':'center center'}
);
	this.error=new Element('div',{
	'html':'the image cannot be loaded.','class':this.options.errorMessageClass,'styles':{
	'top':0,'left':0,'padding-left':this.options.thumbSize}
}
);
	this.resize();
	this.originalHeight=this.windowSize.y;
	if(this.options.caption){
	this.caption=new Element('div',{
	'class':this.options.captionClass,'styles':{
	'position':'absolute','top':0,'left':0,'padding':0,'height':0,'opacity':0.75,'z-index':99,'overflow':'hidden','white-space':'nowrap'}
,'morph':{
	'link':'cancel'}
,'events':{
	'mouseenter':function(){
	$clear(this.captionDelay)}
.bind(this),'mouseleave':function(){
	this.full.fireEvent('mouseleave')}
.bind(this)}
}
);
	this.directLink=new Element('a')}
this.progressContainer=new Element('div',{
	'class':this.options.progressClass,'styles':{
	'position':'absolute','top':(this.extraSpace+this.options.spacing)/4,'height':(this.extraSpace+this.options.spacing)/2,'width':this.windowSize.x/2,'left':this.windowSize.x/4}
}
).inject(this.container);
	this.progresser=new Element('div',{
	'styles':{
	'height':(this.extraSpace+this.options.spacing)/2-2,'position':'absolute','top':0,'left':0,'width':0,'margin':'1px','background-color':this.progressContainer.getStyle('border-top-color')}
,'tween':{
	'link':'cancel','duration':'short'}
}
).inject(this.progressContainer);
	this.scrollArea=new Element('div',{
	styles:{
	position:'absolute',top:0,left:0,width:this.options.thumbSize+this.extraSpace/2,height:'100%'}
}
).inject(this.container);
	this.containerDefaultEvents();
	this.mode="gallery"}
,resize:function(){
	this.windowSize=this.container.getSize();
	this.perLine=(this.windowSize.x/(this.options.thumbSize+this.options.spacing)).toInt();
	this.extraSpace=((this.windowSize.x-this.options.spacing-(this.options.thumbSize+this.options.spacing)*this.perLine)/2).toInt();
	this.mainImage={
	x:this.windowSize.x-(this.options.thumbSize+10)-2*this.options.spacing,y:this.windowSize.y-2*this.options.spacing}
}
,containerDefaultEvents:function(){
	this.repositionImages2=function(){
	$clear(this.resizeDelay);
	$clear(this.resizeDelay2);
	this.resizeDelay=this.repositionImages.delay(300,this);
	if(this.full&&this.loaded){
	this.resizeDelay2=this.positionFullSize.delay(400,this)}
}
.bind(this);
	window.addEvent('resize',this.repositionImages2);
	this.scroll=new Fx.Scroll(this.container,{
	duration:'short'}
);
	this.grow=new Fx.Tween(this.container,{
	onStart:function(){
	window.removeEvent('resize',this.repositionImages2)}
.bind(this),onComplete:function(){
	window.addEvent('resize',this.repositionImages2)}
.delay(100,this)}
)}
,load:function(){
	this.ready=false;
	this.loadedThumbs=new Asset.images(this.images.getKeys(),{
	onProgress:this.displayThumb.bind(this),onComplete:this.imagesLoaded.bind(this),onError:this.thumbMissing.bind(this)}
)}
,displayThumb:function(a,b){
	var c=this.loadedThumbs[b];
	this.progresser.tween('width',((this.windowSize.x*a)/(2*this.nbrImages)).toInt()+'px');
	var d=c.width/c.height;
	if(d<1){
	var e=true;
	var f=this.options.thumbSize;
	var g=this.options.thumbSize*d;
	var h=((this.options.thumbSize-g)/2).toInt();
	var i=0}
else{
	var e=false;
	var g=this.options.thumbSize;
	var f=(this.options.thumbSize/d).toInt();
	var i=((this.options.thumbSize-f)/2).toInt();
	var h=0}
c.store('width',c.width);
	c.store('height',c.height);
	var j=this.extraSpace+this.options.spacing+Math.floor(b/this.perLine)*(this.options.thumbSize+this.options.spacing)+i;
	var k=this.extraSpace+this.options.spacing+(b-this.perLine*Math.floor(b/this.perLine))*(this.options.thumbSize+this.options.spacing)+h;
	c.setStyles({
	'opacity':0,'width':g,'height':f,'position':'absolute','top':j,'left':k,'zIndex':0,'cursor':'pointer'}
).inject(this.container);
	c.store('tag_width',g);
	c.store('tag_height',f);
	c.store('top',j);
	c.store('left',k);
	c.store('turned',e);
	c.store('add2top',i);
	c.store('add2left',h);
	c.store('path',this.images.getKeys()[b]);
	c.set('morph',{
	link:'cancel'}
);
	c.get('morph').start({
	opacity:1}
).chain(function(){
	this.attachDefaultEvents(c)}
.bind(this))}
,thumbMissing:function(a,b){
	this.progresser.tween('width',((this.windowSize.x*a)/(2*this.nbrImages)).toInt()+'px');
	var c=this.extraSpace+this.options.spacing+Math.floor(b/this.perLine)*(this.options.thumbSize+this.options.spacing)+this.options.thumbSize/4;
	var d=this.extraSpace+this.options.spacing+(b-this.perLine*Math.floor(b/this.perLine))*(this.options.thumbSize+this.options.spacing)+this.options.thumbSize/4;
	var e=this.images.getKeys()[b];
	var f=new Element('div',{
	'class':this.options.missingThumbClass,'styles':{
	'position':'absolute','opacity':0,'width':this.options.thumbSize/2-2,'height':this.options.thumbSize/2-2,'top':c,'left':d,'zIndex':0}
}
).inject(this.container);
	this.loadedThumbs[b]=f;
	f.store('width',this.options.thumbSize-2);
	f.store('height',this.options.thumbSize-2);
	f.store('tag_width',this.options.thumbSize/2-2);
	f.store('tag_height',this.options.thumbSize/2-2);
	f.store('top',c);
	f.store('left',d);
	f.store('turned',true);
	f.store('add2top',this.options.thumbSize/4);
	f.store('add2left',this.options.thumbSize/4);
	f.store('path',e);
	f.set('morph',{
	link:'cancel'}
);
	f.get('morph').start({
	opacity:1}
).chain(function(){
	this.attachDefaultEvents(f)}
.bind(this))}
,imagesLoaded:function(){
	this.loaded=true;
	this.ready=true;
	this.progressContainer.get('tween').start('opacity',0).chain(function(){
	this.progressContainer.destroy()}
.bind(this));
	this.imageFx=new Fx.Elements(this.loadedThumbs,{
	link:'cancel'}
);
	this.animations={
}
;
	this.repositionImages()}
,attachDefaultEvents:function(a){
	a.removeEvents();
	a.addEvents({
	'mouseenter':this.zoom.bindWithEvent(this),'mouseleave':this.dezoom.bindWithEvent(this),'click':this.toMenu.bindWithEvent(this)}
)}
,zoom:function(e){
	var a=$(e.target);
	if(this.mouseDown){
	return}
a.store('zoomed',true);
	a.setStyle('zIndex',2);
	var b=a.get('morph');
	b.clearChain();
	b.start({
	'width':a.retrieve('width'),'height':a.retrieve('height'),'top':(a.retrieve('top')-(a.retrieve('height')-a.retrieve('tag_height'))/2).toInt(),'left':(a.retrieve('left')-(a.retrieve('width')-a.retrieve('tag_width'))/2).toInt()}
)}
,dezoom:function(e){
	var a=$(e.target);
	a.store('zoomed',false);
	a.setStyle('zIndex',1);
	var b=a.get('morph');
	b.clearChain();
	b.chain(function(){
	if(!this.retrieve('zoomed')){
	this.setStyle('zIndex',0)}
}
.bind(a));
	b.start({
	'width':a.retrieve('tag_width'),'height':a.retrieve('tag_height'),'top':a.retrieve('top'),'left':a.retrieve('left')}
)}
,toMenu:function(e){
	if(!this.ready){
	return false}
this.mode='menu';
	this.index=-1;
	this.mouseScroll=function(a){
	this.scrolling=true;
	$clear(this.scrollDelay);
	this.scrollDelay=function(){
	this.scrolling=false;
	this.loadHiRez()}
.delay(500,this);
	this.scrollSideBar(a)}
.bindWithEvent(this);
	this.scrollArea.addEvent('mousewheel',this.mouseScroll);
	this.loadedThumbs.each(this.attachScrollEvents,this);
	this.scrollSideBar(e)}
,attachScrollEvents:function(a){
	a.removeEvents();
	var b=a.get('morph');
	b.cancel().clearChain();
	a.addEvents({
	'mouseenter':function(){
	b.start({
	opacity:1}
);
	this.thumbOpacChain(a);
	a.store('timer',this.thumbOpacChain.periodical(1000,this,a))}
.bind(this),'mouseleave':function(){
	$clear(a.retrieve('timer'));
	b.start({
	opacity:this.retrieve('opa')}
)}
,'click':this.scrollSideBar.bindWithEvent(this)}
)}
,thumbOpacChain:function(a){
	var b=a.get('morph');
	b.start({
	opacity:1}
).chain(function(){
	b.start({
	opacity:a.retrieve('opa')}
)}
)}
,scrollSideBar:function(e){
	this.mouseDown=false;
	e.stop();
	var a=this.images.getKeys();
	var b=this.getImgForScroll(e,a);
	if(b==this.index){
	return}
this.index=b;
	this.start=this.max(this.index-3,0);
	this.stop=this.min(this.index+3,a.length-1);
	if(this.scrolling){
	this.repositionImages()}
else{
	this.grow.start('height',this.originalHeight).chain(function(){
	this.repositionImages();
	this.loadHiRez()}
.bind(this))}
}
,getImgForScroll:function(a,b){
	if(a.wheel<0){
	return this.min(b.length-1,this.index+1)}
else if(a.wheel>0){
	return this.max(0,this.index-1)}
else{
	return b.indexOf($(a.target).retrieve('path'))}
}
,loadHiRez:function(){
	this.mouseDown=false;
	var a=this.images.getValues()[this.index];
	var b=this.loadedThumbs[this.index];
	this.loaded=false;
	if(this.full){
	this.full.fireEvent('mouseleave').destroy();
	this.full=false}
this.container.setStyle('background-image','url('+this.options.loadingImg+')');
	this.error.dispose();
	this.full=new Asset.image(a,{
	onload:this.displayHiRez.bind(this,b),onerror:this.displayError.bind(this,a)}
);
	this.full.store('turned',b.retrieve('turned'));
	this.full.store('path',a)}
,displayError:function(a){
	if(this.loaded){
	return}
this.full=false;
	this.error.set('html','The image '+a+' could not load.');
	this.error.setStyles({
	'top':this.windowSize.y/2}
).inject(this.container);
	this.container.setStyle('background-image','')}
,displayHiRez:function(a){
	this.container.setStyle('background-image','');
	var b=a.getCoordinates(this.container);
	this.full.setStyles({
	'position':'absolute','width':b.width,'height':b.height,'top':b.top,'left':b.left,'opacity':0,'cursor':'pointer','z-index':90}
).inject(this.container);
	if(this.caption){
	var c='Direct Link:';
	if(this.captions.has(this.full.retrieve('path'))){
	c=this.captions.get(this.full.retrieve('path'))+'<br/>'+c}
this.caption.set('html',c);
	var d=decodeURI(this.full.get('src'));
	if(!d.contains('http')){
	d='http://'+location.hostname+d}
this.directLink.set({
	'href':d,'html':d}
).inject(this.caption)}
this.loaded=true;
	this.full.set('morph',{
	link:'ignore'}
);
	this.positionFullSize()}
,toGallery:function(e){
	$clear(this.scrollDelay);
	this.scrolling=false;
	this.mode='gallery';
	var a=new Event(e).stop();
	var b=$(a.target);
	b.fireEvent('mouseleave');
	this.loadedThumbs.removeEvents();
	this.loadedThumbs.each(this.attachDefaultEvents,this);
	this.scrollArea.removeEvent('mousewheel',this.mouseScroll);
	this.container.setStyle('background-image','');
	this.repositionImages();
	if(this.full){
	this.full.fireEvent('mouseleave');
	this.full.get('morph').start({
	opacity:0}
).chain(function(){
	if(this.caption){
	this.caption.dispose();
	this.full.destroy();
	this.full=false}
}
.bind(this))}
}
,repositionImages:function(){
	this.resize();
	this.ready=false;
	this.scroll.toTop();
	if(this.mode=="gallery"){
	if(!this.loaded){
	return}
this.loadedThumbs.each(function(a,b){
	var c=(this.extraSpace+this.options.spacing+Math.floor(b/this.perLine)*(this.options.thumbSize+this.options.spacing)+a.retrieve('add2top')).toInt();
	var d=(this.extraSpace+this.options.spacing+(b-this.perLine*Math.floor(b/this.perLine))*(this.options.thumbSize+this.options.spacing)+a.retrieve('add2left')).toInt();
	a.store('top',c);
	a.store('left',d);
	this.animations[b]={
	'opacity':1,'width':a.retrieve('tag_width'),'height':a.retrieve('tag_height'),'top':c,'left':d,'zIndex':0}
}
,this);
	var e=true}
else{
	this.loadedThumbs.each(function(a,i){
	var z=i-this.index;
	var b=1/(1+1.2*(Math.abs(z)));
	var c=this.windowSize.y*(1+1.1*z/(2+(Math.abs(z))))/2-(this.options.thumbSize+this.options.spacing)/2;
	a.setStyles({
	'display':'block','visibility':'visible','z-index':this.loadedThumbs.length-Math.abs(z)}
);
	if((i<this.start)||(i>this.stop)){
	var d=0}
else{
	var d=b}
a.store('opa',d);
	this.animations[i]={
	'top':(c+(this.options.thumbSize-a.retrieve('tag_height')*b)/2).toInt(),'left':(10+(this.options.thumbSize-a.retrieve('tag_width')*b)/2).toInt(),'width':(a.retrieve('tag_width')*b).toInt(),'height':(a.retrieve('tag_height')*b).toInt(),'opacity':d}
}
,this);
	var e=false}
this.imageFx.start(this.animations).chain(function(){
	this.ready=true;
	this.updatePusher(e)}
.bind(this))}
,positionFullSize:function(){
	var c=this.full.getSize();
	var d=this.full.clone();
	d.setStyles({
	visibility:'hidden',width:'auto',height:'auto'}
).inject(this.container);
	var e=d.getSize();
	d.destroy();
	if(this.full.retrieve('turned')){
	var f=this.min(this.mainImage.y,e.y);
	var g=(e.x*f/e.y).toInt();
	if(g>this.mainImage.x){
	var g=this.mainImage.x;
	var f=(e.y*g/e.x).toInt()}
}
else{
	var g=this.min(this.mainImage.x,e.x);
	var f=(e.y*g/e.x).toInt();
	if(f>this.mainImage.y){
	var f=this.mainImage.y;
	var g=(e.x*f/e.y).toInt()}
}
var h=(this.options.spacing+(this.mainImage.y-f)/2).toInt();
	var i=(this.options.thumbSize+10+this.options.spacing+(this.mainImage.x-g)/2).toInt();
	this.full.get('morph').start({
	'opacity':1,'left':i,'top':h,'width':g,'height':f}
).chain(function(){
	this.ready=true;
	this.updatePusher();
	if(this.caption){
	var b=this.full.getCoordinates(this.container);
	this.caption.setStyles({
	'top':b.bottom+'px','height':0,'left':b.left,'width':b.width}
).inject(this.container);
	this.full.removeEvents();
	this.full.addEvents({
	'mouseenter':function(){
	if(!this.ready){
	return}
$clear(this.captionDelay);
	var a=this.full.getCoordinates(this.container);
	this.caption.get('morph').start({
	'top':a.bottom-45,'height':45}
)}
.bind(this),'mouseleave':function(){
	var a=this.full.getCoordinates(this.container);
	this.captionDelay=(function(){
	this.caption.get('morph').start({
	'top':a.bottom,'height':0}
)}
).delay(100,this)}
.bind(this),'mousemove':function(){
	this.removeEvents('mousemove');
	this.fireEvent('mouseenter')}
,'click':this.toGallery.bind(this)}
)}
else{
	this.full.removeEvents();
	this.full.addEvent('click',this.toGallery.bind(this))}
}
.bind(this))}
,updatePusher:function(a){
	this.container.setStyle('overflow','hidden');
	this.pusher.dispose();
	if(a){
	this.pusher.setStyles({
	'top':this.loadedThumbs[this.loadedThumbs.length-1].getCoordinates(this.container).bottom,'height':this.extraSpace+this.options.spacing}
).inject(this.container);
	this.grow.start('height',this.pusher.getCoordinates(this.container).bottom);
	this.resize()}
}
,destroy:function(){
	this.container.empty();
	window.removeEvent('resize',this.repositionImages2);
	this.scrollArea.removeEvent('mousewheel',this.mouseScroll)}
,min:function(a,b){
	return((a<b)?a:b)}
,max:function(a,b){
	return((a>b)?a:b)}
}
);
	Asset.set('images',function(c,d){
	d=$merge({
	onComplete:$empty,onProgress:$empty,onError:$empty}
,d);
	if(!c.push)c=[c];
	var e=[];
	var f=0;
	c.each(function(a){
	var b=new Asset.image(a,{
	'onload':function(){
	d.onProgress.call(this,f,c.indexOf(a));
	f++;
	if(f==c.length)d.onComplete()}
,'onerror':function(){
	d.onError.call(this,f,c.indexOf(a));
	f++;
	if(f==c.length)d.onComplete()}
}
);
	e.push(b)}
);
	return new Elements(e)}
);

CSS代码(uvumi-gallery.css):

/*TO AVOID UNEXPECTED RESULTS,DO NOT MODIFY ANY OF THE PROPERTY OTHER THAN THE ONES SET HERE*/
img{border:0;}
/*The color of the border will actually also define the color of the progresser inside*/
div.progress-bar{border:1px solid #fff;background-color:#000;}
/*try not to make the border thicker than 1px*/
div.missing-thumbnail{background:#333 url('redx.gif') center center no-repeat;cursor:pointer;border:1px solid #bbb;}
div.error-message{color:#bbb;font-size:1.2em;margin-top:-0.6em;position:relative;text-align:center;}
div.caption{background-color:#000;color:#fff;}
/*to style the direct link inside the caption*/
div.caption a{color:#fff;}

附件:下载该文件资源,减少时间成本(增值服务)