Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

Nightflyer · 03-03-2006, 09:09

Hab mir gestern folgenden Code angesehen und festgestellt das er leider nur im IE funktioniert.

Hat jemand sowas schon browserkompatibel gemacht? Bzw. hat einer von euch ein Script rumliegen?
Falls nicht, was ich annhme, Tipps was ich beachten soll wenn ich das selber progge?
Ich dacht da jetzterst mal primär an div's in einem Container anstelle der im Script gegebenen unpraktischen Tabelle.

Nightflyer · 09-03-2006, 19:38

So, feddisch:

http://www.weixelbaumer.ch/gallery/gallery.html

gallery.html

HTML-Code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Yugop-Gallery</title>
		<meta name="Robots" content="NOINDEX" />
		<style type="text/css">
			body {
				background-color : #0066aa;
			}
			#yugop_container {
				margin : auto;
				border-bottom : 1px solid black;
				width : 100%;
				height : 120px;
			background-color : #004d80;
     		}
			.yugop_pictures {
				margin : 10px;
				font : bold 0.6em Verdana;
				color : #000000;
			}
			#big_container {
				border : 1px solid white;
				margin : 10px;
				padding : 10px;
				padding-left : 300px;
      		}
			#big_container span {
				margin : 20px;
				vertical-align : middle;
			}			
		</style>
		<script type="text/javascript" src="lib.js"></script>
	</head>
	<body onload="init_yugop();">
		<div id="yugop_container" onmouseover="set_interval(speed)" onmouseout="clear_interval( myinterval )">
		</div>
		<div id="big_container">
		</div>
		<div id="opacity"></div>
		<p>&nbsp;</p>
		<img src="http://www.w3.org/Icons/valid-xhtml10" /> 
	</body>
</html>

Code:

//Einstellungen

var yugop_images = new Array(
			new Array("PICT0511_klein.jpg","PICT0511.jpg","Fizzy und Holgus"),
			new Array("PICT0512_klein.jpg","PICT0512.jpg","Woran denkt Holgus?"),
			new Array("PICT0513_klein.jpg","PICT0513.jpg","Ladina, Fizzy's Freundin"),
			new Array("PICT0514_klein.jpg","PICT0514.jpg","Gemütliches Brettspiel"),
			new Array("PICT0515_klein.jpg","PICT0515.jpg",""),
			new Array("PICT0516_klein.jpg","PICT0516.jpg",""),
			new Array("PICT0517_klein.jpg","PICT0517.jpg","Fizzy itself"),
			new Array("PICT0518_klein.jpg","PICT0518.jpg","Schnösel, Fizzy's Bruder"),
			new Array("PICT0519_klein.jpg","PICT0519.jpg",""),
			new Array("PICT0520_klein.jpg","PICT0520.jpg",""),
			new Array("PICT0521_klein.jpg","PICT0521.jpg",""),
			new Array("PICT0522_klein.jpg","PICT0522.jpg","Nighty quer"),
			new Array("PICT0523_klein.jpg","PICT0523.jpg",""),
			new Array("PICT0524_klein.jpg","PICT0524.jpg",""),
			new Array("PICT0525_klein.jpg","PICT0525.jpg",""),
			new Array("PICT0526_klein.jpg","PICT0526.jpg",""),
			new Array("PICT0527_klein.jpg","PICT0527.jpg","Trinkspiele..."),
			new Array("PICT0528_klein.jpg","PICT0528.jpg",""),
			new Array("PICT0529_klein.jpg","PICT0529.jpg",""),
			new Array("PICT0530_klein.jpg","PICT0530.jpg",""),
			new Array("PICT0531_klein.jpg","PICT0531.jpg","Schösel sichtlich benebelt"),
			new Array("PICT0532_klein.jpg","PICT0532.jpg","Der Vorrat"),
			new Array("PICT0533_klein.jpg","PICT0533.jpg",""),
			new Array("PICT0534_klein.jpg","PICT0534.jpg",""),
			new Array("PICT0535_klein.jpg","PICT0535.jpg",""),
			new Array("PICT0536_klein.jpg","PICT0536.jpg",""),
			new Array("PICT0537_klein.jpg","PICT0537.jpg",""),
			new Array("PICT0538_klein.jpg","PICT0538.jpg",""),
			new Array("PICT0539_klein.jpg","PICT0539.jpg",""),
			new Array("PICT0540_klein.jpg","PICT0540.jpg","Bier ist alle"),
			new Array("PICT0541_klein.jpg","PICT0541.jpg","")
		);

var offset_left = 20; //Rechtsverschiebung
var img_width = 100; //Breite der Thumbnails
var img_height = 75; //Höhe der Thumbnails
var pics_desk_anz = Math.floor(screen.width / (img_width + 10)) - 1; //Anzahl sichtbarer Bilder
var path = "pics/"; //Pfad zu den Bildern und Thumbnails

//Ende Einstellungen

var speed = 0;
function init_yugop(){
	pics_yugop_anz = yugop_images.length;
	pics_pile_anz = pics_yugop_anz - pics_desk_anz;
	img_change = false;
	pics_desk = new Array();
	pics_pile = new Array();
	pics_temp = new Array();
	for(x=0;x<pics_yugop_anz;x++){
		if( x < pics_desk_anz ){
			//				Beschreibung, PosX, PosY, Grossnildname
			pics_desk[x] = new Array(yugop_images[x][0],yugop_images[x][2],0,0,yugop_images[x][1],"img"+x);
		}else{
			pics_pile[x-pics_desk_anz] = new Array(yugop_images[x][0],yugop_images[x][2],offset_left,0,yugop_images[x][1],"img"+x);
		}
	}
	writeimages( pics_desk );
	//debug();
}

