80 lines
2.2 KiB
JavaScript
80 lines
2.2 KiB
JavaScript
|
// JavaScript
|
||
|
|
|
||
|
|
$(document).ready(function(){
|
||
|
|
|
||
|
|
/* --- BEGIN Carusel --- */
|
||
|
|
var $spacing = 216;
|
||
|
|
var $frames = new Array();
|
||
|
|
var $opacity = 0.8;
|
||
|
|
|
||
|
|
$('#carusel ul li').each(function(){
|
||
|
|
$(this).css({'position' : 'absolute', 'display' : 'block', 'left' : '1000px'});
|
||
|
|
$('img', $(this)).animate({'opacity' : $opacity});
|
||
|
|
$frames.push($(this));
|
||
|
|
});
|
||
|
|
|
||
|
|
if($frames[0]) { $frames[0].css('left', 0); }
|
||
|
|
if($frames[1]) { $frames[1].css('left', $spacing); }
|
||
|
|
if($frames[2]) { $frames[2].css('left', $spacing * 2); }
|
||
|
|
|
||
|
|
if($frames.length > 3) {
|
||
|
|
$('#carusel .left').click(function(event){
|
||
|
|
toLeft(event);
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#carusel .right').click(function(event){
|
||
|
|
toRight(event);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var toLeft = function(event) {
|
||
|
|
$frames[0].animate({'left' : $spacing}, 'slow');
|
||
|
|
$frames[1].animate({'left' : $spacing * 2}, 'slow');
|
||
|
|
$frames[2].animate({'left' : $spacing * 3}, 'slow');
|
||
|
|
$frames[$frames.length - 1]
|
||
|
|
.css('left', -$spacing)
|
||
|
|
.animate({'left' : 0}, 'slow', function(){
|
||
|
|
$frames.unshift($(this));
|
||
|
|
$frames.pop();
|
||
|
|
});
|
||
|
|
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
|
||
|
|
var toRight = function(event) {
|
||
|
|
$frames[0]
|
||
|
|
.animate({'left' : -$spacing}, 'slow', function(){
|
||
|
|
$frames.push($(this));
|
||
|
|
$frames.shift();
|
||
|
|
});
|
||
|
|
|
||
|
|
$frames[1].animate({'left' : 0}, 'slow');
|
||
|
|
$frames[2].animate({'left' : $spacing}, 'slow');
|
||
|
|
$frames[3]
|
||
|
|
.css('left', $spacing * 3)
|
||
|
|
.animate({'left' : $spacing * 2}, 'slow');
|
||
|
|
event.preventDefault();
|
||
|
|
}
|
||
|
|
/* --- END Carusel --- */
|
||
|
|
|
||
|
|
/* --- Begin image hint and opacity : 1 --- */
|
||
|
|
$('#carusel li img').each(function(){
|
||
|
|
if($(this).attr('alt')) {
|
||
|
|
var $hint = $('<div></div>').addClass('hint');
|
||
|
|
$('<p>' + $(this).attr('alt') + '</p>').appendTo($hint);
|
||
|
|
$($hint).insertAfter($(this));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#carusel li img').mouseover(function(){
|
||
|
|
$(this).animate({'opacity' : 1});
|
||
|
|
$(this).next().fadeIn();
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#carusel li img').mouseout(function(){
|
||
|
|
$(this).animate({'opacity' : $opacity});
|
||
|
|
$(this).next().fadeOut();
|
||
|
|
});
|
||
|
|
/* --- END image hint opacity : 1 --- */
|
||
|
|
})
|