Bildwechsel als Header in 100% skaliert

supercat1510

supercat1510

Erfahrenes Mitglied
Ich hänge momentan an einem Problem mit einem Bildwechsel als Header.

Dieser ist immer zu 100% Breite skaliert, Je nachdem wie breit der Browser grade ist.

Das Problem ist, auf einer Seite funktioniert das ganze, auf einer anderen wiederrum nicht.

Der Javascript Part scheint aber bei beiden identisch zu sein.

http://www.hubertus-thumsee.de hier geht das ganze
http://www.hotel-theresenhof.de hier nicht.

Quellcode der für den Wechsel zuständig ist:
Code: 
function setimg(){
	bx = 1280;
	by = 538;
	wx = $(window).width();
	wy = $("#stage1").css("height");
	wy = wy.replace("px","");
	//jetzt = vormals.replace(/Hinz/g, "Kunz, geb. Hinz");
	
	fx = wx/bx;
	fy = wy/by;
	
	if (fy < fx) // immmer der größte Faktor ist ausschlaggebend
		{
		y = by *fx // neue Bildhöhe
		mg_korrektur = Math.round ((y-wy)/2)*-1;
		$("#testimg1").css('margin-top',mg_korrektur);
		$("#testimg1").css('margin-left',"0px");
		$("#testimg1").css('width',wx); //100%
		$("#testimg1").css('height',y);
		
		$("#testimg2").css('margin-top',mg_korrektur);
		$("#testimg2").css('margin-left',"0px");
		$("#testimg2").css('width',wx);
		$("#testimg2").css('height',y);
		}
	else
		{
		x = bx *fy // neue Bildbreite
		mg_korrektur = Math.round ((x-wx)/2)*-1;
		$("#testimg1").css('margin-top',"0px");
		$("#testimg1").css('margin-left',mg_korrektur);
		$("#testimg1").css('width',x);
		$("#testimg1").css('height',wy);
		
		$("#testimg2").css('margin-top',"0px");
		$("#testimg2").css('margin-left',mg_korrektur);
		$("#testimg2").css('width',x);
		$("#testimg2").css('height',wy);
		}
	//$("#ornamentimg").css('width',wx);
	//$("#ornamentimg").css('height',215); // fixer wert -> verzerrt
	//$("#textbalken_bottom").css('height',($(document).height()-500));
	
    $("#leftcontenttable").css('height',(300)); // erst verkürzen da sonst die Länge nicht mehr kürzer wird
	$("#leftcontenttable").css('height',($(document).height()-368));
	
	
	}

img = Array(); flag = Array();
imagelist = Array();

//***** Main
serie = 0;
imagelist[serie] = Array(); flag[serie] = Array(); img[serie] = Array();
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/standard/8.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/standard/1.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/standard/4.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/standard/7.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/standard/5.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/standard/6.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/standard/3.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/standard/2.jpg'; flag[serie][imagelist[serie].length] = false;

//***** Zimmer
serie = 1;
imagelist[serie] = Array(); flag[serie] = Array(); img[serie] = Array();
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/zimmer/9.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/zimmer/8.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/zimmer/1.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/zimmer/4.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/zimmer/7.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/zimmer/5.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/zimmer/6.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/zimmer/3.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/zimmer/2.jpg'; flag[serie][imagelist[serie].length] = false;
//***** Restaurant
serie = 2;
imagelist[serie] = Array(); flag[serie] = Array(); img[serie] = Array();
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/restaurant/8.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/restaurant/1.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/restaurant/4.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/restaurant/7.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/restaurant/5.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/restaurant/6.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/restaurant/3.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/restaurant/2.jpg'; flag[serie][imagelist[serie].length] = false;
//***** Impressum
serie = 3;
imagelist[serie] = Array(); flag[serie] = Array(); img[serie] = Array();
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/impressum/1.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/impressum/3.jpg'; flag[serie][imagelist[serie].length] = false;
imagelist[serie][imagelist[serie].length] = '/pixs/teaser/impressum/2.jpg'; flag[serie][imagelist[serie].length] = false;

function preload(group,nr){
	//alert(group+ " "+nr);
	img[group][nr] = new Image();
	img[group][nr].src = imagelist[group][nr];
	next = nr + 1;
	if (next < imagelist[group].length) {
		img[group][nr].onload = function() {flag[group][nr] = true; preload(group,next);}
	} else {
		img[group][nr].onload = function() {flag[group][nr] = true; }

		nextgroup = group+1;
		if (nextgroup < imagelist.length)
			{preload(nextgroup,0);}
	}
	
}

actual_img = -1;
actual_group = 0;
actual_layer = 1;

function changer()
	{
	setimg()
	new_img = actual_img +1;
	if (new_img >= img[actual_group].length) {new_img = 0;}
	if (flag[actual_group][new_img] == true)
		{
		if (actual_layer == 1)
			{
			$("#testimg2").attr("src",img[actual_group][new_img].src);
			debugtext = "2 bekommt Src. 1 fadet jetzt aus";
			$("#stage1").animate({opacity: 0},2000,"linear",function()
				{
				actual_layer = 2;
				actual_img = new_img;
				debugtext = "2 bekommt Src. 1 fadet jetzt aus - FERTIG";
				window.setTimeout("changer()", 3000);
				});
			}
		else
			{
			$("#testimg1").attr("src",img[actual_group][new_img].src);
			debugtext = "1 bekommt Src. 1 fadet jetzt ein";
			$("#stage1").animate({opacity: 1},2000,"linear",function()
				{
				actual_layer = 1;
				actual_img = new_img;
				debugtext = "1 bekommt Src. 1 fadet jetzt ein - FERTIG";
				window.setTimeout("changer()", 3000);
				});
			}
		}
	else
		{
		window.setTimeout("changer()", 500);
		}
	}
	
function deb_out()
	{
	$("#debugger").html(""+flag[1][0]+" "+flag[1][1]+" "+flag[1][2]+" "+flag[1][3]+" - Act: "+actual_group+" - "+actual_img+" - Ly: "+actual_layer+"| Z-Index: "+$("#stage1").css("z-index")+" - "+$("#stage2").css("z-index")+" | Window: "+wx+" - "+wy+"<br>"+debugtext );
	$("#debugger").html("WTC: "+wtc.join(",")+"<br>INSTR: "+m_instr.join(",")+"<br>"+debugtext );
	window.setTimeout("deb_out()", 100);
	}

Welche Serie aufgerufen wird läuft über folgendes Snippet:
Code: 
		$('#menue_startseite').bind('click',function(e) {getcontent2(0,'leftcontent','/content/startseite/startseite_left.php','rightcontent','/content/startseite/startseite_right.php');});
		$('#menue_zimmer').bind('click',function(e) {getcontent2(1,'leftcontent','/content/zimmer/zimmer_left.php','rightcontent','/content/zimmer/zimmer_right.php');});

...getcontent2(0... ruft die serie 0 auf
...getcontent2(1... ruft die serie 1 auf
etc...

Getcontent ist hier definiert
Code: 
function getcontent2(group,ly,loc,ly2,loc2){
	if (actual_group != group) {actual_group = group; actual_img = 0};
	document.getElementById("contentFRM").src="/loader.php?id="+ly+"&loc="+escape(loc)+"&id2="+ly2+"&loc2="+escape(loc2);
	}

Weiß mir langsam keinen Rat mehr woran das liegen könnte.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück