Javascript Bildüberblendung in script integrieren

[sdf0815]

Guten Tag zusammen,

ich habe folgenden Code (siehe unten) und möchte diesen um Überblendungen zwischen den Bildern ergänzen. (Deckraft langsam hochdrehen). Mir ist das bisher nicht mit dem "Standard"-Script von selfhtml gelungen.
Javascript kann ich relativ schlecht - daher bitte ich um Hilfe.

Danke schon mal =)

Hier könnt ihr euch den Stand der Dinge anschauen:


(Der Code ist nur Ein Auszug, daher kein body etc tag.)

<!-- galerie -->
				<script language="JavaScript">
				function Tauschen(Bildname) 
				{ 
            		eval("document['bildF'].src = " + Bildname + ".src"); 
				}
				</script>
				<?php  
	
					$url_ori = strrchr($_SERVER["SCRIPT_NAME"], '/');
					$url_ori = "still.php";
					$url_or = str_replace("/", "",$url_ori);  
					$url = str_replace(".php", "",$url_or);  
					$dir = "img/".$url."/";
					$file_array = Array();
				    
				    if(is_dir($dir))    
				    	{
				        $handle = opendir($dir);
				        if(is_resource($handle))    
				        	{
					            while($file = readdir($handle))    
					            {
					                if($file != "." && $file != "..")
					                    array_push($file_array, $file);
				            	}
				       		}
				    	}
				    	sort($file_array);
				 ?>
				<div style="overflow:auto; margin-top:60px; margin-left:0px; left:0px; " class="galerie">				</div>

				<div class="bildF" style=" position:relative; height:100%;  left:0px; right:0px;; width:100%; text-align:center;  ">
					<img src="<?php echo $dir.$value."001.jpg"; ?>" style="border:2px white solid; height:100%;  " alt="<?php echo $value;?>" name="bildF">
				</div>
				<div style="height:135px;"></div>
				<div style=" background-color:black; position:fixed; height:100px; bottom: 35px;left:5px; right:5px; overflow:auto; ">
				<table><tr>
				
			<?php
				$i == 1;
				while (list($key,$value) = each($file_array)) 
			    {
			    	echo '<script language="JavaScript">';
			    	echo 'var bild'.$i.' = new Image(); ';
			    	$file = $dir.$value;
			    	echo 'bild'.$i.'.src = "'.$file.'"; ';
			    	echo "</script>";
			    	echo '<td><a href="javascript:void(0)" Onclick="Tauschen('."'bild".$i."'".')"> ';
			    	echo '<img src="'.$file.'" height="75" border="0" alt="'.$values.'"></a></td> ';
					$i++; 

				}
		

				 
	
			?>
			</tr></table>
			</div>

 

[yoT!mO]

Das erste, was mir auf deiner Seite auffällt, ist, dass die Fotos alle unscharf sind; aber das nur nebenbei.

Nimm doch die .fadeIn() Funktion aus jQuery. Damit ists ganz einfach. Beim Klick auf ein neues Bild lege dieses einfach mit display: none versehen auf das alte und wende .fadeIn() auf das neue Bild an. Danach nur noch das alte Bild aus dem DOM entfernen und gut ist :-)

Gruß Timo

 

[sdf0815]

Hey Ho,

Fade in klingt schon mal gut - JQuery wäre auch kein Problem.

Naja die wirken Unscharf, weil die Bilder noch nicht in der richtigen Auflösung vorliegen. So wie die Website aufgebaut sein wird, ist es azuch praktisch unmöglich die Bilder immer scharf an zu zeigen - however ich denke da muss ich max height einführen. Es wir schließlich erst bei riesen Bildschirmen unscharf.

Zum eigentlichen Problem: Wie bekomme ich jetzt in die function(Tauschen) {eval} den kram (Fade) integriert? Ich brauch nicht unbedingt fertigen Code. Ne Roadmap wäre cool.

Dankeschön

 

[yoT!mO]

Ich hab dir doch schon nen Ansatz gegeben.
Ach ja: Es wäre vorteilhaft, wenn das Bild, das du neu anzeigen willst, schon im Browser Cache liegt, BEVOR du die .fadeIn() Funktion aufrufst.
Also:

// Methode um neues Bild anzuzeigen
img = neues Bild;
warten, bis img fertig geladen wurde;
img mit der CSS-Eigenschaft display: none versehen;
im DOM img über altes Bild legen;
.fadeIn() auf img anwenden;
altes Bild aus DOM entfernen;
ggf. nächstes Bild schon im Voraus laden;

Gruß Timo