Bildervorschau

Akula · 16 Dezember 2008

Hallo,

erstmal vorweg, ich weiß nicht ob das Thema hier richtig ist...
und nun zum Problem: Ich möchte gerne Bilder auf die Homepage stellen und zwar oben das Bild in Groß und darunter, alle Bilder in klein, aber nur in einer Reihe, aber so das man links und rechts scrollen kann. Womit kann ich das Programmieren und wie sollte ich am Besten anfangen?

Gruß Akula

fiedel · 16 Dezember 2008

Das klappt entweder mit JavaScript oder Flash! Google einfach mal, da gibts bestimmt eine Haufen Tutorials!

Akula · 16 Dezember 2008

Wäre es möglich mir mal eins zu Empfehlen, ich bin zu blöd eins zu finden....

Gruß Akula

CGollhardt · 17 Dezember 2008

Mit php ist es auch möglich

Hier ein Ausschnitt aus meiner Homepage

PHP:

<?php
$heightBigThumb = 355;
$heightSmallThump = 85;
$heightCollageThump = 105;
$style = 'margin:10px;';
if (isset($_GET['album'])) {
	$album = $_GET['album'];
	$Verzeichnisse = ListDir($DirGrafik.$verzeichnisse["archiv"]."/");
	$Verzeichniss = $Verzeichnisse[$album];
	$Bilder = ListData($Verzeichniss."/","jpg");
	if ($_GET['view'] == 2) {
		echo '<p align="center">';
		for ($x = 0; $x < count($Bilder); $x++) {
			$Bild = strtok(basename($Bilder[$x]),".");
			$urlGrosseGrafik = 'grafik.php?id=archiv&verzeichniss='.$album.'&bild='.$Bild;
			echo '<a href="'.$urlGrosseGrafik.'" target="_blank">';
			echo grafik('archiv&VAdresse='.$Verzeichniss.'&VNr='.$album.'&bild='.$Bild,1,'center','Großes Bild',$style,'',$heightCollageThump);
			echo '</a>';
		}
		echo '</p>'."\n";
		echo '<p align="center"><a href="'.$URL_Bilder."&album=".$album.'&view=1">Filmstreifen anzeigen</a></p>'."\n";
	} else {
		if ((!isset($_GET['id'])) || ($_GET['id'] < 1) || ($_GET['id'] > count($Bilder))) $AktuellesBild = 1; else $AktuellesBild = $_GET['id'];
		$LastBild = strtok(basename($Bilder[$AktuellesBild - 2]),".");
		$NowBild = strtok(basename($Bilder[$AktuellesBild - 1]),".");
		$NextBild = strtok(basename($Bilder[$AktuellesBild]),".");
		$urlGrosseGrafik = 'grafik.php?id=archiv&verzeichniss='.$album.'&bild='.$NowBild;
		$urlBack = $URL_Bilder."&album=".$album.'&id='.($AktuellesBild - 1).'#Thumbnail';
		$urlForward = $URL_Bilder."&album=".$album.'&id='.($AktuellesBild + 1).'#Thumbnail';
		$urlFirst = $URL_Bilder."&album=".$album.'&id=1#Thumbnail';
		$urlLast = $URL_Bilder."&album=".$album.'&id='.count($Bilder).'#Thumbnail';
		echo '<p>';
		echo '<div align="center">';
		echo '<a href="'.$urlGrosseGrafik.'" target="_blank" id="Thumbnail" name="Thumbnail">';
		echo grafik('archiv&VAdresse='.$Verzeichniss.'&VNr='.$album.'&bild='.$NowBild,1,'center','Großes Bild','','',$heightBigThumb);
		echo '</a>';
		echo '</div>';
		echo '</p>'."\n";
		echo '<p>';
		echo '<div align="center">';
		if($AktuellesBild > 1) {
			if($AktuellesBild > 2) echo '<a href="'.$urlFirst.'">'.$naviPfeil["links2"].'</a>&nbsp;';
			echo '<a href="'.$urlBack.'">'.$naviPfeil["links"].'</a>&nbsp;';
			echo '<a href="'.$urlBack.'">';
			echo grafik('archiv&VAdresse='.$Verzeichniss.'&VNr='.$album.'&bild='.$LastBild,1,'center','Zurück',$style,'',$heightSmallThump);
			echo '</a>';
		}
		echo grafik('archiv&VAdresse='.$Verzeichniss.'&VNr='.$album.'&bild='.$NowBild,1,'center','Aktuelles Bild',$style,'',$heightSmallThump);
		if($AktuellesBild < count($Bilder)) {
			echo '<a href="'.$urlForward.'">';
			echo grafik('archiv&VAdresse='.$Verzeichniss.'&VNr='.$album.'&bild='.$NextBild,1,'center','Weiter',$style,'',$heightSmallThump);
			echo '</a>&nbsp;';
			echo '<a href="'.$urlForward.'">'.$naviPfeil["rechts"].'</a>';
			if($AktuellesBild + 1 < count($Bilder)) echo '&nbsp;<a href="'.$urlLast.'">'.$naviPfeil["rechts2"].'</a>';
		}
		echo '</div></p>'."\n";
		echo '<p align="center"><a href="'.$URL_Bilder."&album=".$album.'&view=2">Alle Bilder anzeigen</a></p>'."\n";
	}
} else {
	echo '<p>Hier kannst du dir verschiedene Bilder anschauen, die z.B. in Urlauben oder Ausfl&uuml;gen aufgenommen wurden sind.</p>'."\n";
	echo '<p>'.grafik('archiv','1','left','Christian Gollhardt in Österreich','margin-top:15px;','','').'</p>'."\n";
}
?>

