Automatische Bildgrößen mit jQuery

Manch­mal möchte ich ja gerne meine Bil­der auch in schön groß prä­sen­tie­ren, damit sie rich­tig wir­ken. Dum­mer­weise haben nicht alle Men­schen Dis­plays mit min­des­tens 24″-Format. So muss man ein wenig gucken, dass sich der liebe Benut­zer nicht tot scrollt oder das Bild gar nicht in sei­ner Gesamt­heit anschauen kann.

Des­halb habe ich mal ein wenig in die jQuery-Trickkiste gegrif­fen und ein klei­nes Stück Code geschrie­ben, dass es mir erlaubt die Bil­der in mög­lichst gro­ßer Größe ein­zu­bin­den. Es wird dann auto­ma­tisch so ska­liert, dass es sich in die Brow­ser­größe des Besu­chers schön ein­passt und zen­triert dar­ge­stellt. Nach­teil daran: Die Datei­größe schiesst natür­lich in die Höhe, was bezüg­lich der Lade­zei­ten auch nicht so rich­tig Spaß macht. Damit das nicht über­hand nimmt, habe ich die Maxi­mal­höhe der Bil­der auf 900 Pixel beschränkt. Ich denke das reicht völ­lig aus.

Eine alter­na­tive Lösung wäre sicher­lich die Imple­men­tie­rung mit CSS-Mediaqueries, die aller­dings wohl nicht so wun­der­bar dyna­misch aus­fal­len würde. Da gefällt mir diese Vari­ante wesent­lich bes­ser. Um das Javascript-Gedöns auf ein Bild anzu­wen­den, muss ich in Zukunft daran den­ken die Klasse size-full (auf die springt das lei­der inkom­pa­ti­ble Bildbeschriftungs-Skript an) im Quell­text zu ent­fer­nen und statt des­sen resiz­able hinzuzufügen.

Jetzt müsste ich nur mal wie­der los­zie­hen und auch ein paar Bil­der machen. Irgend­wie habe ich da auch Lust zu, schließ­lich scheint das Wet­ter ja auch wie­der bes­ser zu werden.

Und schließ­lich, für Men­schen die es wirk­lich inter­es­siert, hier noch der Code mit eini­gen Kom­men­ta­ren. Der sollte nicht all zu schwer zu ver­ste­hen sein.

	function resizeNow(isLoad){
		$('.single .resizable').each(function() {

			/* 	Liest die aktuelle Höhe und
				Breite des Bildes aus */
			var thisheight = $(this).attr('height');
			var thiswidth = $(this).attr('width');

			/* 	Beim Laden der Seite wird das Seitenverhältnis
				des Bildes bestimmt und im img-Tag gespeichert */
			if (isLoad == 'load') {
				var ratio = thiswidth / thisheight;
				$(this).attr('ratio', ratio);
			}

			/* 	Die aktuelle Höhe und Breite
				des Fensters wird bestimmt */
			var windowheight = $(window).height();
			var windowwidth = $(window).width();

			/* 	Die neue Höhe des Bildes wird gesetzt
				und aus dem Verhältnis die Breite berechnet */
			var newheight = windowheight - 75;
			if ( newheight > 900 ) { newheight = 900; }
			var newwidth = newheight * $(this).attr('ratio');

			/* 	Wenn die neue Breite des Bildes kleiner ist als die
				Fensterbreite des Browsers, wird diese
				an das Bild übergeben */
			if (newwidth < windowwidth) {
				$(this).attr('height', newheight);
				$(this).attr('width', newwidth);
			} else {
				/* 	ansonsten wird basierend auf der Breite eine neue
					Bildgröße bestimmt und diese an das Bild übergeben */
				newwidth = windowwidth - 75;
				newheight = newwidth / $(this).attr('ratio');
				$(this).attr('height', newheight);
				$(this).attr('width', newwidth);
			}

			/* 	Schließlich wird das Bild noch zentriert ausgerichtet.
				Der Code geht dabei von einer Breite von 700px
				für den Content-Bereich aus */
			var marginleft = ((newwidth / 2) * (-1) + 350);
			$(this).css('margin-left', marginleft);
		});
	}

Wie man sieht, kann der Funk­tion eine Varia­ble über­ge­ben wer­den. Beim Laden der Seite wird die Funk­tion initial aus­ge­führt, das Sei­ten­ver­hält­nis bestimmt und gespei­chert und das Bild erst­ma­lig ein­ge­passt. Bei jedem Ver­grö­ßern oder Ver­klei­nern des Brow­ser­fens­ters wird die Funk­tion dann ohne Para­me­ter aufgerufen.

	/*	Die Funktion resizeNow wird beim Laden
		der Seite mit dem Parameter 'load' aufgerufen,
		damit das Seitenverhältnis bestimmt wird */
	resizeNow('load');

	/*	Bei einer Größenänderung des Browserfensters
		wird die Funktion ohne Parameter ausgeführt */
	$(window).resize(function() {
		resizeNow('');
	});

Viel­leicht kann der ein oder andere ja was mit dem Skript anfan­gen. Bei Fra­gen und Anre­gun­gen freue ich mich über Kom­men­tare. Ich weiß das mein gecode hier weit davon ent­fernt ist, per­fekt zu sein und des­halb bin ich für jeden Ver­bes­se­rungs­vor­schlag dankbar.

Nachtrag: Bilder auf den Übersichtsseiten normal groß anzeigen

Irgend­wie störte es mich, dass auf den Über­sichts­sei­ten die Bil­der so groß ange­zeigt wur­den. Des­halb habe ich die Funk­tion resizeNow() noch um fol­gende Zei­len erwei­tert. Nun wer­den die Bil­der auf den Über­sichts­sei­ten schön pas­send im Text­fluss aus­ge­ge­ben und erst auf den Ein­zel­sei­ten der Ein­träge im Groß­for­mat. Damit das klappt, musste ich in Zeile 2 des Codes oben noch ein .single hinzufügen.

/* Auf den Übersichtsseiten werden die
		Bilder auf 700px skaliert. */
		$('.home .resizable').each(function() {

			var thisheight = $(this).attr('height');
			var thiswidth = $(this).attr('width');

			if (isLoad == 'load') {
				/* Achtung! Hier wird das Seitenverhältnis andersherum
				berechnet, da die Breite des Bildes ausschlaggebend ist. **/
				var ratio = thisheight / thiswidth;
				$(this).attr('ratio', ratio);
			}

			$(this).attr('width', '700');
			var newheight = 700 * $(this).attr('ratio');

			$(this).attr('height', newheight);

		});