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.
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.
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 < 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 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);
});
Zehn Jahre ist es her, dass ich in zahlreichen Prüfungen schwitzte um mein Abitur zu bekommen. Schrecklich fand ich das. Aber ich hatte auch eine schöne Zeit mit vielen netten Menschen in meiner Stufe. Zusammen erlebten wir eine Menge: Klassenfahrten und Exkursionen und natürlich auch die von uns ausgerichteten Oberstufenpartys, die uns schließlich durch ihren großen Erfolg auch die ganze Feierei finanzieren sollten. Selbst wenn es damals im Unterricht nicht so gut für mich lief, ging ich allein schon wegen der Menschen immer noch gerne in die Schule.
„Viele von denen wirst du lange nicht wieder sehen!“ prophezeite ein kluger Mann mir seinerzeit, was ich mir aber gar nicht so recht vorstellen konnte. Waren wir doch eine zu coole Truppe. Natürlich kam es so: Nach dem Abitur verlor ich nach und nach den Kontakt zu meinen Schulfreunden. Einige sah ich an der FH noch wieder oder in unregelmäßigen Abständen mal zufällig. Bis wir dann aber wirklich wieder in größerer Menge zusammen kamen, vergingen dann doch zehn Jahre.
Letzten Samstag war es dann soweit. Ohne viel Organisationsaufwand betrieben zu haben, fand sich etwa die Hälfte meiner alten Stufe zum Grillen zusammen. Ein wenig schwierig war es gewesen alle zu erreichen. Und wie war’s? Prima! So grob wusste man in Facebooks Zeiten ja schon was die Menschen so treiben und schnell war man auch wieder auf dem aktuellsten Stand. Einige haben ein wenig zugelegt und/oder geheiratet, ein paar Kinder sind auch schon da. Aber ansonsten saßen da die gleichen Pappnasen wie vor vielen Jahren. Wir haben viel gelacht und ich fand es war ein sehr gelungener Abend.
Vielleicht dauert es diese Mal ja nicht zehn Jahre bis wir wieder am Feuer zusammensitzen. Ich würde mich freuen.
Alle zwei Jahre trifft sich mein liebster Pfadfinder-Landesverband zum Landespfingstlager. Alle Stämme des Landesverbandes kommen zusammen und verbringen das lange Pfingstwochenende unter einem gemeinsamen Motto. In den letzten Jahren hat es sich eingebürgert, dass ich eine Gruppe von Menschen um mich schare und mit denen unser Landeszentrum und dort insbesondere die abendliche Kneipe betreue. Außerdem gab es als Premiere auch das Projekt „Ewige Jagdgründe“, ein Angebot an ältere Pfadfinderinnen und Pfadfinder die aus der aktiven Arbeit in den Stämmen meistens schon ausgeschieden sind und dennoch gerne das Lager unabhängig von ihren Gruppen besuchen wollen.
Das alles macht mir eigentlich sehr viel Spaß. Eigentlich. Denn dieses Jahr war es fast soweit, dass ich am liebsten alles hingeworfen hätte. Dummerweise kann ich nicht einmal jemand anderes daran die Schuld geben. Die Planung lief im Vorfeld ein wenig chaotisch ab, vor allem auch weil ich selbst den Planungsaufwand unterschätzt habe. Wenn dann noch ein paar Dinge schief laufen, man beim Aufbau mit einem halb fertigen Landeszentrum auf einmal fast alleine da steht und sowieso nicht ganz auf der Höhe ist, dann resultiert daraus eine Menge Stress. Das hat mir nicht nur im Vorfeld den Spaß an der Sache ein wenig verdorben, sondern auch meine Stimmung auf dem Lager selbst nie so richtig gut werden lassen.
Rückblickend (und vor allem auch weitestgehend ausgeschlafen) betrachtet, fand ich nun aber doch ganz ok. Die „ewigen Jagdgründe“ kamen glaub ich gut an, die Leute hatten Spaß. In der Pinte gab es genug zu Essen und zu trinken, es kann sich also vermutlich niemand wirklich beschweren. In meinem Kopf stecken eine Menge Verbesserungsideen und Pläne, die ich eigentlich gerne umsetzen möchte. Diese gilt es nun in den kommenden Tagen zu Papier zu bringen und dann wieder loszulegen. In zwei Jahren steht wieder ein Landespfingstlager an – und dann direkt im Anschluss ein Bundeslager, dass natürlich auch eine Pinte braucht. Ich glaube fest daran, dass mit ein wenig mehr strukturierter Vorbereitung noch einiges zu reißen ist.
Ein Beitrag aus der Kategorie „Mahnung an den Zukunfts-Schneyra“.
Montag Abend. Eine Menge Dinge stehen auf meiner nach-feierabendlichen Liste die ich erledigen möchte. Wegen fiesen Gewitters kommt meine Bahn in Godorf ewig nicht und ich bin schon relativ schlecht drauf. Schnell noch zur Bank, das Portemonnaie auffüllen und dann nichts wie nach Hause. So jedenfalls der Plan. Der wird aber schnell zunichte gemacht, als ich einen Laden betrete und in meine rückwärtige Hosentasche greife: Der frisch gefüllte Geldbeutel ist weg! In meiner Rennerei habe ich ihn vermutlich nicht in die Hosentasche, sondern einfach mal daneben gesteckt. Mist.
Etwa eine Viertelstunde ist vergangen, seit ich vor dem Geldautomaten stand und schnell laufe ich die Strecke bis dorthin zurück. Zum Glück ist es nicht weit, ich hatte mich während eines Telefonats dazwischen mehr so auf einer Stelle aufgehalten. Natürlich finde ich in der Filiale nichts und auch auf dem Weg, den ich mehrmals ablaufe, ist nichts zu finden. Auch wenn ich nicht von einem Diebstahl ausgehe, lasse ich dennoch als erstes EC- und Visakarte sperren. Das geht erschreckend einfach, die Menschen an der Sperrhotline sind sehr nett und kompetent.
In meinem Kopf summiere ich auf, was nun alles fehlt und somit für teures Geld wieder angeschafft werden muss. Besonders ärgerlich empfinde ich den Verlust meiner Monatskarte für Bus und Bahn: Die ist nämlich teuer und wird garantiert nicht ersetzt. Abgesehen davon ärgere ich mich sehr, dass ich trottelig genug bin überhaupt was zu verlieren. Auch wenn mir schon einige merkwürdige Dinge passiert sind, wirklich etwas aus purer Dummheit verloren habe ich noch nie. Und was das jetzt an Zeit kostet bis alles wieder beisammen ist!
Auf dem Weg nach Hause laufe ich bei Freund Olli vorbei, der sich nicht nur mein Gejammer anhören muss, sondern auch direkt um Bargeld angebettelt wird. Nachdem wir dann noch einmal gemeinsam bei der Bank waren, laufe ich schließlich zu meiner Wohnung. Machen kann ich nun sowieso nichts mehr und ich habe immer noch eine Menge Dinge für das kommende Wochenende vorzubereiten.
… und am Ende wieder komplett wiederbekam
Wofür habe ich eigentlich ein mobiles Internetgerät? Und warum habe ich unterwegs nicht mal in meine Mails geschaut? Machen wir es kurz: Als ich den Computer hochfahre und meine Mails abrufe, springt mir direkt eine Nachricht mit dem Betreff „Brieftasche“ ins Auge, abgeschickt ungefähr zu dem Zeitpunkt als ich noch in Sparkassenfilialenmülleimer spähte:
Hallo Herr Schneider,
habe Ihre Brieftasche gefunden. Bitte melden Sie sich bei mir.
schreibt mir dort eine Frau und mir fallen ungefähr zwei Kilo Gestein vom Herzen. Kurze Zeit darauf halte ich das gute Stück mit all seinem Inhalt wieder in Händen und schaffe es dann nicht einmal, der ehrlichen Finderin einen Finderlohn aufzuzwingen.
Ein paar Dinge habe ich aus der Geschichte gelernt: Zu allererst natürlich, dass ich noch ein wenig besser auf meinen Kram aufpassen muss. Dann, dass es auch noch ehrliche Menschen auf der Welt gibt, tatsächlich verliere ich da nämlich hin und wieder ein wenig die Hoffnung. Und schließlich, dass die Impressumspflicht im Internet doch ihr Gutes hat: An meine Email-Adresse kam die nette Dame nämlich, in dem sie meinen Namen und meine Adresse googelte. Großartig!
Ein Abend, festgehalten in Instagram-Bildern. Ich mag die Einfachheit des Programms: Bild machen, Filter anwenden, hochladen, fertig. Und überhaupt sollte man sein Leben öfter mal auch in Bildern dokumentieren.
Wir waren in lustiger Runde unterwegs: Am Rhein, am alten Zoll, in der Fußgängerzone. Ein schöner Sommerabend, wie man ihn echt öfter gebrauchen könnte.
Wer sich das alles anschauen möchte, folge mir doch einfach bei Instagram. Man findet mich unter dem allseits bekannten Namen: „schneyra“. Ich bin gespannt, wer noch so alles dort ist.
