Bellissima galleria in jquery

Lug 30

Jquery cycle potete scaricarlo da qui.

Codice Sorgente:

body{background-color:#000;color:#fff;text-align:center;font-size:12px;}

a{color:#000;}

a img{border:none;}

#contenitore{width:959px;margin:0 auto;position:relative;}

#photos{background-color:#fff;width:959px;height:420px;}

#photos img{width:939px;height:400px;margin:10px;padding:0;}

#thumbnails{width:959px;height:50px;margin:10px 0 0 0;padding:0;}

#thumbnails ul{margin:0;padding:0;text-align:center;}

#thumbnails ul li{margin:0 10px 0 0;padding:0 0 10px 0;display:inline;}

#thumbnails a img{height:50px;border:1px solid #fff;}

#thumbnails a.activeSlide img{ border:1px solid #666;}

#navPhotos{position:absolute;top:195px;height:30px;z-index:1000;line-height:30px;width:959px;}

#navPhotos a{color:#333333;font-size:1em;text-transform:uppercase;font-weight:bold;padding:5px 15px;overflow:visible;outline:none;}

#navPhotos a:hover{color:#666666;}

#navPhotos #prev{float:left;}

#navPhotos #next{float:right;}

#description{position:absolute;top:390px;left:10px;height:30px;z-index:1000;line-height:30px;width:939px;background-color:#fff;}

#description p{margin:0;padding:0;text-transform:uppercase;color:#333;}

$(document).ready(function() {

$(‘#photos’).cycle({

fx: ‘fade’,

speed: 500,

timeout: 4000,

pager: ‘#thumbnails ul’,

next: ‘#next’,

prev: ‘#prev’,

before: onBefore,

after: onAfter,

pagerAnchorBuilder: function(idx, slide) {

return ‘

‘;

}

});

function onBefore() {

$(‘#description p’).fadeOut(‘1000′);

}

function onAfter() {

$(‘#description p’).fadeIn(‘1000′);

$(‘#description’).html(‘

‘ + this.alt + ‘

‘);

}

});