Hallo Damian,
jetzt ist es endlich soweit. Da mir vor Schreiben dieses Beitrags noch eine leicht abgeänderte Lösung eingefallen ist, gibt es diesmal sogar zwei Beispiel-Dateien im Anhang (wegen Copyrights lieber ohne Bilder).

Aufpassen musst du bei solchen Sachen insofern, dass in deiner Variable $image mehrere Bilder auf der Website stehen, wenn du dann z.B. wrap aufrufst, werden alle Bilder von einem Link umschlossen. Wenn du etwas gezielt für einzelne Objekte erreichen möchtest, sollten sie mittels each durchlaufen und erst dann angepasst werden.

Für mich sah es so aus, als würdest du nur Bilder anpassen wollen, die nicht bereits von einem Element mit der Klasse picbig oder einem Link umrahmt werden. Die können in jQuery relativ leicht über .not(…) oder alternativ einen Filter aussortiert werden. Den Filter habe ich aktuell auskommentiert, er macht aber genau die gleiche Aussortierung. Kannst ja nehmen, was du besser findest. Der Filter muss so erstellt werden, dass er für alle beizubehaltenden Elemente true zurückgibt.

Die Variable $(this) bezieht sich übrigens immer auf das jeweils aktuell verwendete Objekt, in Schleifen also auf das aktuell durchlaufene Objekt oder in Event-Handler auf das Objekt, für welches das Event ausgelöst wurde.


Die erste Lösung wird nach Laden der kompletten Seite (und auch Bilder) aufgerufen, sie geht jedes einzelne Bild durch und verkleinert es. Gleichzeitig wird ein Link zum Öffnen des Bildes in einem neuen Tab gesetzt inkl. einem Hinweis vor dem Bild (mit before, alternativ after verwenden), der ebenfalls im Link enthalten und damit klickbar ist. Der Nutzer kann also auf der gesamten Fläche von Bild und Hinweis klicken.
jQuery hat zwar eine ready-Funktion, da zu diesem Zeitpunkt aber die Bilder möglicherweise noch nicht fertig geladen haben, wird die Größe nicht immer richtig erkannt. Deswegen wird erst beim onload ausgelöst.

Und genau hier setzt die zweite (improved) Lösungsmöglichkeit an. Sobald alle HTML-Tags (u.a auch img) geladen wurden, erhält jedes einzelne img-Tag einen Event-Handler, welcher aufgerufen wird, sobald das Bild vollständig geladen wurde. Vorteil hier ist, dass jedes Bild frühstmöglich angepasst wird, eben sobald es komplett geladen wurde und die genaue Größe abrufbar ist.

Hier nochmals der entsprechende JS-Code der improved-Variante:

<script type="text/javascript">
	$(document).ready(function(){
		/*var $images = $('.mtext img').filter(function(index) {
			return ($(this).parent('.picbig').length == 0) && ($(this).parent('a').length == 0);
		});*/
		var $images  = $('.mtext img').not('.picbig > img').not('a > img');
		var maxWidth = $('.mtext').width() - 40;
 
		// Größe nach Laden jedes einzelnen Bildes prüfen:
		$images.load(function(){
			if ($(this).width() > maxWidth) {
				var link = $('<a></a>')
					.attr('href',   $(this).attr('src'))
					.attr('class',  'picbig')
					.attr('title',  '{[gallery_fullpic]}')
					.attr('target', '_blank');
 
				var hint = $('<div></div>')
					.css('max-width', maxWidth + 'px')
					.text('{[gallery_dl_pic]}');
 
				$(this).css('max-width', maxWidth)
					.wrap(link)
					.before(hint);
			}
		});
	});
</script>