✔ Zufallsbild größe an Div automatisch anpassen

[skydragon]

Hallo ich hab ein kleines Problem
auf meiner Webseite werden Bilder zufällig aus einem Ordner angezeigt, diese werden in einem DIV (weite 150px höhe 158px)dargestellt. mein problem ist, wenn ich keine begrenzung angebe sprngt mir das bild mein layout. gebe ich von vornherein die größe des bildes an habe ich verzerrungen drin, was besonders blöd bei hochkant bildern aussieht.

Mein Skript:

$Verzeichnis = "./fun";
 
if($Verzeichniszeiger = opendir($Verzeichnis)) 
{
	while($Datei = readdir($Verzeichniszeiger))
	{
		if(!is_dir($Datei))
		{
			$Dateien[] = $Datei;
		}
	}

	closedir($Verzeichniszeiger);
}

echo"<img src=\"",
	$Verzeichnis,
	"/",
	$Dateien[rand(0, count($Dateien))],
	"\" width = \"150\" height = \"156\" 
  alt = \"$Datei\">";

wobei weite und höhe von mir jetzt vorgegeben sind.
Gerald_Eggert da könnt ihr euch ansehen was ich meine.

Skydragon

 

[tuxx]

Hab sowas mal per JS als Diashow gebastelt:

var fadespeed = 60;
var showtime = 1000000;
var picnr = 1;
var bildhoehe = 400;
var bildbreite = 600;

var test = "show();";
var anzeige = "Bild " + picnr;
var bildnun = "../bild/bild" + picnr + ".jpg";
var stop = "Anhalten";
var start = "Diashow";
var fensterbreite = this.window.innerWidth;
var fensterhoehe = this.window.innerHeight;
var linkerrand = ((fensterbreite - bildbreite) / 2);
var obererrand = ((fensterhoehe - bildhoehe) / 2);

function show(){
	document.form1.zone.innerText = stop;
	document.form1.speed.disabled = true;
	test = "stopshow();";
	var geht = window.setInterval("diashow(); blende();", (document.form1.speed.value * 1000));
}

function stopshow(){
	document.form1.zone.innerText = start;
	document.form1.speed.disabled = false;
	test = "show();";
	window.clearInterval(geht);
	check();
	anzeigen();
	quellenbauen();
	messen();
}

function weiter(){
	picnr++;
	check();
	anzeigen();
	quellenbauen();
	messen();
}

function zurueck(){
	picnr--;
	check();
	anzeigen();
	quellenbauen();
	messen();
}

function goPix(){
	check();
	anzeigen();
	quellenbauen();
	messen();
}

function diashow(){
	if (document.form1.zone.innerText == start) stopshow();
	picnr++;
	check();
	anzeigen();
	quellenbauen();
	messen();
}

function messen(){
	document.all.bildanzeiger.style.left = linkerrand;
	document.all.bildanzeiger.style.top = obererrand;
	document.all.bild.style.width = bildbreite;
	document.all.bild.style.height = bildhoehe;
}

function check(){
	if (document.all.bild.style.height == 0 || picnr == 0) picnr = 1;
}

function anzeigen(){
	anzeige = "Bild " + picnr;
	galtext2.innerText = anzeige;
}

function quellenbauen(){
	bildnun = "../bild/bild" + picnr + ".jpg";
	document.images[0].src = bildnun;
}

function blende(){
	for (t = 1; t < bildhoehe; ++t){
		document.all.bild.style.height = t;
		for (abcd = 1; abcd < fadespeed; abcd++){}
	}
}

function bildgroesse(){
	for (t = 1; t < bildhoehe; ++t){
		document.all.bild.style.height = t;
	}
}

function ausfade(){
	for (s = bildbreite; s > 1; s--){
		document.all.bild.style.width = s;
		for (q = 1; q < fadespeed; q++){}
	}
	document.all.bild.style.width = bildbreite;
}

 

[Dr Dau]

Hallo!

Geht auch ohne JavaScript.....

Leicht abgeänderte Version von php.net - getimagesize():

<?php
$Verzeichnis = "./fun/"; 
$max_width   = "150";
$max_height  = "156";
 
if($Verzeichniszeiger = opendir($Verzeichnis)) { 
     while($Datei = readdir($Verzeichniszeiger)) { 
          if(!is_dir($Datei)) { 
               $Dateien[] = $Datei; 
          } 
     } 
     closedir($Verzeichniszeiger); 
} 

$image = $Dateien[rand(0, count($Dateien)-1)];
$size = getimagesize($Verzeichnis.$image);
$width = $size[0];
$height = $size[1];
$width_ratio = $max_width / $width;
$height_ratio = $max_height / $height;
         
if(($width < $max_width) AND ($height < $max_height)) {
     $thumb_width = $width;
     $thumb_width = $height;
} else {
     if(($width_ratio * $height) < $max_height) {
          $thumb_width = $max_width;
          $thumb_height = round($width_ratio * $height, 0);
     } else {
          $thumb_width = round($height_ratio * $width, 0);
          $thumb_height = $max_height;
     }
}
 
echo '<img src="'.$Verzeichnis.$image.'" width="'.$thumb_width.'" height="'.$thumb_height.'" alt="'.$image.'">';
?>

Du solltest Dir Deine Seite auch mal mit verschiedenen IE Versionen und Auflösungen ansehen.

Beim IE 6 mit 800x600 ist vom oberen Banner nurnoch ein ganz schmaler Streifen zu sehen und von den Elementen auf der Linken Seite ist nur knapp die Hälfte zu sehen.

Beim IE 5.5 mit 1024x768 sind die Elemente teilweise unterschiedlich breit und horizontal überlappend, teilweise auch vertikal überlappend.
Und die Zwischenräume der einzelnen Elemente sind praktisch überall unterschiedlich gross.

Gruss Dr Dau

 

[skydragon]

naja optimiert ist die seite auf 1024*768 und auf arbeit hab ich das dann mal an nem 15"tft getestet bis ich die seite dort ohne scrollen dargestellt bekommen habe.

Teste grad das skript bekomme jetzt aber ne fehlermeldung:
Warning: getimagesize(): Unable to access ./fun/schneemann.jpg in /srv/www/web4/html/zufallsbild.php on line 17

Warning: getimagesize(./fun/schneemann.jpg): failed to open stream: No such file or directory in /srv/www/web4/html/zufallsbild.php on line 17

Warning: Division by zero in /srv/www/web4/html/zufallsbild.php on line 20

Warning: Division by zero in /srv/www/web4/html/zufallsbild.php

das bild das er öffenen möchte ist gar nicht in diesem verzeichnis sondern im verzeichnis banner. welches woanders liegt.

 

[skydragon]

problem behoben
war ne variablen überschneidung mit einem anderen skript was glecihzeitig geladen wird

vielen Dank für die schnelle Hilfe

 

[hups1803]

Hallo, wie kann mann das script innerhalb einer php seite aufrufen

 

[ds1982]

Kann mann da auch noch nen "on mouse over" code einfügen zum eventuellen vergrössern des bildes!

Ich meine: Auf der Seite sieht mann es etwas verkleinert! Wenn man mit der maus drüber fährt wirts grösser! mit der maus wieder weg wieder kleiner!

wäre toll wenn mir wer helfen könnte!

mfg