Bisher konnten Bilder in Beiträgen nur in ihrer Original-Größe direkt im Beitrag eingebunden werden und wurden nur im Anhang in einer verkleinerten Version dargestellt.
Bei zu großen Bildern kann das Bilderverkleinerungssript diese zwar automatisch verkleinern, aber dennoch ist es nicht möglich, ausgewählte Bilder unter der Grenze der maximalen Größe auf eine noch kleinere Thumbnail-Größe zu reduzieren.

Hier kommt nun dieses Skript zum Einsatz.
Die User können nun frei ein Bild wählen, welches nur in einer kleinen Vorschau im Beitrag angezeigt wird und so das Lesen des Beitrages nicht behindert.
Aber im Gegensatz zu den Bildern im Anhang kann das Thumbnail frei im Beitrag positioniert und auch auf unterschiedliche Weise in der Original-Größe angezeigt werden.
Die Art und Weise kann durch den Verfasser eines Beitrages frei bestimmt werden.


Die Grundidee entpricht existierte bereits in ähnlicher Form im Forum für Hilfe, Tricks & Tipps in diesen Beiträgen:
Bilder vergrößert & verkleinert betrachten
Bilder vergrößern durch einfaches "Mouseover"

Im Unterschied dazu, werden aber keine verkleinerten Versionen mehr benötigt, die vorher erstellt werden müssten.
Beim Aufruf einer Seite mit sehr großen Bildern benötigt aber genau so viel Zeit wie vorher, auch wenn sie als Thumbnail eingebunden werden, denn es wird das Original-Bild geladen, aber eben nur verkleinert dargestellt.
Dafür entfällt die Ladezeit für das Laden des kleinen Vorschau-Bildes zusätzlich zum großen Bild.

Eine Umsetzung wäre zwar schon relativ lange auf gewöhnlichen Seiten möglich gewesen, aber im einem HPM-Forum funktioniert der Quellcode erst seit den letzten Updates wie gewünscht.
Denn vorher konnte der Quellcode nicht richtig in Foren-Codes umgewandelt werden.
Durch die Umstellung wurden aber neue Möglichkeiten eröffnet und der Quellcode um einiges weiterentwickelt.



Skript und Stylesheet können z.B. zwischen den Head-Tags des Template-Elements "Obere Leiste" eingefügt werden.

<script language="javascript" type="text/javascript">
// Thumbnails von Bildern erstellen
//Parameter-Namen definieren:
var thumb_hover = 'hover';			// vergrößern/öffnen beim Überfahren mit der Maus
var thumb_window = 'window';		// in einem Fenster öffnen statt vergrößern
var thumb_unlinked = 'unlinked';	// keine Vergrößerung aktiviert
// Klassennamen mit den maximalen Breiten- und Höhen-Angaben:
var thumbnail_klasse = 'thumbnail';			// als Thumbnail
var thumbnail_klasse_aus = 'thumbnail_off';	// für Normalgröße
// -----------------------------------------------------------------------------------
function thumbnails(thumb, params) {
	// Parameter-Werte verarbeiten:
	var thumbnail_hover = false;
	if (params.indexOf(thumb_hover) != -1) {
		thumbnail_hover = true;
	}
	var thumbnail_window = false;
	if (params.indexOf(thumb_window) != -1) {
		thumbnail_window = true;
	}
	var thumbnail_unlinked = false;
	if (params.indexOf(thumb_unlinked) != -1) {
		thumbnail_unlinked = true;
	}
	// Events vergeben:
	if (thumbnail_unlinked) {
		thumb.style.cursor = 'auto';
		thumb.onmouseover = null;
		return;
	}
	else {
		if (thumbnail_hover) {
			if (thumbnail_window) {
				thumb.onclick = function() { thumbnails(thumb, params); };
			}
			else {
				thumb.onclick = function() { window.open(thumb.src); };
				thumb.onmouseout = function() { thumbnails(thumb, params); };
			}
		}
		else {
			if (thumb.onmouseover != null) {
				thumb.onmouseover = null;
				thumb.onclick = function() { thumbnails(thumb, params); };
				return;
			}
		}
	}
	// Größenanpassung:
	if (thumbnail_window){
		var fenster = window.open(thumb.src);
	}
	else {
		if (thumb.className == thumbnail_klasse) {
			thumb.className = thumbnail_klasse_aus;
		}
		else {
			thumb.className = thumbnail_klasse;
		}
	}
}
function thumbnail_insert() {
	var thumb_url = prompt("Bild-Adresse:", "http://");
	var thumbnail_tags = '[thumbnail';
	var check_unlinked = confirm(unescape("Soll das Thumbnail vergr%F6%DFert werden k%F6nnen?"));
	if (check_unlinked) {
		var check_hover = confirm(unescape("Soll das Bild bereits beim %DCberfahren mit der Maus vergr%F6%DFert werden?"));
		var check_window = confirm(unescape("Soll bei einem Klick auf das Bild ein neues Fenster mit dem Bild in Originalgr%F6%DFe ge%F6ffnet werden?"));
		if (check_hover || check_window) {
			thumbnail_tags += '=';
		}
		if (check_hover) {
			thumbnail_tags += thumb_hover;
		}
		if (check_window) {
			if (check_hover) {
				thumbnail_tags += ';';
			}
			thumbnail_tags += thumb_window;
		}
	}
	else {
		thumbnail_tags += '='+thumb_unlinked;
	}
	thumbnail_tags += ']'+thumb_url+'[/thumbnail]';
	returnTag(thumbnail_tags);
}
</script>
 