Wobei du statt der Grafik php auf die kleinen, mittleren und großen Bilder verlinken kannst.
Du brauchst evtl noch die von mir verwendete Funktion hier.

PHP:

//Daten eines Typs im Verzeichniss auflisten
function ListData ($dir,$typ) {
	$x = 0;
	foreach (glob($dir."*.".$typ) as $datei)    {
		$Daten[$x] = $datei;
		$x++;
	} 
	return $Daten;
}
//Verzeichnisse eines Verzeichnisses auflisten
function ListDir ($dir) {
	$x = 0;
	foreach (glob($dir."*", GLOB_ONLYDIR) as $verzeichniss)    {
		$Verzeichnisse[$x] = $verzeichniss;
		$x++;
	} 
	return $Verzeichnisse;
}

sysop · 17 Dezember 2008

ich halte die idee für nicht so prickelnd, denn:
ein bild muss auf jeden fall geladen werden, egal wie gross man es anzeigt, das verursacht unnützen traffic, da eine 5 MB grosse bilddatei 5MB download-traffic verursacht. das grosse bild dann per resize anzuzueigen bedeutet, dass das bild trotzdem in voller grösse geladen werden muss, um dann verkleinert angezeigt zu werden.

normalerweise erstellt man thumbnails (also verkleinerte versionen des original-bilds) um den traffic zu verringern. beim klick auf ein bild, wird dann das original in voller grösse nachgeladen.

mn-portal, PHP-Scripte die es in sich haben.. (Screenshots)

sieh dir mal die eigenschaften (grösse genauer an)

CGollhardt · 17 Dezember 2008

sysop schrieb:
ein bild muss auf jeden fall geladen werden, egal wie gross man es anzeigt, das verursacht unnützen traffic, da eine 5 MB grosse bilddatei 5MB download-traffic verursacht. das grosse bild dann per resize anzuzueigen bedeutet, dass das bild trotzdem in voller grösse geladen werden muss, um dann verkleinert angezeigt zu werden.

Wenn man das Thumbnail mit php erstellt, wird das bild in PHP geladen, aber trotzdem als meinetwegen 100kb übertragen, und hat somit nicht 5MB Traffic^^

[edit]
Hier mal ein Beispiel:
Christian Gollhardt: Die Webseite ⇒ Meine Bilder - Südamerika: Venezuela 07
Wie man sehen kann sind die Bilder Thumbnails. Das halbgroße Thumbnail kann man natürlich weglassen

sysop · 17 Dezember 2008

ja, ich sehe, wie es aussieht.
wenn du die 110k grosse datei weg lässt, hast du genau das, was ich oben gesagt habe.
das resizen einer grossen grafik führt dazu, dass das bild in VOLLER grösse geladen wird, dann aber nur als kleines bild angezeigt wird.

CGollhardt · 17 Dezember 2008

Das hat aber nichts mit dem Traffic zu tun, sondern mit lahmen rechenleistung meines Servers, bis er das Bild on the fly verkleinert hat, zum abschicken an den Clienten.
Muss mich demnächst mal drum Kümmern, dass ich dort einen Cache anlege...

sysop · 17 Dezember 2008

