以下是 滑块画廊展示jQuery图片特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Slider Gallery with jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slider Gallery with jQuery" />
<meta name="keywords" content="jquery, css3, slider, scrolling, scroller, jquery ui, preview, slider" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/GreyscaleBasic.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1,h2,.fp_close,.reference');
</script>
<link type="text/css" href="css/jquery.ui.theme.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.core.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.slider.css" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style type="text/css">
span.reference{
font-family:Arial;
position:fixed;
left:10px;
bottom:10px;
font-size:13px;
}
span.reference a{
color:#fff;
margin-right:20px;
text-transform:uppercase;
}
span.reference a:hover{
border-bottom:1px solid #ddd;
}
</style>
</head>
<body>
<div id="fp_gallery" class="fp_gallery">
<img src="images/bgimg.jpg" class="fp_bgImage" />
<div class="fp_bgPattern"></div>
<h1>Fashion Photography</h1>
<h2>by parisbeyrouth</h2>
<ul id="fp_galleryList" class="fp_galleryList">
<li>Paris</li>
<li>New York</li>
</ul>
<div id="fp_thumbContainer">
<div id="fp_thumbScroller">
<div class="container">
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" class="thumb" /></a></div>
</div>
</div>
<div class="container">
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" class="thumb" /></a></div>
</div>
<div class="content">
<div><a href="#"><img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" class="thumb" /></a></div>
</div>
</div>
</div>
</div>
<div id="fp_scrollWrapper" class="fp_scrollWrapper">
<span id="fp_prev_thumb" class="fp_prev_thumb"></span>
<div id="slider" class="slider"></div>
<span id="fp_next_thumb" class="fp_next_thumb"></span>
</div>
<div id="fp_overlay" class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="fp_close" class="fp_close">Close preview</div>
</div>
<div>
<span class="reference">
<a href="#">#</a>
</span>
</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
//caching
//the main wrapper of the gallery
var $fp_gallery = $('#fp_gallery')
//the overlay when the large image is displayed
var $fp_overlay = $('#fp_overlay');
//image loading status
var $fp_loading = $('#fp_loading');
//the next and previous buttons
var $fp_next = $('#fp_next');
var $fp_prev = $('#fp_prev');
//the close button
var $fp_close = $('#fp_close');
//the main container for the thumbs structure
var $fp_thumbContainer = $('#fp_thumbContainer');
//wrapper of jquery ui slider
var $fp_scrollWrapper = $('#fp_scrollWrapper');
//total number of images
var nmb_images=0;
//which gallery is clicked (index)
var gallery_idx=-1;
//scroller wrapper
var $fp_thumbScroller = $('#fp_thumbScroller');
//jquery ui slider
var $slider = $('#slider');
//the links of the galleries (the cities)
var $fp_galleries = $('#fp_galleryList > li');
//current image being viewed
var current = 0;
//some control flags:
//prevent fast clicks on next and previous
var photo_nav = true;
//User clicks on a city / gallery;
$fp_galleries.bind('click',function(){
$fp_galleries.removeClass('current');
var $gallery = $(this);
$gallery.addClass('current');
var gallery_index = $gallery.index();
if(gallery_idx == gallery_index) return;
gallery_idx = gallery_index;
//close the gallery and slider if opened
if($fp_thumbContainer.data('opened')==true){
$fp_scrollWrapper.fadeOut();
$fp_thumbContainer.stop()
.animate({'height':'0px'},200,function(){
openGallery($gallery);
});
}
else
openGallery($gallery);
});
//opens a gallery after cliking on a city / gallery
function openGallery($gallery){
//current gets reseted
current = 0;
//wrapper of each content div, where each image is
var $fp_content_wrapper = $fp_thumbContainer.find('.container:nth-child('+parseInt(gallery_idx+1)+')');
//hide all the other galleries thumbs wrappers
$fp_thumbContainer.find('.container').not($fp_content_wrapper).hide();
//and show this one
$fp_content_wrapper.show();
//total number of images
nmb_images = $fp_content_wrapper.children('div').length;
//calculate width,
//padding left
//and padding right for content wrapper
var w_width = 0;
var padding_l = 0;
var padding_r = 0;
//center of screen
var center = $(window).width()/2;
var one_divs_w = 0;
/*
Note:
the padding left is the center minus half of the width of the first content div
the padding right is the center minus half of the width of the last content div
*/
$fp_content_wrapper.children('div').each(function(i){
var $div = $(this);
var div_width = $div.width();
w_width +=div_width;
//if first one, lets calculate the padding left
if(i==0)
padding_l = center - (div_width/2);
//if last one, lets calculate the padding right
if(i==(nmb_images-1)){
padding_r = center - (div_width/2);
one_divs_w= div_width;
}
}).end().css({
'width' : w_width + 'px',
'padding-left' : padding_l + 'px',
'padding-right' : padding_r + 'px'
});
//scroll all left;
$fp_thumbScroller.scrollLeft(w_width);
//innitialize the slider
$slider.slider('destroy').slider({
orientation : 'horizontal',
max : w_width -one_divs_w,//total width minus one content div width
min : 0,
value : 0,
slide : function(event, ui) {
$fp_thumbScroller.scrollLeft(ui.value);
},
stop: function(event, ui) {
//when we stop sliding
//we may want that the closest picture to the center
//of the window stays centered. Uncomment the following line
//if you want that behaviour
checkClosest();
}
});
//open the gallery and show the slider
$fp_thumbContainer.animate({'height':'240px'},200,function(){
$(this).data('opened',true);
$fp_scrollWrapper.fadeIn();
});
//scroll all right;
$fp_thumbScroller.stop()
.animate({'scrollLeft':'0px'},2000,'easeInOutExpo');
//User clicks on a content div (image)
$fp_content_wrapper.find('.content')
.bind('click',function(e){
var $current = $(this);
//track the current one
current = $current.index();
//center and show this image
//the second parameter set to true means we want to
//display the picture after the image is centered on the screen
centerImage($current,true,600);
e.preventDefault();
});
}
//while the gallery scrolls we want that the slider scrolls as well
$fp_thumbScroller.scroll(function(){
$slider.slider('value',parseInt($fp_thumbScroller.scrollLeft(),10));
});
//User clicks next button (preview mode)
$fp_next.bind('click',function(){
if(photo_nav){
photo_nav = false;
navigate(1);
}
});
//User clicks previous button (preview mode)
$fp_prev.bind('click',function(){
if(photo_nav){
photo_nav = false;
navigate(0);
}
});
//User clicks next button (thumbs)
$('#fp_next_thumb').click(function(){
slideThumb(1);
});
//User clicks previous button (thumbs)
$('#fp_prev_thumb').click(function(){
slideThumb(0);
});
//User clicks close button
$fp_close.bind('click',function(){
if(!photo_nav) return;
//windows scroll if any
var windowS = $(window).scrollTop();
//the large image being viewed
var $large_img = $('#fp_preview');
//the current thumb
var $current = $fp_thumbScroller.find('.container:nth-child('+parseInt(gallery_idx+1)+')')
.find('.content:nth-child('+parseInt(current+1)+')');
//offset values of current thumb
var current_offset = $current.offset();
//the large image will animate in the direction of the center
//after that it is removed from the DOM
$large_img.stop().animate({
'top' : current_offset.top + windowS + 'px',
'left' : $(window).width()/2 - $current.width()/2 + 'px',
'width' : $current.width() + 'px',
'height' : $current.height() + 'px',
'opacity' : 0
},800,function(){
$(this).remove();
//hide the overlay, and the next, previous and close buttons
hidePreviewFunctions();
});
});
//centers an image and opens it if open is true
function centerImage($obj,open,speed){
//the offset left of the element
var obj_left = $obj.offset().left;
//the center of the element is its offset left plus
//half of its width
var obj_center = obj_left + ($obj.width()/2);
//the center of the window
var center = $(window).width()/2;
//how much the scroller has scrolled already
var currentScrollLeft = parseFloat($fp_thumbScroller.scrollLeft(),10);
//so we know that in order to center the image,
//we must scroll the center of the image minus the center of the screen,
//and add whatever we have scrolled already
var move = currentScrollLeft + (obj_center - center);
if(move != $fp_thumbScroller.scrollLeft()) //try 'easeInOutExpo'
$fp_thumbScroller.stop()
.animate({scrollLeft: move}, speed,function(){
if(open)
enlarge($obj);
});
else if(open)
enlarge($obj);
}
//shows the large image
//first we position the large image on top of the thumb
//and then, we animate it to the maximum we can get
//based on the windows size
function enlarge($obj){
//the image element
var $thumb = $obj.find('img');
//show loading image
$fp_loading.show();
//preload large image
$('<img id="fp_preview" />').load(function(){
var $large_img = $(this);
//confirm there's no other large one
$('#fp_preview').remove();
$large_img.addClass('fp_preview');
//now let's position this image on the top of the thumb
//we append this image to the fp_gallery div
var obj_offset = $obj.offset();
$large_img.css({
'width' : $thumb.width() + 'px',
'height': $thumb.height() + 'px',
'top' : obj_offset.top + 'px',
'left' : obj_offset.left + 5 + 'px'//5 of margin
}).appendTo($fp_gallery);
//getFinalValues gives us the maximum possible width and height
//for the large image based on the windows size.
//those values are saved on the element using the jQuery.data()
getFinalValues($large_img);
var largeW = $large_img.data('width');
var largeH = $large_img.data('height');
//windows width, height and scroll
var $window = $(window);
var windowW = $window.width();
var windowH = $window.height();
var windowS = $window.scrollTop();
//hide the image loading
$fp_loading.hide();
//show the overlay
$fp_overlay.show();
//now animate the large image
$large_img.stop().animate({
'top' : windowH/2 -largeH/2 + windowS + 'px',
'left' : windowW/2 -largeW/2 + 'px',
'width' : largeW + 'px',
'height' : largeH + 'px',
'opacity' : 1
},800,function(){
//after the animation,
//show the next, previous and close buttons
showPreviewFunctions();
});
}).attr('src',$thumb.attr('alt'));
}
//shows next or previous image
//1 is right;0 is left
function navigate(way){
//show loading image
$fp_loading.show();
if(way==1){
++current;
var $current = $fp_thumbScroller.find('.container:nth-child('+parseInt(gallery_idx+1)+')')
.find('.content:nth-child('+parseInt(current+1)+')');
if($current.length == 0){
--current;
$fp_loading.hide();
photo_nav = true;
return;
}
}
else{
--current;
var $current = $fp_thumbScroller.find('.container:nth-child('+parseInt(gallery_idx+1)+')')
.find('.content:nth-child('+parseInt(current+1)+')');
if($current.length == 0){
++current;
$fp_loading.hide();
photo_nav = true;
return;
}
}
//load large image of next/previous content div
$('<img id="fp_preview" />').load(function(){
$fp_loading.hide();
var $large_img = $(this);
var $fp_preview = $('#fp_preview');
//make the current one slide left if clicking next
//make the current one slide right if clicking previous
var animate_to = -$fp_preview.width();
var animate_from = $(window).width();
if(way==0){
animate_to = $(window).width();
animate_from = -$fp_preview.width();
}
//now we want that the thumb (of the last image viewed)
//stays centered on the screen
centerImage($current,false,1000);
$fp_preview.stop().animate({'left':animate_to+'px'},500,function(){
$(this).remove();
$large_img.addClass('fp_preview');
getFinalValues($large_img);
var largeW = $large_img.data('width');
var largeH = $large_img.data('height');
var $window = $(window);
var windowW = $window.width();
var windowH = $window.height();
var windowS = $window.scrollTop();
$large_img.css({
'width' : largeW+'px',
'height': largeH+'px',
'top' : windowH/2 -largeH/2 + windowS + 'px',
'left' : animate_from + 'px',
'opacity' : 1
}).appendTo($fp_gallery)
.stop()
.animate({'left':windowW/2 -largeW/2+'px'},500,function(){photo_nav = true;});
});
}).attr('src',$current.find('img').attr('alt'));
}
//show the next, previous and close buttons
function showPreviewFunctions(){
$fp_next.stop().animate({'right':'0px'},500);
$fp_prev.stop().animate({'left':'0px'},500);
$fp_close.show();
}
//hide the overlay, and the next, previous and close buttons
function hidePreviewFunctions(){
$fp_next.stop().animate({'right':'-50px'},500);
$fp_prev.stop().animate({'left':'-50px'},500);
$fp_close.hide();
$fp_overlay.hide();
}
function getFinalValues($image){
var widthMargin = 0
var heightMargin = 20;
var $window = $(window);
var windowH = $window.height()-heightMargin;
var windowW = $window.width()-widthMargin;
var theImage = new Image();
theImage.src = $image.attr("src");
var imgwidth = theImage.width;
var imgheight = theImage.height;
if((imgwidth > windowW)||(imgheight > windowH)){
if(imgwidth > imgheight){
var newwidth = windowW;
var ratio = imgwidth / windowW;
var newheight = imgheight / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newheight>windowH){
var newnewheight = windowH;
var newratio = newheight/windowH;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
}
else{
var newheight = windowH;
var ratio = imgheight / windowH;
var newwidth = imgwidth / ratio;
theImage.height = newheight;
theImage.width= newwidth;
if(newwidth>windowW){
var newnewwidth = windowW;
var newratio = newwidth/windowW;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
}
}
$image.data('width',theImage.width);
$image.data('height',theImage.height);
}
//slides the scroller one picture
//to the right or left
function slideThumb(way){
if(way==1){
++current;
var $next = $fp_thumbScroller.find('.container:nth-child('+parseInt(gallery_idx+1)+')')
.find('.content:nth-child('+parseInt(current+1)+')');
if($next.length > 0)
centerImage($next,false,600);
else{
--current;
return;
}
}
else{
--current;
var $prev = $fp_thumbScroller.find('.container:nth-child('+parseInt(gallery_idx+1)+')')
.find('.content:nth-child('+parseInt(current+1)+')');
if($prev.length > 0)
centerImage($prev,false,600);
else{
++current;
return;
}
}
}
//when we stop sliding
//we may want that the closest picture to the center
//of the window stays centered
function checkClosest(){
var center = $(window).width()/2;
var current_distance = 99999999;
var idx = 0;
$container = $fp_thumbScroller.find('.container:nth-child('+parseInt(gallery_idx+1)+')');
$container.find('.content').each(function(i){
var $obj = $(this);
//the offset left of the element
var obj_left = $obj.offset().left;
//the center of the element is its offset left plus
//half of its width
var obj_center = obj_left + ($obj.width()/2);
var distance = Math.abs(center-obj_center);
if(distance < current_distance){
current_distance = distance;
idx = i;
}
});
var $new_current = $container.find('.content:nth-child('+parseInt(idx+1)+')');
current = $new_current.index();
centerImage($new_current,false,200);
}
});
</script>
</body>
</html>
JS代码(cufon-yui.js):
/* * Copyright (c) 2009 Simo Kinnunen. * Licensed under the MIT license. * * @version 1.09 */
var Cufon=(function(){
var m=function(){
return m.replace.apply(null,arguments)}
;
var x=m.DOM={
ready:(function(){
var C=false,E={
loaded:1,complete:1}
;
var B=[],D=function(){
if(C){
return}
C=true;
for(var F;
F=B.shift();
F()){
}
}
;
if(document.addEventListener){
document.addEventListener("DOMContentLoaded",D,false);
window.addEventListener("pageshow",D,false)}
if(!window.opera&&document.readyState){
(function(){
E[document.readyState]?D():setTimeout(arguments.callee,10)}
)()}
if(document.readyState&&document.createStyleSheet){
(function(){
try{
document.body.doScroll("left");
D()}
catch(F){
setTimeout(arguments.callee,1)}
}
)()}
q(window,"load",D);
return function(F){
if(!arguments.length){
D()}
else{
C?F():B.push(F)}
}
}
)(),root:function(){
return document.documentElement||document.body}
}
;
var n=m.CSS={
Size:function(C,B){
this.value=parseFloat(C);
this.unit=String(C).match(/[a-z%]*$/)[0]||"px";
this.convert=function(D){
return D/B*this.value}
;
this.convertFrom=function(D){
return D/this.value*B}
;
this.toString=function(){
return this.value+this.unit}
}
,addClass:function(C,B){
var D=C.className;
C.className=D+(D&&" ")+B;
return C}
,color:j(function(C){
var B={
}
;
B.color=C.replace(/^rgba\((.*?),\s*([\d.]+)\)/,function(E,D,F){
B.opacity=parseFloat(F);
return"rgb("+D+")"}
);
return B}
),fontStretch:j(function(B){
if(typeof B=="number"){
return B}
if(/%$/.test(B)){
return parseFloat(B)/100}
return{
"ultra-condensed":0.5,"extra-condensed":0.625,condensed:0.75,"semi-condensed":0.875,"semi-expanded":1.125,expanded:1.25,"extra-expanded":1.5,"ultra-expanded":2}
[B]||1}
),getStyle:function(C){
var B=document.defaultView;
if(B&&B.getComputedStyle){
return new a(B.getComputedStyle(C,null))}
if(C.currentStyle){
return new a(C.currentStyle)}
return new a(C.style)}
,gradient:j(function(F){
var G={
id:F,type:F.match(/^-([a-z]+)-gradient\(/)[1],stops:[]}
,C=F.substr(F.indexOf("(")).match(/([\d.]+=)?(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)/ig);
for(var E=0,B=C.length,D;
E<B;
++E){
D=C[E].split("=",2).reverse();
G.stops.push([D[1]||E/(B-1),D[0]])}
return G}
),quotedList:j(function(E){
var D=[],C=/\s*((["'])([\s\S]*?[^\\])\2|[^,]+)\s*/
g,B;
while(B=C.exec(E)){
D.push(B[3]||B[1])}
return D}
),recognizesMedia:j(function(G){
var E=document.createElement("style"),D,C,B;
E.type="text/css";
E.media=G;
try{
E.appendChild(document.createTextNode("/**/
"))}
catch(F){
}
C=g("head")[0];
C.insertBefore(E,C.firstChild);
D=(E.sheet||E.styleSheet);
B=D&&!D.disabled;
C.removeChild(E);
return B}
),removeClass:function(D,C){
var B=RegExp("(?:^|\\s+)"+C+"(?=\\s|$)","g");
D.className=D.className.replace(B,"");
return D}
,supports:function(D,C){
var B=document.createElement("span").style;
if(B[D]===undefined){
return false}
B[D]=C;
return B[D]===C}
,textAlign:function(E,D,B,C){
if(D.get("textAlign")=="right"){
if(B>0){
E=" "+E}
}
else{
if(B<C-1){
E+=" "}
}
return E}
,textShadow:j(function(F){
if(F=="none"){
return null}
var E=[],G={
}
,B,C=0;
var D=/(#[a-f0-9]+|[a-z]+\(.*?\)|[a-z]+)|(-?[\d.]+[a-z%]*)|,/ig;
while(B=D.exec(F)){
if(B[0]==","){
E.push(G);
G={
}
;
C=0}
else{
if(B[1]){
G.color=B[1]}
else{
G[["offX","offY","blur"][C++]]=B[2]}
}
}
E.push(G);
return E}
),textTransform:(function(){
var B={
uppercase:function(C){
return C.toUpperCase()}
,lowercase:function(C){
return C.toLowerCase()}
,capitalize:function(C){
return C.replace(/\b./g,function(D){
return D.toUpperCase()}
)}
}
;
return function(E,D){
var C=B[D.get("textTransform")];
return C?C(E):E}
}
)(),whiteSpace:(function(){
var D={
inline:1,"inline-block":1,"run-in":1}
;
var C=/^\s+/,B=/\s+$/;
return function(H,F,G,E){
if(E){
if(E.nodeName.toLowerCase()=="br"){
H=H.replace(C,"")}
}
if(D[F.get("display")]){
return H}
if(!G.previousSibling){
H=H.replace(C,"")}
if(!G.nextSibling){
H=H.replace(B,"")}
return H}
}
)()}
;
n.ready=(function(){
var B=!n.recognizesMedia("all"),E=false;
var D=[],H=function(){
B=true;
for(var K;
K=D.shift();
K()){
}
}
;
var I=g("link"),J=g("style");
function C(K){
return K.disabled||G(K.sheet,K.media||"screen")}
function G(M,P){
if(!n.recognizesMedia(P||"all")){
return true}
if(!M||M.disabled){
return false}
try{
var Q=M.cssRules,O;
if(Q){
search:for(var L=0,K=Q.length;
O=Q[L],L<K;
++L){
switch(O.type){
case 2:break;
case 3:if(!G(O.styleSheet,O.media.mediaText)){
return false}
break;
default:break search}
}
}
}
catch(N){
}
return true}
function F(){
if(document.createStyleSheet){
return true}
var L,K;
for(K=0;
L=I[K];
++K){
if(L.rel.toLowerCase()=="stylesheet"&&!C(L)){
return false}
}
for(K=0;
L=J[K];
++K){
if(!C(L)){
return false}
}
return true}
x.ready(function(){
if(!E){
E=n.getStyle(document.body).isUsable()}
if(B||(E&&F())){
H()}
else{
setTimeout(arguments.callee,10)}
}
);
return function(K){
if(B){
K()}
else{
D.push(K)}
}
}
)();
function s(D){
var C=this.face=D.face,B={
"\u0020":1,"\u00a0":1,"\u3000":1}
;
this.glyphs=D.glyphs;
this.w=D.w;
this.baseSize=parseInt(C["units-per-em"],10);
this.family=C["font-family"].toLowerCase();
this.weight=C["font-weight"];
this.style=C["font-style"]||"normal";
this.viewBox=(function(){
var F=C.bbox.split(/\s+/);
var E={
minX:parseInt(F[0],10),minY:parseInt(F[1],10),maxX:parseInt(F[2],10),maxY:parseInt(F[3],10)}
;
E.width=E.maxX-E.minX;
E.height=E.maxY-E.minY;
E.toString=function(){
return[this.minX,this.minY,this.width,this.height].join(" ")}
;
return E}
)();
this.ascent=-parseInt(C.ascent,10);
this.descent=-parseInt(C.descent,10);
this.height=-this.ascent+this.descent;
this.spacing=function(L,N,E){
var O=this.glyphs,M,K,G,P=[],F=0,J=-1,I=-1,H;
while(H=L[++J]){
M=O[H]||this.missingGlyph;
if(!M){
continue}
if(K){
F-=G=K[H]||0;
P[I]-=G}
F+=P[++I]=~~(M.w||this.w)+N+(B[H]?E:0);
K=M.k}
P.total=F;
return P}
}
function f(){
var C={
}
,B={
oblique:"italic",italic:"oblique"}
;
this.add=function(D){
(C[D.style]||(C[D.style]={
}
))[D.weight]=D}
;
this.get=function(H,I){
var G=C[H]||C[B[H]]||C.normal||C.italic||C.oblique;
if(!G){
return null}
I={
normal:400,bold:700}
[I]||parseInt(I,10);
if(G[I]){
return G[I]}
var E={
1:1,99:0}
[I%100],K=[],F,D;
if(E===undefined){
E=I>400}
if(I==500){
I=400}
for(var J in G){
if(!k(G,J)){
continue}
J=parseInt(J,10);
if(!F||J<F){
F=J}
if(!D||J>D){
D=J}
K.push(J)}
if(I<F){
I=F}
if(I>D){
I=D}
K.sort(function(M,L){
return(E?(M>=I&&L>=I)?M<L:M>L:(M<=I&&L<=I)?M>L:M<L)?-1:1}
);
return G[K[0]]}
}
function r(){
function D(F,G){
if(F.contains){
return F.contains(G)}
return F.compareDocumentPosition(G)&16}
function B(G){
var F=G.relatedTarget;
if(!F||D(this,F)){
return}
C(this,G.type=="mouseover")}
function E(F){
C(this,F.type=="mouseenter")}
function C(F,G){
setTimeout(function(){
var H=d.get(F).options;
m.replace(F,G?h(H,H.hover):H,true)}
,10)}
this.attach=function(F){
if(F.onmouseenter===undefined){
q(F,"mouseover",B);
q(F,"mouseout",B)}
else{
q(F,"mouseenter",E);
q(F,"mouseleave",E)}
}
}
function u(){
var C=[],D={
}
;
function B(H){
var E=[],G;
for(var F=0;
G=H[F];
++F){
E[F]=C[D[G]]}
return E}
this.add=function(F,E){
D[F]=C.push(E)-1}
;
this.repeat=function(){
var E=arguments.length?B(arguments):C,F;
for(var G=0;
F=E[G++];
){
m.replace(F[0],F[1],true)}
}
}
function A(){
var D={
}
,B=0;
function C(E){
return E.cufid||(E.cufid=++B)}
this.get=function(E){
var F=C(E);
return D[F]||(D[F]={
}
)}
}
function a(B){
var D={
}
,C={
}
;
this.extend=function(E){
for(var F in E){
if(k(E,F)){
D[F]=E[F]}
}
return this}
;
this.get=function(E){
return D[E]!=undefined?D[E]:B[E]}
;
this.getSize=function(F,E){
return C[F]||(C[F]=new n.Size(this.get(F),E))}
;
this.isUsable=function(){
return !!B}
}
function q(C,B,D){
if(C.addEventListener){
C.addEventListener(B,D,false)}
else{
if(C.attachEvent){
C.attachEvent("on"+B,function(){
return D.call(C,window.event)}
)}
}
}
function v(C,B){
var D=d.get(C);
if(D.options){
return C}
if(B.hover&&B.hoverables[C.nodeName.toLowerCase()]){
b.attach(C)}
D.options=B;
return C}
function j(B){
var C={
}
;
return function(D){
if(!k(C,D)){
C[D]=B.apply(null,arguments)}
return C[D]}
}
function c(F,E){
var B=n.quotedList(E.get("fontFamily").toLowerCase()),D;
for(var C=0;
D=B[C];
++C){
if(i[D]){
return i[D].get(E.get("fontStyle"),E.get("fontWeight"))}
}
return null}
function g(B){
return document.getElementsByTagName(B)}
function k(C,B){
return C.hasOwnProperty(B)}
function h(){
var C={
}
,B,F;
for(var E=0,D=arguments.length;
B=arguments[E],E<D;
++E){
for(F in B){
if(k(B,F)){
C[F]=B[F]}
}
}
return C}
function o(E,M,C,N,F,D){
var K=document.createDocumentFragment(),H;
if(M===""){
return K}
var L=N.separate;
var I=M.split(p[L]),B=(L=="words");
if(B&&t){
if(/^\s/.test(M)){
I.unshift("")}
if(/\s$/.test(M)){
I.push("")}
}
for(var J=0,G=I.length;
J<G;
++J){
H=z[N.engine](E,B?n.textAlign(I[J],C,J,G):I[J],C,N,F,D,J<G-1);
if(H){
K.appendChild(H)}
}
return K}
function l(D,M){
var C=D.nodeName.toLowerCase();
if(M.ignore[C]){
return}
var E=!M.textless[C];
var B=n.getStyle(v(D,M)).extend(M);
var F=c(D,B),G,K,I,H,L,J;
if(!F){
return}
for(G=D.firstChild;
G;
G=I){
K=G.nodeType;
I=G.nextSibling;
if(E&&K==3){
if(H){
H.appendData(G.data);
D.removeChild(G)}
else{
H=G}
if(I){
continue}
}
if(H){
D.replaceChild(o(F,n.whiteSpace(H.data,B,H,J),B,M,G,D),H);
H=null}
if(K==1){
if(G.firstChild){
if(G.nodeName.toLowerCase()=="cufon"){
z[M.engine](F,null,B,M,G,D)}
else{
arguments.callee(G,M)}
}
J=G}
}
}
var t=" ".split(/\s+/).length==0;
var d=new A();
var b=new r();
var y=new u();
var e=false;
var z={
}
,i={
}
,w={
autoDetect:false,engine:null,forceHitArea:false,hover:false,hoverables:{
a:true}
,ignore:{
applet:1,canvas:1,col:1,colgroup:1,head:1,iframe:1,map:1,optgroup:1,option:1,script:1,select:1,style:1,textarea:1,title:1,pre:1}
,printable:true,selector:(window.Sizzle||(window.jQuery&&function(B){
return jQuery(B)}
)||(window.dojo&&dojo.query)||(window.Ext&&Ext.query)||(window.YAHOO&&YAHOO.util&&YAHOO.util.Selector&&YAHOO.util.Selector.query)||(window.$$&&function(B){
return $$(B)}
)||(window.$&&function(B){
return $(B)}
)||(document.querySelectorAll&&function(B){
return document.querySelectorAll(B)}
)||g),separate:"words",textless:{
dl:1,html:1,ol:1,table:1,tbody:1,thead:1,tfoot:1,tr:1,ul:1}
,textShadow:"none"}
;
var p={
words:/\s/.test("\u00a0")?/[^\S\u00a0]+/:/\s+/,characters:"",none:/^/}
;
m.now=function(){
x.ready();
return m}
;
m.refresh=function(){
y.repeat.apply(y,arguments);
return m}
;
m.registerEngine=function(C,B){
if(!B){
return m}
z[C]=B;
return m.set("engine",C)}
;
m.registerFont=function(D){
if(!D){
return m}
var B=new s(D),C=B.family;
if(!i[C]){
i[C]=new f()}
i[C].add(B);
return m.set("fontFamily",'"'+C+'"')}
;
m.replace=function(D,C,B){
C=h(w,C);
if(!C.engine){
return m}
if(!e){
n.addClass(x.root(),"cufon-active cufon-loading");
n.ready(function(){
n.addClass(n.removeClass(x.root(),"cufon-loading"),"cufon-ready")}
);
e=true}
if(C.hover){
C.forceHitArea=true}
if(C.autoDetect){
delete C.fontFamily}
if(typeof C.textShadow=="string"){
C.textShadow=n.textShadow(C.textShadow)}
if(typeof C.color=="string"&&/^-/.test(C.color)){
C.textGradient=n.gradient(C.color)}
else{
delete C.textGradient}
if(!B){
y.add(D,arguments)}
if(D.nodeType||typeof D=="string"){
D=[D]}
n.ready(function(){
for(var F=0,E=D.length;
F<E;
++F){
var G=D[F];
if(typeof G=="string"){
m.replace(C.selector(G),C,true)}
else{
l(G,C)}
}
}
);
return m}
;
m.set=function(B,C){
w[B]=C;
return m}
;
return m}
)();
Cufon.registerEngine("canvas",(function(){
var b=document.createElement("canvas");
if(!b||!b.getContext||!b.getContext.apply){
return}
b=null;
var a=Cufon.CSS.supports("display","inline-block");
var e=!a&&(document.compatMode=="BackCompat"||/frameset|transitional/i.test(document.doctype.publicId));
var f=document.createElement("style");
f.type="text/css";
f.appendChild(document.createTextNode(("cufon{
text-indent:0;
}
@media screen,projection{
cufon{
display:inline;
display:inline-block;
position:relative;
vertical-align:middle;
"+(e?"":"font-size:1px;
line-height:1px;
")+"}
cufon cufontext{
display:-moz-inline-box;
display:inline-block;
width:0;
height:0;
overflow:hidden;
text-indent:-10000in;
}
"+(a?"cufon canvas{
position:relative;
}
":"cufon canvas{
position:absolute;
}
")+"}
@media print{
cufon{
padding:0;
}
cufon canvas{
display:none;
}
}
").replace(/;
/g,"!important;
")));
document.getElementsByTagName("head")[0].appendChild(f);
function d(p,h){
var n=0,m=0;
var g=[],o=/([mrvxe])([^a-z]*)/g,k;
generate:for(var j=0;
k=o.exec(p);
++j){
var l=k[2].split(",");
switch(k[1]){
case"v":g[j]={
m:"bezierCurveTo",a:[n+~~l[0],m+~~l[1],n+~~l[2],m+~~l[3],n+=~~l[4],m+=~~l[5]]}
;
break;
case"r":g[j]={
m:"lineTo",a:[n+=~~l[0],m+=~~l[1]]}
;
break;
case"m":g[j]={
m:"moveTo",a:[n=~~l[0],m=~~l[1]]}
;
break;
case"x":g[j]={
m:"closePath"}
;
break;
case"e":break generate}
h[g[j].m].apply(h,g[j].a)}
return g}
function c(m,k){
for(var j=0,h=m.length;
j<h;
++j){
var g=m[j];
k[g.m].apply(k,g.a)}
}
return function(V,w,P,t,C,W){
var k=(w===null);
if(k){
w=C.getAttribute("alt")}
var A=V.viewBox;
var m=P.getSize("fontSize",V.baseSize);
var B=0,O=0,N=0,u=0;
var z=t.textShadow,L=[];
if(z){
for(var U=z.length;
U--;
){
var F=z[U];
var K=m.convertFrom(parseFloat(F.offX));
var I=m.convertFrom(parseFloat(F.offY));
L[U]=[K,I];
if(I<B){
B=I}
if(K>O){
O=K}
if(I>N){
N=I}
if(K<u){
u=K}
}
}
var Z=Cufon.CSS.textTransform(w,P).split("");
var E=V.spacing(Z,~~m.convertFrom(parseFloat(P.get("letterSpacing"))||0),~~m.convertFrom(parseFloat(P.get("wordSpacing"))||0));
if(!E.length){
return null}
var h=E.total;
O+=A.width-E[E.length-1];
u+=A.minX;
var s,n;
if(k){
s=C;
n=C.firstChild}
else{
s=document.createElement("cufon");
s.className="cufon cufon-canvas";
s.setAttribute("alt",w);
n=document.createElement("canvas");
s.appendChild(n);
if(t.printable){
var S=document.createElement("cufontext");
S.appendChild(document.createTextNode(w));
s.appendChild(S)}
}
var aa=s.style;
var H=n.style;
var j=m.convert(A.height);
var Y=Math.ceil(j);
var M=Y/j;
var G=M*Cufon.CSS.fontStretch(P.get("fontStretch"));
var J=h*G;
var Q=Math.ceil(m.convert(J+O-u));
var o=Math.ceil(m.convert(A.height-B+N));
n.width=Q;
n.height=o;
H.width=Q+"px";
H.height=o+"px";
B+=A.minY;
H.top=Math.round(m.convert(B-V.ascent))+"px";
H.left=Math.round(m.convert(u))+"px";
var r=Math.max(Math.ceil(m.convert(J)),0)+"px";
if(a){
aa.width=r;
aa.height=m.convert(V.height)+"px"}
else{
aa.paddingLeft=r;
aa.paddingBottom=(m.convert(V.height)-1)+"px"}
var X=n.getContext("2d"),D=j/A.height;
X.scale(D,D*M);
X.translate(-u,-B);
X.save();
function T(){
var x=V.glyphs,ab,l=-1,g=-1,y;
X.scale(G,1);
while(y=Z[++l]){
var ab=x[Z[l]]||V.missingGlyph;
if(!ab){
continue}
if(ab.d){
X.beginPath();
if(ab.code){
c(ab.code,X)}
else{
ab.code=d("m"+ab.d,X)}
X.fill()}
X.translate(E[++g],0)}
X.restore()}
if(z){
for(var U=z.length;
U--;
){
var F=z[U];
X.save();
X.fillStyle=F.color;
X.translate.apply(X,L[U]);
T()}
}
var q=t.textGradient;
if(q){
var v=q.stops,p=X.createLinearGradient(0,A.minY,0,A.maxY);
for(var U=0,R=v.length;
U<R;
++U){
p.addColorStop.apply(p,v[U])}
X.fillStyle=p}
else{
X.fillStyle=P.get("color")}
T();
return s}
}
)());
Cufon.registerEngine("vml",(function(){
var e=document.namespaces;
if(!e){
return}
e.add("cvml","urn:schemas-microsoft-com:vml");
e=null;
var b=document.createElement("cvml:shape");
b.style.behavior="url(#default#VML)";
if(!b.coordsize){
return}
b=null;
var h=(document.documentMode||0)<8;
document.write(('<style type="text/css">cufoncanvas{
text-indent:0;
}
@media screen{
cvml\\:shape,cvml\\:rect,cvml\\:fill,cvml\\:shadow{
behavior:url(#default#VML);
display:block;
antialias:true;
position:absolute;
}
cufoncanvas{
position:absolute;
text-align:left;
}
cufon{
display:inline-block;
position:relative;
vertical-align:'+(h?"middle":"text-bottom")+";
}
cufon cufontext{
position:absolute;
left:-10000in;
font-size:1px;
}
a cufon{
cursor:pointer}
}
@media print{
cufon cufoncanvas{
display:none;
}
}
</style>").replace(/;
/g,"!important;
"));
function c(i,j){
return a(i,/(?:em|ex|%)$|^[a-z-]+$/i.test(j)?"1em":j)}
function a(l,m){
if(m==="0"){
return 0}
if(/px$/i.test(m)){
return parseFloat(m)}
var k=l.style.left,j=l.runtimeStyle.left;
l.runtimeStyle.left=l.currentStyle.left;
l.style.left=m.replace("%","em");
var i=l.style.pixelLeft;
l.style.left=k;
l.runtimeStyle.left=j;
return i}
function f(l,k,j,n){
var i="computed"+n,m=k[i];
if(isNaN(m)){
m=k.get(n);
k[i]=m=(m=="normal")?0:~~j.convertFrom(a(l,m))}
return m}
var g={
}
;
function d(p){
var q=p.id;
if(!g[q]){
var n=p.stops,o=document.createElement("cvml:fill"),i=[];
o.type="gradient";
o.angle=180;
o.focus="0";
o.method="sigma";
o.color=n[0][1];
for(var m=1,l=n.length-1;
m<l;
++m){
i.push(n[m][0]*100+"% "+n[m][1])}
o.colors=i.join(",");
o.color2=n[l][1];
g[q]=o}
return g[q]}
return function(ac,G,Y,C,K,ad,W){
var n=(G===null);
if(n){
G=K.alt}
var I=ac.viewBox;
var p=Y.computedFontSize||(Y.computedFontSize=new Cufon.CSS.Size(c(ad,Y.get("fontSize"))+"px",ac.baseSize));
var y,q;
if(n){
y=K;
q=K.firstChild}
else{
y=document.createElement("cufon");
y.className="cufon cufon-vml";
y.alt=G;
q=document.createElement("cufoncanvas");
y.appendChild(q);
if(C.printable){
var Z=document.createElement("cufontext");
Z.appendChild(document.createTextNode(G));
y.appendChild(Z)}
if(!W){
y.appendChild(document.createElement("cvml:shape"))}
}
var ai=y.style;
var R=q.style;
var l=p.convert(I.height),af=Math.ceil(l);
var V=af/l;
var P=V*Cufon.CSS.fontStretch(Y.get("fontStretch"));
var U=I.minX,T=I.minY;
R.height=af;
R.top=Math.round(p.convert(T-ac.ascent));
R.left=Math.round(p.convert(U));
ai.height=p.convert(ac.height)+"px";
var F=Y.get("color");
var ag=Cufon.CSS.textTransform(G,Y).split("");
var L=ac.spacing(ag,f(ad,Y,p,"letterSpacing"),f(ad,Y,p,"wordSpacing"));
if(!L.length){
return null}
var k=L.total;
var x=-U+k+(I.width-L[L.length-1]);
var ah=p.convert(x*P),X=Math.round(ah);
var O=x+","+I.height,m;
var J="r"+O+"ns";
var u=C.textGradient&&d(C.textGradient);
var o=ac.glyphs,S=0;
var H=C.textShadow;
var ab=-1,aa=0,w;
while(w=ag[++ab]){
var D=o[ag[ab]]||ac.missingGlyph,v;
if(!D){
continue}
if(n){
v=q.childNodes[aa];
while(v.firstChild){
v.removeChild(v.firstChild)}
}
else{
v=document.createElement("cvml:shape");
q.appendChild(v)}
v.stroked="f";
v.coordsize=O;
v.coordorigin=m=(U-S)+","+T;
v.path=(D.d?"m"+D.d+"xe":"")+"m"+m+J;
v.fillcolor=F;
if(u){
v.appendChild(u.cloneNode(false))}
var ae=v.style;
ae.width=X;
ae.height=af;
if(H){
var s=H[0],r=H[1];
var B=Cufon.CSS.color(s.color),z;
var N=document.createElement("cvml:shadow");
N.on="t";
N.color=B.color;
N.offset=s.offX+","+s.offY;
if(r){
z=Cufon.CSS.color(r.color);
N.type="double";
N.color2=z.color;
N.offset2=r.offX+","+r.offY}
N.opacity=B.opacity||(z&&z.opacity)||1;
v.appendChild(N)}
S+=L[aa++]}
var M=v.nextSibling,t,A;
if(C.forceHitArea){
if(!M){
M=document.createElement("cvml:rect");
M.stroked="f";
M.className="cufon-vml-cover";
t=document.createElement("cvml:fill");
t.opacity=0;
M.appendChild(t);
q.appendChild(M)}
A=M.style;
A.width=X;
A.height=af}
else{
if(M){
q.removeChild(M)}
}
ai.width=Math.max(Math.ceil(p.convert(k*P)),0);
if(h){
var Q=Y.computedYAdjust;
if(Q===undefined){
var E=Y.get("lineHeight");
if(E=="normal"){
E="1em"}
else{
if(!isNaN(E)){
E+="em"}
}
Y.computedYAdjust=Q=0.5*(a(ad,E)-parseFloat(ai.height))}
if(Q){
ai.marginTop=Math.ceil(Q)+"px";
ai.marginBottom=Q+"px"}
}
return y}
}
)());
CSS代码(style.css):
*{margin:0;padding:0;}
body{margin:0;padding:0;background:#000;text-align:center;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden;}
.fp_bgPattern{position:fixed;top:0px;left:0px;width:100%;height:100%;background:transparent url(../images/greyscale_natural_grunge3.jpg) repeat bottom left;opacity:0.3;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);}
img.fp_bgImage{position:fixed;top:0px;left:0px;width:100%;opacity:0.2;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);}
h1{font-weight:normal;margin:40px 0px 10px 0px;text-transform:uppercase;}
h2{font-weight:normal;font-size:22px;color:#FFED2F;margin-bottom:50px;}
a{outline:none;}
ul.fp_galleryList{list-style:none;position:relative;}
ul.fp_galleryList li{display:inline;margin:0px 30px;text-transform:uppercase;cursor:pointer;font-size:14px;text-shadow:0px 0px 1px #fff;}
ul.fp_galleryList li.current{color:#FFED2F;}
ul.fp_galleryList li.current:hover{border:none;}
ul.fp_galleryList li:hover{border-bottom:1px solid #fff;}
#fp_thumbContainer{position:relative;overflow:hidden;width:100%;margin:50px 0 30px 0;height:0px;/*240px to show*/
background-color:#111;-moz-box-shadow:0px 0px 10px #000 inset;-webkit-box-shadow:0px 0px 10px #000 inset;box-shadow:0px 0px 10px #000 inset;}
#fp_thumbScroller{position:relative;overflow:hidden;}
#fp_thumbScroller .container{position:relative;float:left;display:none;}
#fp_thumbScroller .content{float:left;margin-top:17px;}
#fp_thumbScroller .content div{margin:0px 5px;height:100%;}
#fp_thumbScroller img{border:3px solid #fff;height:200px;-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
#fp_thumbScroller a{padding:1px;}
.fp_overlay{display:none;position:fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:10;background:#000;opacity:0.8;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}
.fp_loading{display:none;position:fixed;top:50%;left:50%;margin:-35px 0px 0px -35px;background:#fff url(../images/loader.gif) no-repeat center center;width:70px;height:70px;z-index:9999;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000;opacity:0.7;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
.fp_next,.fp_prev,.fp_close{width:50px;height:50px;position:fixed;bottom:50%;margin-top:-25px;cursor:pointer;opacity:0.7;z-index:1000;-moz-box-shadow:0px 0px 3px #000;-webkit-box-shadow:0px 0px 3px #000;box-shadow:0px 0px 3px #000;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}
.fp_next:hover,.fp_prev:hover,.fp_close:hover{opacity:0.9;}
.fp_next{background:#fff url(../images/next.png) no-repeat center center;right:-50px;/*10 to show*/
}
.fp_prev{background:#fff url(../images/prev.png) no-repeat center center;left:-50px;/*10 to show*/
}
.fp_close{display:none;width:170px;text-align:center;padding-left:10px;text-transform:uppercase;line-height:50px;top:10px;right:10px;margin-top:0px;background:#fff url(../images/close.png) no-repeat 10px 50%;color:#000;}
.fp_scrollWrapper{display:none;width:300px;padding:10px 45px;height:12px;position:relative;margin:30px auto;background:#111;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.ui-widget-content{height:12px;background-color:#353535;position:relative;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.ui-slider-horizontal .ui-slider-handle{margin-top:5px;z-index:1;outline:none;cursor:pointer;border:none;width:15px;height:12px;background:#9b9b9b;margin-left:-7px;}
.ui-state-default{background-image:none;}
.fp_prev_thumb,.fp_next_thumb{background:transparent url(../images/nav.png) no-repeat top left;position:absolute;top:8px;width:15px;height:17px;cursor:pointer;}
.fp_prev_thumb:hover{background-position:left top;}
.fp_next_thumb:hover{background-position:right top;}
.fp_prev_thumb{left:10px;background-position:left bottom;}
.fp_next_thumb{right:10px;background-position:right bottom;}
img.fp_preview{position:fixed;z-index:999;border:3px solid #fff;-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
分享到QQ
分享到微博
微信扫一扫