<style type="text/css">
/* Thumbnails */
.thumbnail {
	cursor:pointer;
	max-width:200px;
	max-height:100px;
}
.thumbnail_off {
	cursor:pointer;
}
 

[thumbnail{{params}}]
 

und danach

[/thumbnail]
 

Die zugehörigen Quellcodes zum Ersetzen sind

<img onmouseover="thumbnails(this, '{{params}}')" src="
 

und dann

" name="thumbnail" class="thumbnail" alt="[{{main}}]" title="[{{main}}]" />
 

Damit die User des Forums auch einfach darauf zugreifen können, sollte noch ein Link/Button/Bild in der Symbol-Bar eingefügt werden.
Zum Einfügen der Foren-Codes existiert mit obigem Skript bereits eine geeignete Funktion.
Von dem Link/Button/Bild muss nur die JavaScript-Funktion "thumbnail_insert()" aufgerufen werden.
Diese frägt den User dann einzelne Optionen ab und fügt den geeigneten Quellcode inkl. Parameter dazu im Beitrag ein.



Ein einfaches Thumbnail kann nun erzeugt werden mit:

[thumbnail]http://Bildadresse.de[/thumbnail]
 

Wenn dieses Bild geklickt wird, erscheint es auf Normalgröße, bei einem zweiten Klick wird es wieder verkleinert.

Nun können aber auch meherere Parameter übergeben werden.
Die Parameter:
hover: Vergrößert das Bild bereits während dem Überfahren mit der Maus
window: Öffnet das Bild beim Klicken in einem neuen Fenster (/Tab)
unlinked: Setzt alle anderen Parameter außer Kraft, Bild ist nicht vergrößerbar (außer bei Direktaufruf -> Firefox: Rechtsklick->Grafik anzeigen)

Die Parameter dürfen beliebig kombiniert werden, wobei unlinked die Funktion der anderen Parameter außer Kraft setzt.
Sie dürfen mit beliebigem Zeichen (sogar auch ohne) eingefügt werden und auch das Trennzeichen zwischen den Parametern ist egal.
Das Funktion zum Einfügen von der Symbol-Bar verwendet im Moment " = " zum Anhängen und " ; " zum Trennen der Parameter.


Im Folgenden mehrere Beispiele:
Parameter: keine -> einfaches Thumbnail, Vergrößerung bei Klick
Parameter: hover -> Vergrößerung beim Überfahren mit der Maus in der Seite
Parameter: window -> Vergrößerung in neuem Fenster bei Klick
Parameter: hover;window -> Vergrößerung beim Überfahren in neuem Fenster
Parameter: unlinked;hover;window -> keine Vergößerung möglich, Parameter "hover" und "window" überflüssig

Bemerkung:
Wenn keine Parameter angegeben werden, erfolgt eine Vergrößerung/Verkleinerung nur durch Klicken auf das Bild.
Wenn "hover" und "window" gleichzeitig benutzt werden, ist es möglich, dass der Browser meldet, dass ein Popup blockiert wurde und kein neues Fenster öffnet.
Deshalb kann bei dieser Kombination das Bild dennoch mit einem Klick in einem neuen Fenster vergrößert werden.