Dateien nach "js" hochladen

2023-11-02 18:48:06 +01:00
parent ca55d14816
commit 23eaf69a9f
10 changed files with 711 additions and 0 deletions
@@ -0,0 +1,79 @@
+// 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 --- */
+})