Automatische Bildgrößen mit jQuery

Manchmal möchte ich ja gerne meine Bilder auch in schön groß präsentieren, damit sie richtig wirken. Dummerweise haben nicht alle Menschen Displays mit mindestens 24″-Format. So muss man ein wenig gucken, dass sich der liebe Benutzer nicht tot scrollt oder das Bild gar nicht in seiner Gesamtheit anschauen kann.

Deshalb habe ich mal ein wenig in die jQuery-Trickkiste gegriffen und ein kleines Stück Code geschrieben, dass es mir erlaubt die Bilder in möglichst großer Größe einzubinden. Es wird dann automatisch so skaliert, dass es sich in die Browsergröße des Besuchers schön einpasst und zentriert dargestellt. Nachteil daran: Die Dateigröße schiesst natürlich in die Höhe, was bezüglich der Ladezeiten auch nicht so richtig Spaß macht. Damit das nicht überhand nimmt, habe ich die Maximalhöhe der Bilder auf 900 Pixel beschränkt. Ich denke das reicht völlig aus.

Ein großes Bild

Eine alternative Lösung wäre sicherlich die Implementierung mit CSS-Mediaqueries, die allerdings wohl nicht so wunderbar dynamisch ausfallen würde. Da gefällt mir diese Variante wesentlich besser. Um das Javascript-Gedöns auf ein Bild anzuwenden, muss ich in Zukunft daran denken die Klasse size-full (auf die springt das leider inkompatible Bildbeschriftungs-Skript an) im Quelltext zu entfernen und statt dessen resizable hinzuzufügen.

Ein großes hochformatiges Bild

Jetzt müsste ich nur mal wieder losziehen und auch ein paar Bilder machen. Irgendwie habe ich da auch Lust zu, schließlich scheint das Wetter ja auch wieder besser zu werden.

Und schließlich, für Menschen die es wirklich interessiert, hier noch der Code mit einigen Kommentaren. Der sollte nicht all zu schwer zu verstehen 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 

Wie man sieht, kann der Funktion eine Variable übergeben werden. Beim Laden der Seite wird die Funktion initial ausgeführt, das Seitenverhältnis bestimmt und gespeichert und das Bild erstmalig eingepasst. Bei jedem Vergrößern oder Verkleinern des Browserfensters wird die Funktion dann ohne Parameter 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('');		
	});

Vielleicht kann der ein oder andere ja was mit dem Skript anfangen. Bei Fragen und Anregungen freue ich mich über Kommentare. Ich weiß das mein gecode hier weit davon entfernt ist, perfekt zu sein und deshalb bin ich für jeden Verbesserungsvorschlag dankbar.

Nachtrag: Bilder auf den Übersichtsseiten normal groß anzeigen

Irgendwie störte es mich, dass auf den Übersichtsseiten die Bilder so groß angezeigt wurden. Deshalb habe ich die Funktion resizeNow() noch um folgende Zeilen erweitert. Nun werden die Bilder auf den Übersichtsseiten schön passend im Textfluss ausgegeben und erst auf den Einzelseiten der Einträge im Großformat. 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);
			
		});

9 Reaktionen zu Automatische Bildgrößen mit jQuery

  1. Die beiden Bilder oben kennt der eifrige Leser bestimmt schon. Sie stammen aus meinem Urlaub in Argentinien, genauer gesagt von den Wasserfällen in Iguazú. Ich blogdingste darüber.

  2. Komische Sache: im Feed-Reader „Reeder“ werden die Bilder gar nicht gefunden. Über die Google-Browseransicht funktioniert es allerdings. Komisch.

  3. hallo,

    dein skript hat mir wirklich sehr geholfen! vielen dank dafür !! ich habe heute ca 3 std das internet nach genau so etwas durchsucht.

    dein skript hatte bei mir allerdings auch nicht auf anhieb funktioniert. zunächst wusste ich nicht wohin der zweite code block gehört bis ich in deiner functions.js gesehen habe das der ÜBER den ersten block kommt und insgesammt alles in ein jquery document ready. Ein code wo alles final zusammengesetzt ist wäre vllt noch cool gewesen.

    nun hat das skript bei mir aber immernoch nicht funktioniert. es dauerte nochmal 30minuten bis ich schlussendlich rausbekommen habe das es NUR mit deiner jquery datei funktioniert. ich hatte die neuste(?) 1.62 benutzt und als ich schlussendlich deine datei eingefügt hatte hatte es auch geklappt.

    kannst du dir das erklären wieso es nicht mit der aktuellen jquery version klappt??

    zu guter letzt hätte man vllt noch in den code kommentieren können das du oben und unten ein paar pixel von der fenstergröße abziehst.

    würde mich über eine antwort freuen. vllt per email oder kommentar :)

    grüße

  4. p.s.:
    ich hatte befürchtet das man auf dem iphone/ipad nun enorme probleme kriegt und das bild sich jedesmal anpasst wenn man ranzoomt was dazu führt das man eben nicht ranzoomen kann weil sich das bild immer dem bildschirm anpasst. dem war aber NICHT so. somit wäre das skript auch ipad/iphone kompatibel :)

  5. Bitte helft mir ich kenne mich nicht aus .
    Die functions.js gehört noch mit eingebunden ? Darf man die überhaubt verwenden ?

    Danke , rd

  6. Hallo,

    habe mir grade deinen Code angesehen, also bis jetzt habe ich Ihn noch nicht ans laufen bekommen.

    Meine Vorgehensweise:

    Bild mit der Klasse „resizable“ erstellt.
    jQuery eingebunden
    Eine Funktion namens functions.js erstellt und eingebunden.
    was habe ich vergessen zu machen?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.