✔ Bild vergrößern in einer anderen Tabelle

[mikkele]

Hallo, ich hoffe, hier richtig zu sein.
ich möchte mehrere kleine Bildergalerien (max 4 Bilder/Galerie) erstellen.
Beim Klick auf eines der Bilder soll dieses in einer anderen Zelle groß erscheinen.

Ist es auch möglich, die großen Bilder per Javascript als Thumbnail in der Galerie darzustellen? (ich muss dann einfach high="50" hinschreiben oder?
(Dann muss ich die Bilder nicht klein und groß abspeichern. Ich bin mir bewusst, dass das längere Ladezeiten verursachen kann)


Danke schonmal
Mikkele

 

[con-f-use]

Ist es auch möglich, die großen Bilder per Javascript als Thumbnail in der Galerie darzustellen? (ich muss dann einfach high="50" [sic] hinschreiben oder?)

Nein, du kannst keine Thumnails mit Javascript erzeugen, die die Ladenzeiten verrigern. Dafür würde ich php empfehlen. Wenn du high="50" hinschreibst wird nichts passieren, weil die eigenschaft "height" heißt und selbst wenn du keine Tippfehler reinbringst hast du relativ wenig davon.

Ansonsten fühle ich mich jetzt nicht berufen, dir noch was anderes zu schreiben außer: http://www.tutorials.de/forum/javascript/215197-keine-ahnung-von-javascript.html
Dein Beitrag macht mir nämlich stark den Einduck, als hättest du das noch nicht gelesen, keine Ahnung von Javascript und hättest die Forensuche gemieden, wie eine leprakranke Schwiegermutter.

 

[Sven Mintel]

Ich bin mir jetzt nicht sicher, was du meinst.

Wie con-f-use schon sagte....echte Thumbnails sind mit JS nicht möglich, da JS nicht über die nötigen Grafik-Funktionen verfügt.

Wenn du aber meinst, die Originalbilder einfach kleiner darzustellen, indem du ihr HTML-Attribut "height" änderst, ...das ist kein Problem.
Bei 4 Bildern pro Galerie finde ich das Ladezeit-Problem auch noch akzeptabel.

 

[mikkele]

@ con-f-use

Ok, das mit dem "high - height" ist sicher einer der blödsten Fehler in diesem Forum:-(

Die Forensuche habe ich nicht gemieden (ich habe ausführlich gesucht), aber bezüglich diesen Problems habe ich wirklich nichts gefunden; aber mit deinen anderen Argumenten hast mich ziemlich gut getroffen.

Also, ich melde mich, wenn ich etwas mehr Ahnung von Javascripten habe und werde vorerst mal zu meinem Problem -n

Grüße
Mikkele

 

[con-f-use]

Nichts für ungut, einem reuhigen Sünder vergibt man doch gerne. Ich hatte mich schon wieder auf einen Flame-War eingestellt.

Im Prinzip ist es recht einfach. Du hast eine Zelle mit dem großen Bild drinen. Die willst du ansprechen. Am leichtesten geht das, wenn du ihr eine id gibst z.B. id="groBi" für großes Bild. Bei den kleinen Bilder machst du einen onclick, der dann den src des großen Bildes verändert. Das könnte so aussehen:

<img id="groBi" src="..." .... />
<img src="http://www.blubb.de/kleinesBild01.jpg" onclick="document.getElementById('groBi').src = this.src;" ... />
<img src="http://www.blubb.de/kleinesBild02.jpg" onclick="document.getElementById('groBi').src = this.src;" ... />
usw.

Für die Thumbnails würde ich wie gesagt php nehmen. Hier mal ein Code von mir:

<?php
// The file
$filename = $_GET['pic'];
$proportion = $_GET['proportion'];
$height = $_GET['height'];
$width = $_GET['width'];


	// Content type
	header('Content-type: image/jpeg');

	// Get new dimensions
	list($w, $h) = getimagesize($filename);
	if ($height>0 && $width>0) {
		$new_width = round($width);
		$new_height = round($height);
	} else if ($width>0) {
		$new_width = round($width);
		$new_height = round($width / $w * $h);
	} else if ($height>0) {
		$new_width = round($height / $h * $w);
		$new_height = round($height);
	} else if ($proportion>0) {
		$new_width = round($w * $proportion / 100);
		$new_height = round($h * $proportion / 100);
	} else {
		$new_width = $w;
		$new_height = $h;
	}

	// Resample
	$image_p = imagecreatetruecolor($new_width, $new_height);
	$image = imagecreatefromjpeg($filename);
	imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $w, $h);

	// Output
	imagejpeg($image_p, null, 100);

?>

Eingebunden wird's so:

<img src="pic.php?filename=blubb.jpg&height=50" ... />

Wobei du anstatt height auch wirdth oder proportion in Prozent angeben kannst. Was was bringt, sollte sich von selbst erklären.

 

[mikkele]

Hey klasse, der thread geht weiter.

Ich habe mal den HTML-Code eingebaut, und es klappt fabelhaft.
Vielen Dank!

Doch bevor ich dich mit 268 Fragen über PHP nerve, hab ich mich entschieden, den height:-( -Befehl in den HTML Code einzufügen.
Ansonsten wäre es mit Sicherheit ein Flame-War geworden

Danke nochmals,
Mikkele