function kick_left_img(){
	img_change = true;
	var id = pics_desk[0][5];
	document.getElementById(id).style.visibility = 'hidden';
	document.getElementById(id).style.left = 0+"px";
	pics_desk[0][2] = 0;
	pics_pile.push(pics_desk[0]); //Hinzufügen des linken Bildes an Stapelrückseite
	pics_desk.shift(); //Löschen des linken Bildes im Anzeigearray
	
	pics_pile[0][2] = right_border;
	var id = pics_pile[0][5];
	document.getElementById(id).style.visibility = 'visible';
	document.getElementById(id).style.left = right_border;
	pics_desk.push(pics_pile[0]); //Hinzufügen des ersten Bildes von Stapelvorderseite nach rechts
	pics_pile.shift(); //Löschen des letzen Bildes von Stapelvorderseite
	img_change = false;
}

function kick_right_img(){
	img_change = true;
	var id = pics_desk[pics_desk_anz-1][5];
	document.getElementById(id).style.visibility = 'hidden';
	document.getElementById(id).style.left = 0+"px";
	pics_desk[pics_desk_anz-1][2] = 0;
	pics_pile.unshift(pics_desk[pics_desk_anz-1]); //Hinzufügen des rechten Bildes an Stapelvorderseite
	pics_desk.pop(); //Löschen des rechten Bildes im Anzeigearray
	
	pics_pile[pics_pile_anz-1][2] = offset_left;	
	var id = pics_pile[pics_pile_anz-1][5];
	document.getElementById(id).style.left = offset_left+"px";
	pics_desk.unshift(pics_pile[pics_pile_anz-1]); //Hinzufügen des ersten Bildes von Stapelrückseite nach links
	document.getElementById(id).style.visibility = 'visible';
	pics_pile.pop(); //Löschen des ersten Bildes von Stapelrückseite
	img_change = false;
}	


function writeimages( pics_desk ){

	
	right_border = pics_desk_anz * (img_width + 10) + offset_left;
	
	var out = '';
	
	for( x=0; x<pics_desk_anz; x++ ){
		pics_desk[x][2] = (img_width + 10) * x + offset_left;
		var id = pics_desk[x][5];
		out += '<span id="'+id+'" class="yugop_pictures" style="position:absolute;left:'+pics_desk[x][2]+'px;visibility:visible;" onmouseover="setspeed(this);upscale(\''+pics_desk[x][4]+'\',\''+pics_desk[x][1]+'\');"><img src="'+path+''+pics_desk[x][0]+'" width="'+img_width+'" height="'+img_height+'" /><br />'+pics_desk[x][4]+'</span>';
	}
	for( x=0; x<pics_pile_anz; x++ ){
		pics_pile[x][2] = 0;
		var id = pics_pile[x][5];
		out += '<span id="'+id+'" class="yugop_pictures" style="position:absolute;left:'+pics_pile[x][2]+'px;visibility:hidden;" onmouseover="setspeed(this);upscale(\''+pics_pile[x][4]+'\',\''+pics_pile[x][1]+'\');"><img src="'+path+''+pics_pile[x][0]+'" width="'+img_width+'" height="'+img_height+'" /><br />'+pics_pile[x][4]+'</span>';
	}
	document.getElementById("yugop_container").innerHTML = out;
}

function upscale( pic_name, text ){
	document.getElementById("big_container").innerHTML = '<img src="'+path+''+pic_name+'" width="480" height="360" border="1"/><span>'+text+'</span>';
}

function move(speed){
	if( img_change != true ){
		for( y=0; y< pics_desk_anz; y++ ){
			pics_desk[y][2] = pics_desk[y][2] - speed;
			var id = pics_desk[y][5];
			document.getElementById(id).style.left = Math.round(pics_desk[y][2]) + "px";
			
			//Aus- und Einblenden der Bilder am Rand
			if( pics_desk[y][2] < offset_left - 10 ){
				kick_left_img() //Linkes Bild weg, rechts eins ran
			}
			if( pics_desk[y][2] > right_border + 10){
				kick_right_img(); //Rechtes Bild weg, links eins ran
			}
		}
	}
	//debug();
}


function set_interval(speed){
	myinterval = window.setInterval("move(speed)",50);
}



function setspeed(imgobj){
	if( document.all ){
		var mouseX = window.event.clientX;	
	}else{
		var mouseX = parseInt(imgobj.style.left);
	}
	
	var diff = mouseX - ((img_width + 10) * pics_desk_anz + offset_left)/2;
	speed = diff / 60;
}


function clear_interval(myinterval){
	window.clearInterval( myinterval );
}

function debug(){
	document.getElementById("anzeige").innerHTML = pics_desk.join("<br />");	
	document.getElementById("stapel").innerHTML = pics_pile.join("<br />");	
}

03-03-2006, 09:09	#1 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	YugOp Hab mir gestern folgenden Code angesehen und festgestellt das er leider nur im IE funktioniert. Hat jemand sowas schon browserkompatibel gemacht? Bzw. hat einer von euch ein Script rumliegen? Falls nicht, was ich annhme, Tipps was ich beachten soll wenn ich das selber progge? Ich dacht da jetzterst mal primär an div's in einem Container anstelle der im Script gegebenen unpraktischen Tabelle. __________________ (\__/) (='.'=) (")_(")

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln