Bildgrößenausgabe ändern

Webdesign & Technik HTML & CSS
1

Hallo,

in der Gallerie meiner Gildenpage wird die Lightbox zum Öffnen verwendet der Bilder.
Da einige von uns jedoch mit einer Auflösung von 1280x1024 Spielen fallen die Screenshots auch entsprechend aus!

Daher würde ich gerne die Anzeige Größe auf 800x600 Beschränken.
Das heißt das er die Bilder nur so groß Anzeigt :susp: .

Hab das auf einigen Seiten schon gesehen die die gleiche Lightbox Version Nutzen.
Und eben für Orginalgröße einen Downloadbutten unten dran haben.

Ich verwende diese Lightbox die mir von eimen Kumpel empfohlen wurde:
huddletogether.com/projects/lightbox2/

Er selbst verwendet sie auch auf seiner Seite. Jedoch werden bei ihm die Bilder Skaliert angezeigt. Obwohl sie eigentlich größer sind o.0 .

Hoffe mir kann hier jemand sagen wie das Funktioniert :slight_smile:.

Hier mal die Ausgabe Seite der Gallerie:

<a href="lightbox/images/dg/gruppenfoto.JPG" rel="lightbox[gruppen]" title="Gruppe im M1"><img src="lightbox/images/thumbs/gruppenfoto.jpg" /></a>
<p>
<?php do { ?>
<a href="<?php echo $row_gala['adresse']; ?>" rel="lightbox[gala]" title="<?php echo $row_gala['title']; ?>">
<img src="<?php echo $row_gala['adresse']; ?>" width="100" height="80" />
<?php } while ($row_gala = mysql_fetch_assoc($gala)); ?></a></p>
<?php
mysql_free_result($gala);
?>
2

Nun, du bietest dann einfach gruppenfoto.JPG in der gewünschten
Größe an. Alternativ kannst du das auch in eine (X)HTML- oder
SVG-Datei einbinden und da abweichende Größenangaben
machen. Es gibt aber auch browser, die bei der Darstellung
eines Pixelbildes einfach eime Funktion anbieten, mit der man
die Größe des Bildes an den Darstellungsbereich anpassen kann,
wenn das Bild zu groß ist (Die Geckos haben das sehr präsent bei
Pixelgraphik, Opera hat allgemein ein paar Skalierungsfunktionen
eingebaut. Allerdings kann man da nicht von vorne herein als
Autor angeben, ob das Bild anfangs im Original oder angepaßt
dargestellt werden soll, ist ja auch mehr Geschmackssache des
Nutzers.

3

Ich meinte jetzt nicht nur das eine Bild.

Da ich den Space ja nicht mit den Bilder verschwenden möchte sollen die Bilder ja Extern Hoch geladen werden.

Mehr als einbinden per Eintrag macht das Script ja nicht.
Aber ich meinte weil es Seiten bzw. auch eine Bekannte Forensoftware (WBB) gibt die das auf eine Festgestellte Größe Runter Skalieren wenn es über einen Wert geht o.0.

Daher kam mir ja die Idee das so zu machen. Weil wenn man jetzt nicht Aufpasst und zum Beispiel (jetzt keine Werbung!) bei Imagebanana vergisst auf 800x600 zu stellen dann hat man den Salat mit der rießen Datei.

4

Da käme es dann ja eher auf die Dateigröße in Byte an, nicht
auf Höhe und Breite, besonders bei JPEG ist das nur recht grob
korreliert, hängt auch vom Motiv und der Kompressionsrate ab.

Wenn man verhindern will, daß Leute auf einen server zu große
(in Byte) Dateien laden, kann man das serverseitig begrenzen.
Höhe und Breite kann man mit PHP nach dem Hochladen
modifizieren, bei JPEG auch die Kompressionsrate. Man kann
allerdings schlecht vom Programm beurteilen lassen, ob das
Ergebnis der Kompression inhaltlich besonders sinnvoll ist,
weswegen man das meist bei solchen Anwendungen
suboptimal auslegt, die Dateien werden also (in Byte) größer,
als es für die Anzeige wirklich notwendig wäre ;o)

