under_construction/js/carusel.js

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 --- */
})