CGollhardt schrieb:
Das hat aber nichts mit dem Traffic zu tun, sondern mit lahmen rechenleistung meines Servers, bis er das Bild on the fly verkleinert hat, zum abschicken an den Clienten.
Muss mich demnächst mal drum Kümmern, dass ich dort einen Cache anlege...

den lahmen server, den ich hier stehen habe, möchtest du sicher gerne haben, ich wette drauf :lol:

du redest quatsch (sorry, hart aber ehrlich). dein server b.z.w. mein server mit 4x 3,2GHz hat damit garnichts zu tun, auch nicht meine 6000'er leitung.

ich muss die kompletten 100k deines mittelgrossen bildes komplett laden um es anzeigen und dann resizen zu können. ein thumbnail wird erstellt, damit man den download einer grafik minimiert, wenn man die grafik kleiner anzeiegen will. das ist die aufgabe eines thumbnails. statt der 110k lade ich nur 8k. klicke ich auf das bild, lade ich die 110k auf wunsch nach.

alles andere ist frickeln.

sieh dir deinen cache mal genauer an, du wirst dort eine grafik mit 110k UND eine grafik mit 8k finden. beide wurden in voller grösse herunter geladen.

wenn man keine ahnung hat, darf man auch mal ruhig sein

edit: nimm's nicht persönlich, ist freundlicher gemeint als es klingt.

ps.
übrigens läd php das bild garnicht !

pps.
bin heute etwas geladen.

CGollhardt · 17 Dezember 2008

Ich spreche ja nicht von deiner DSL geschwindigkeit und von deinem Rechner/Server, sondern ich rede von meinem Server^^

Wie ich bereits geschrieben habe, muss man das größere Thumnail ja nicht verwenden. Ich mache es um so eine Art Bildergalerie nachzuahmen, die es unter Windoof gibt

Die volle größe des Bildes wird niemals sofort geladen. In diesem Beispiel hat das erste Bild 802.67kb
Geladen wird das mittlere Thumbnail mit 114.44 KB
Und 3 kleine mit 8.81 KB
(Alle werte vom Ersten bild)
Beim nächsten Klick wird nur noch eine kleine Grafik mitgeladen.

Wie bereits erwähnt, man müsste nicht das mittelgroße Thumbnail verwenden, aber darauf kommt es ja jetzt nicht drauf an. Der Grund für dein gepostetes Bild liegt darin, dass meine Grafik.php die Dateien Serverseitig verkleinert, und dann als Thumbnail an den Clienten weiterschickt. Bis dieses Thumbnail erstellt ist, dauert es aber eine kurze weile. (so als würdest du ein Effekt mit Photoshop auf einem Bild anwenden)
Das Original bild wird aber nicht geladen.

Siehe meinen Script:

PHP:

<?php
//Grafik Array includieren
require("php/global/protect.php");
require("php/global/settings.php");
require("php/global/grafiken.php");
require("php/global/functions.php");
require("php/global/automate.php");
//Grafik definieren
$id = $_GET['id'];
if (isset($_GET['bild'])) {
	if (isset($_GET['verzeichniss'])) {
		$GetVerzeichniss = $_GET['verzeichniss'];
		$Verzeichnisse = ListDir($DirGrafik.$verzeichnisse[$id]."/");
		$url = $Verzeichnisse[$GetVerzeichniss].'/'.$_GET['bild'].'.jpg';
	} else {
		$url = 'grafiken/'.$verzeichnisse[$id].$_GET['bild'].'.jpg';
	}
} elseif (isset($_GET['avatar'])) {
	$url = 'speicher/avatar/'.$_GET['avatar'].'.jpg';
} else {
	$url = 'grafiken/'.$grafiken[$id].'.jpg';
}
//Prüfen ob Grafik vorhanden
if (!file_exists($url)) $url = "grafiken/".$grafiken['error'].'.jpg';
//Größe berechnen
if (isset($_GET['width']) || isset($_GET['height'])) {
	$info = getimagesize($url);
	if (isset($_GET['width'])) {
		$width = $_GET['width'];
		$height = ($width/$info[0])*$info[1];
	} else {
		$height = $_GET['height'];
		$width = ($height/$info[1])*$info[0];
	}
	if (($height > $info[1]) || ($width > $info[0])) {
		$NoThumbnail = true;
	}
} else {
	$NoThumbnail = true;
}
//Grafiken aus den Cache laden
$Tage = 14;
$exp_gmt = gmdate("D, d M Y H:i:s", time() + 60 * 60 * 24 * $Tage) ." GMT";
$mod_gmt = gmdate("D, d M Y H:i:s", getlastmod())." GMT";
header("Expires: ".$exp_gm);
header("Last-Modified: ".$mod_gmt);
header("Cache-Control: private, max-age=".(60 * 60 * 24 * $Tage));
header("Cache-Control: pre-check=".(60 * 60 * 24 * $Tage), false);
//Bild ausgeben
header('Content-type: image/jpeg');
$image = imagecreatefromjpeg($url);
if ($NoThumbnail) {
	imageinterlace($image,$grafik_interlace);
	imagejpeg($image,null,100);
} else {
	$imagetc = imagecreatetruecolor($width,$height);
	imagecopyresampled($imagetc,$image,0,0,0,0,$width,$height,$info[0],$info[1]);
	imageinterlace($imagetc,$grafik_interlace);
	imagejpeg($imagetc,null,100);
}
?>