Da ich bei ähnlichen Abmessungen jedenfalls unter 100kB pro
Bild bleiben will, führe ich die Skalierung für meine Bildergalerie
jedenfalls inklusive Ausschnittsoptimierung mittels Gimp für jedes
Bild einzeln durch.

Wenn die Bilddatei nun auf einem anderen server liegt, so
skaliert man am besten nur mit CSS das img-Element, was man
sinnvoll machen kann, wenn etwa die Breite besonders kritisch
ist:
img.skaliere {max-width: 20em; height: auto}
Das führt dann dazu, daß alle Bilder der Klasse ‘skaliere’ nicht
größer als 20em in der Breite werden, das Aspektverhältnis aber
erhalten bleibt. Das ist besonders wichtig, wenn man verhindern
will, daß zu große Bilder ein CSS-Layout schreddern.
Da antike browser wie der MSIE6 etwa allerdings max-width nicht
interpretieren, kann man das bei antiken browsern nicht
komplett unterbinden, das bleibt dann eher ein Problem der
Leute, die noch so alte browser verwenden.
Innerhalb von SVG gibt es da noch mehr Einstellmöglichkeiten,
ich gehe aber mal davon aus, daß du das Bild nicht in eine
Vektorgraphik einbinden willst oder SVG verwenden, um solch
eine Bildergalerie wirklich qualitativ hochwertig umzusetzen.

5

Also ich rede von Höhe x Breite die Anzeigegröße

Ich habe zwar eine kleine Anleitung wie der jenige das bei IMG Banane einstellen soll aber wer hält sich den an das?

Daher wollte ich eben das jedes Bild das 800x600 Überschreitet nur in 800x600 anzeigen lassen.
Die Komprimierungsrate des Screencaptchers von Rappelz ist 3 o.0 aber das dürfte Relativ egal sein beim kleiner Darstellen :susp: .

wenn ich:
img.skaliere {max-width: 20em; height: auto}

jetzt auf:
img.skal {max-width: 600px; height: 800px}

ändere kann ich dann auch alles mit der Klasse skal (also den Importbereich der Bilder) ansprechen und die werden nur 800x600 angezeigt?

6

du muss statt height auch noch max-height:600px nehmen :wink:
sontzt wird jedes bild auf 800px höhe skaliert.

Wenn ein bild jedoch zb. 1280x1024px hat wird es auch auf 800*600 skaliert -> also nicht proportional.

7

Leider ist mir eben was eingekommen wo wohl auch keiner darauf geachtet hat:

Das Bild im img Tag hier ist der Tumbnail.
Das Bild wird ja aber per a Tag aufgemacht :susp: .

Folglich ist eine Skalierung nich möglich.

Daher wäre ja wohl die einzige Lösung das ganze doch auf dem Server zu loaden.
Nun ist da ja das Problem mit dem Begrentzen Speicher!

Ob ich die Gildenseite auf einen anderen Account lege weis ich noch nicht jedoch müsste ich jetzt erstmal ein Script haben um einen Upload in einen Festgelegten Ordner zu Vollziehen.

Wenn hier jemand hier Helfen kann wäre echt nett :slight_smile:

8

Damit das Aspektverhältnis stimmt, setzt man die weniger
wichtige Richtung deswegen ja auf ‘auto’ und auf keinen festen
Wert. Mit CSS bekommt man das nicht eleganter hin, das geht
etwa per SVG, wo man dann genau angeben kann, wie das Bild
in den angegebenen Bereich skaliert werden soll, ob es dann
insgesamt nicht größer als die angegebenen Werte werden soll
oder mindestens so groß und wenn es vom Aspektverhältnis nicht
klappt, wie es dann in dem Anzeigebereich angeordnet werden
soll.
Prinzipiell kann man auf ein (lokales) PHP-Skript verweisen,
welches das externe Bild in das SVG-Dokument einbettet.
Ohne SVG kann man da ansonsten das Bild per PHP analysieren
und genauere Angaben berechnen, die man dann per CSS
in einer (X)HTML-Ausgabe angeben kann. Wobei man das Bild
nur analysieren kann, wenn das PHP-Skript darauf Zugriff hat.

Man wird jedenfalls nicht auf das Bild direkt verweisen, sondern
auf ein Skript oder ein SVG-Dokument, welches die zusätzlichen
Angaben liefert.

9

Außlesen is doch sinnlos :unamused: Lightbox fungiert als „Link“