[edit]
Hier unterschiedliche Grafiken (nur wegen Parametern):
http://gollhardt.eu/grafik.php?id=archiv&verzeichniss=6&bild=1b
http://gollhardt.eu/grafik.php?id=archiv&verzeichniss=6&bild=1b&height=355
http://gollhardt.eu/grafik.php?id=archiv&verzeichniss=6&bild=1b&height=85

Körnerbrötchen · 17 Dezember 2008

ähmm... sysop. Nimm dir etwas Zeit, ruhe dich aus und ließ dir diesen Thread dann noch einmal durch. Dass CGollhardt seine Bilder jedes Mal neue sizen lässt, ist für die Performance zwar nicht super, aber mit Traffic hat das tatsächlich nichts zu tun. 8)

Efchen · 17 Dezember 2008

Wenn man nicht aufpasst, darf man auch mal ruhig sein...
...nicht aufregen, ist freundlicher gemeint, als es sich anhört ;-D

sysop · 17 Dezember 2008

zuerst mal:
als traffic bezeichnet man (grob) den datenverkehr zwischen einem oder mehreren elektronischen geräten. jedes mal, wenn man digitale informationen von einem gerät ans andere weiter gibt, wird traffic verursacht.

lade ich mir eine 100k grosse datei aus dem internet herunter, habe ich traffic in dieser grössenordnung verursacht. diesen download muss ich starten, damit mir die datei angezeigt werden kann. das gillt für bilder genauso wie für alle anderen dateien.

@CGollhardt

dein thumbnail mit 110k muss mit 110k geladen werden. dein ganz kleines thumbnail mit 8k erspart mir da garnichts.

deinem geposteten code ist nirgends zu netnehmen, dass du ein thumbnail erstellst. per style verkleinerst du die anzeige, (was man auch nur erraten kann, da du eine style angabe in deiner funktion grafik() machst b.z.w grössenangaben für die bilder festlegst). was allerdings deine funktion grafik genau macht, kann man nicht sehen. einzig darauf basiert meine antwort.

Code:

$heightBigThumb = 355;
$heightSmallThump = 85;
.
.
.
grafik('archiv&VAdresse='.$Verzeichniss.'&VNr='.$album.'&bild='.$NowBild,1,'center','Großes Bild','','',$heightBigThumb);
grafik('archiv&VAdresse='.$Verzeichniss.'&VNr='.$album.'&bild='.$LastBild,1,'center','Zurück',$style,'',$heightSmallThump);

um zu verdeutlichen, wie ich zu dem screenshot gekommen bin:
meine logfiles hier auf meinem proxy zeigen mir ein download-volumen (traffic) für die oben genannte (verlinkte) seite von knapp 140k an. ich habe den maximalen datenverkehr auf die seite kurzfristig auf 90k limitiert um den screenshot zu erhalten, den ich hier verlinkt habe. die angezeigten bilder liegen hier im cache, der proxy hat den download von mehr als 100k verweigert und die restlichen bilder nicht geladen. dabei ist es vollkommen egal, wie schnell dein server oder meiner ist, ich habe das maximale volumen begränzt, nicht die zeit.

wie ich auch schon geschrieben habe, lässt man das grosse bild weg (dein 110k thumbnail), hat man genau den effekt, den ein thumbnail eigentlich ausmacht. es werden deine 8k grafiken geladen.

Code:

mn@debian:~/bla$ wget http://gollhardt.eu/grafik.php?id=archiv&verzeichniss=6&bild=1a&height=355
[1] 19707
[2] 19708
[3] 19709
mn@debian:~/bla$ --15:35:59--  http://gollhardt.eu/grafik.php?id=archiv
           => `grafik.php?id=archiv'
Auflösen des Hostnamen »gollhardt.eu«.... 82.165.52.149
Verbindungsaufbau zu gollhardt.eu|82.165.52.149|:80... verbunden.
HTTP Anforderung gesendet, warte auf Antwort... 200 OK
Länge: nicht spezifiziert [image/jpeg]

    [  <=>                                                                                                              ] 167,649      489.08K/s

15:35:59 (1977.57 KB/s) - »grafik.php?id=archiv« gespeichert [167649]


[1]   Done                    wget http://gollhardt.eu/grafik.php?id=archiv
[2]-  Done                    verzeichniss=6
[3]+  Done                    bild=1a

ps.
der angegebene link läd übrigens ein anderes bild als abgezeigt, absicht ?
die wortwahl wahr unglücklich, stimmt. sorry.

CGollhardt · 17 Dezember 2008

Wie bereits gesagt, das mittelgroße Bild muss man ja nicht verwenden^^

die Funktion grafik, schreibt einzig und allein das img tag aus und überprüft ob die Datei vorhanden ist

PHP:

//Grafik erstellen
function grafik ($id,$border,$align,$title,$style,$width,$height) {
	global $DirGrafik;
	global $grafiken;
	global $verzeichnisse;
	if (ereg(sql_regcase("&bild="),$id)) {
		parse_str("id=".$id);
		if (isset($VAdresse) && isset($VNr)) {
			$url = $VAdresse.'/'.$bild.".jpg";
			$id .= '&verzeichniss='.$VNr.'&bild='.$bild;
		} else {
			$url = $DirGrafik.$verzeichnisse[$id].$bild.".jpg";
			$id .= '&bild='.$bild;
		}
	} else {
		$url = $DirGrafik.$grafiken[$id].'.jpg';
	}
	if (!file_exists($url)) {
		$id = 'error';
		$border = '1';
		$title .= ': Error beim erstellen der Grafik';
		$url = $DirGrafik.$grafiken[$id].'.jpg';
	}
	$info = getimagesize($url);
	if (!empty($width)) {
		$height = ($width/$info[0])*$info[1];
		$Thumbnail = true;
		$id .= '&width='.$width;
	} elseif (!empty($height)) {
		$width = ($height/$info[1])*$info[0];
		$Thumbnail = true;
		$id .= '&height='.$height;
	} else {
		$zusatz = ' '.$info[3];
		$Thumbnail = false;
	}
	if ($Thumbnail) $zusatz = ' width="'.round($width).'" height="'.round($height).'"';
	if (!empty($border)) $zusatz .= ' border="'.$border.'"';
	if (!empty($align)) $zusatz .= ' align="'.$align.'"';
	if (!empty($title)) $zusatz .= ' alt="'.$title.'" title="'.$title.'"';
	if (!empty($style)) $zusatz .= ' style="'.$style.'"';
	return '<img src="grafik.php?id='.$id.'"'.$zusatz.' />';
}

(Ich weis sehr umständlich aber das ist schon fast 2 jahre her, dass ich diese Funktion geschrieben habe)

Die GET variablen an der grafik.php verändern erst die größe

Aber klar, du hast recht, das das mittelgroße Bild Traffic verursacht.

sysop · 17 Dezember 2008

sehr interessant, dass ich mit wget eine vollkommen andere grafik lade, als in der url angegeben. ist das absicht oder ein nebeneffekt, der ungewollt ist ?

CGollhardt · 17 Dezember 2008

sysop schrieb:
sehr interessant, dass ich mit wget eine vollkommen andere grafik lade, als in der url angegeben. ist das absicht oder ein nebeneffekt, der ungewollt ist ?

Es wird ja gollhardt.eu/grafik.php?id=archiv

und nicht gollhardt.eu/grafik.php?id=archiv&verzeichniss=6&bild=1a
geladen. Demnach ist das kein Nebeneffekt sondern so wie definiert

Bildervorschau

Akula

Neues Mitglied

fiedel

Mitglied

Akula

Neues Mitglied

CGollhardt

Mitglied

sysop

Guest

CGollhardt

Mitglied

sysop

Guest

Anhänge

CGollhardt

Mitglied

sysop

Guest

CGollhardt

Mitglied

Körnerbrötchen

Aktives Mitglied

Efchen

Guest

sysop

Guest

CGollhardt

Mitglied

sysop

Guest

CGollhardt

Mitglied

Neueste Beiträge