Ist nicht mehr als ein Link mit rel=„lightbox“ dran und im Head bereich die JS Dateien eingebunden :susp:

10

Wiso willst du eigentlich unbedingt auf einen anderen Server mit den Bildern? Reicht dir 1gb bzw. 2gb wirklich nicht aus? Und wenn dir das zu klein wird, kannst du bei einem sinnvoll genutzten Space problemlos eine Erweiterung haben :wink:

Du könntest ja die Bilder alle in ein Verzeichnis laden, und dann mit einem PHP Script alle Bilder die zu groß sind auf 800x bzw. x600 verkleinern.

11

Man muß den Verweis (link) ja nicht direkt auf das Bild setzen,
kann ja auch ein Skript zwischenschalten. Wenn die Zieldatei
SVG ist, kann man sogar innerhalb der URI im Verweis angeben,
ob oder wie die Datei skaliert werden soll oder allgemein,
welcher Ausschnitt dargestellt werden soll. Ich meine, das
basiert sogar auf einer allgemeineren Syntax, die allerdings wohl
nicht bei allen browsern überhaupt oder in voller Schönheit
implementiert ist, so daß es in der Praxis daran scheitert, wenn
es sich nicht um SVG handelt.
Kann man so also nicht sagen, daß man das mit einem Verweis
gar nicht machen kann ;o)

Ich sehe auch das Problem nicht, wenn man auf eine nackte
Pixelgraphik verweist, warum das unbedingt eine andere Größe
haben soll - gibt doch ganz verschiedene Monitore und
Auflösungen, da kann man als Autor doch gar nicht wissen, was
für den jeweiligen Nutzer optimal ist, wozu also die Mühe, wenn
der das einfach und besser selber entscheiden kann?

12

@aschachinger: Genau das möchte ich ja jetzt machen :slight_smile:. Die Bilder auf den Server!

Ich hab zwar einen Account nun für die Gildenpage aber irgendwie kommt noch keine Email an.

Nuja bis dahin hab ich Zeit das mit dem Server Upload zu basteln :slight_smile: .

Da ich kein Script kenne das Uploaden und Resizen kann wäre ein Vorschlag echt nett :wink:

13

möchtest du die bilder über ftp oder http mit input hochladen?

14

Welche Methode ist Besser o.0 mit Upload kenne ich mich nich so aus

15

Kommt drauf an was du machen willst :smiley:

Wenn du die Bilder immer selber hochlädst ist es über FTP einfacher.

Sollten jedoch auch die Besucher deiner Seite Bilder hochladen können ist es per post besser (ich glaube das PHP script wäre in diesem Fall auch einfacher… :wink: )

16

Also ich will den Leuten die möglichkeit Bieten Bilder hochzuladen die dann in der Gallerie angezeigt werden.

Hab selbst schon gesucht finde aber nur wo entweder nicht gehen bzw. nicht mehr git :stress: .

Was natürlich nicht Schlecht wäre wenn beim Upload die Auflösung bei Dateien auf 800x600 geändert wird (solange sie das Überschreiten).

Mit Upload Scripts jedoch hab ich Null Ahnung :unamused:

17

Jo so wie du das gesagt hast müsste sich das verwirklichen lassen.
Hab jedoch heute nicht mehr Zeit…werd das morgen mal versuchen (hab sowas selber auch noch nie gemacht :smiley: )

18

[quote=“aschachinger”]Jo so wie du das gesagt hast müsste sich das verwirklichen lassen.
Hab jedoch heute nicht mehr Zeit…werd das morgen mal versuchen (hab sowas selber auch noch nie gemacht :smiley: )[/quote]

Wäre echt nett von dir :slight_smile: . Da warte ich lieber einige Zeit als ein Drittklassiges Zeug zu nehmen was eh nicht geht…

19

Das hilft dir bestimmt weiter:
wer-weiss-was.de/theme163/ar … 02176.html

Ansonsten hier die Referenz für die Image-Funktionen:
de3.php.net/manual/de/book.image.php

20

Sry…hatte bis jetzt noch nicht Zeit und bin auch diese Woche ziemlich busy :neutral_face:
Also wenn dus noch nicht hast dann google doch einfach einmal ein wenig :smiley: