Greybox Bildgröße verändern Forum

A A A
Avatar

Bitte denke über eine Registrierung nach
guest

sp_LogInOut Login sp_Registration Registrieren

Registrieren | Passwort vergessen?
Erweiterte Suche

— Forumbereich —




— Match —





— Forum Optionen —





Minimale Suchwortlänge beträgt 3 Zeichen - die maximale 84

sp_TopicIcon
Greybox Bildgröße verändern
19 Mai 2010
1:44 am
Avatar
Kunstgasse
Gast
Guests

Hallo 🙂

gibt es eigentlich eine Möglichkeit, in der Greybox die hochgeladenen Bilder auf eine feste Größe einzustellen?

Wenn ich jetzt z.B. Bilder mit unterschiedlichen Größe habe, welche ich bei mir im Shop unter Kategorie eingestellt habe, möchte aber immer eine bestimmte Breite einhalten, hingegen sich die Höhe proportional entsprechend dynamisch mitverändert. Kann ich dies in der Greybox vorgeben?

Ich verzweifel langsam daranCry, denn das wäre viel einfacher, als alle Bilder manuell zu ändern.

*merci* Daniela 🙂

23 Juni 2010
2:31 am
Avatar
estebu
Gast
Guests

Hallo Daniela,

ich hatte genau das selbe Problem und zwar mit  dem Imageset der Greybox (gb_imageset)  und habe mich daher etwas mit javascript beschäftigt.

Ich habe es nun hinbekommen, dass die Darstellung der Greybox eine bestimmte Breite nicht überschreitet. Dazu musste ich ein paar kleine Ergänzungen am Javascript der Darstellung der Greybox vornehmen. Du musst also Zugang zu den Dateien der Greybox haben, um diese Veränderungen vornehmen zu können. Ich gehe davon aus, dass du die Dateien öffnen kannst. Nun mache fogendes:

Öffne die Datei greybox/loader_frame.html in einem geeignetem Editor (z.B. Notepad++)

Gehe zur Zeile 73 ( sie beginnt mit dem Eintrag  if(img_holder.width != 0 && img_holder.height != 0) )

Der gesamte Bereich, um den es sich handelt ist folgender:

 if(img_holder.width != 0 && img_holder.height != 0) {
            var width = img_holder.width;
            var height = img_holder.height;

            GB.width = width;
            GB.height = height;

Kurz zum Verständnis: diese Funktion prüft, ob es überhaupt eine Bildgröße gibt, also quasi: ob überhaupt ein Bild vorhanden ist ( if(img_holder.width != 0 && img_holder.height != 0) ) . Dann weist die Funktion die Bildgröße und Bildhöhe zu (var width = ) und zwar genau die, die das originale Bild auch besitzt (img_holder.width;)

Frag mich jetzt nicht, wo diese beiden Variablen definiert werden *g* aber das ist jetzt in unserem Fall auch egal 😉

Dieses wollen wir nun also angleichen und zwar dergestalt, dass die Bildgröße verändert wird, sobald die Breite einen bestimmten Wert überschreitet. Ich nehme hierfür mal die Breite von 1024 Pixel.

Zuerst definieren wir also den maximalen Wert der Bildbreite: var maxwidth=1024;

Der Code wird also um eine Zeile ergänzt und sieht im oberen Bereich nun also so aus:

if(img_holder.width != 0 && img_holder.height != 0) {
           
            var width = img_holder.width;
            var height = img_holder.height;
            var maxwidth=1024;

Jetzt sagen wir der Greybox, dass sie etwas bestimmtes machen soll, wenn die Bildbreite, die aus dem Original ausgelesen wird, diesen Maximalwert (also 1024 Pixel) überschreitet:

if(width > maxwidth)

und zwar soll die Greybox dann folgendes machen:

var imageprop=maxwidth/width;
var imagevsize=height*imageprop;
var width=maxwidth;
var height=(Math.ceil(imagevsize));

Zur Rechnung:
imageprop = neue Breite / ursprüngliche Breite - gibt den Verkleinerungsfaktor an, z.B. 640 / 1024 = 0,625

imagevsize = ursprüngliche Höhe * Verkleinerungsfaktor - gibt die mit imageprop errechnete proportionale Höhe des Bildes an, z.B 768*0,625 = 480

Dann werden Höhe und Breite in den Variablen imagewidth und imageheight gespeichert. (Math.ceil()) rundet den neuen Wert auf eine gerade Zahl auf.

Und das war's dann auch schon. Der komplett geänderte Code sieht dann so aus:

 if(img_holder.width != 0 && img_holder.height != 0) {
           
            var width = img_holder.width;
            var height = img_holder.height;
            var maxwidth=1024;
           
           
           
            if(width > maxwidth) {
            var imageprop=maxwidth/width;
              var imagevsize=height*imageprop;
              var width=maxwidth;
             var height=(Math.ceil(imagevsize));
            }

            GB.width = width;
            GB.height = height;

... und dann regulär weiter. Kopiere dir also einfach nur die roten Einträge heraus und setze sie zwischen die blauen. So sollte es klappen. Falls Du Deine Bildgröße vielleicht ur auf 800 Pixel beschränken möchtest, dann setze anstelle der Zahl 1024 einfach nur die 800 ein und fertig 😉

Ich hoffe, ich konnte auch Dir damit helfen.

Beste Grüße

Steffen




23 Juni 2010
2:39 am
Avatar
estebu
Gast
Guests

Kurze Korrektur (der Vollständigkeit halber)

Es muss heissen:

...Dann werden Höhe und Breite in den Variablen width und height gespeichert. (Math.ceil()) rundet den neuen Wert auf eine gerade Zahl auf...

Nur, um Verwirrungen zu vermeiden. Ich habe mir diese Rechenoperation aus einem Beitrag heraus kopiert (http://www.webmasterpro.de/old/content/1397/) und vergessen, die Variablen an mein Beispiel anzugleichen 😉 Danke hier nochmal an den Autor der Rechnung!!! Ich habe sie nur von PHP an Javascript angeglichen (Ist ja sehr ähnlich).

Gruß Steffen

Zeitzone des Forums: Europe/Berlin

Am meisten Mitglieder online: 353

Zurzeit Online: koelschmaedche
15 Gast/Gäste

Momentan betrachten diese Seite:
1 Gast/Gäste

Top Autoren:

loewenfrau: 1961

Marianke: 1366

polycarbon: 706

eclissesolare: 683

roboter80: 558

Antje: 354

Mitgliederstatistiken

Gastbeiträge: 252

Mitglieder: 2561

Moderatoren: 5

Administratoren: 1

Forumsstatistiken

Gruppen: 4

Foren: 28

Themen: 8803

Beiträge: 53971

Neuste Mitglieder:

Fasopimola, Bluetoothrhg, Sprinkleryur, Laurenty, uledthapeton, srelesponreuterf, ElmeriP, prinriaquochilddist, MaciekV, Ramonu, SalfinU, BerangerT, haroneoyvy, Patelf, MaxenceM, Stephanex, AlvaroF, BenjaminK, Tremblagp, shubhupatil, Davide, JohnesE, Garminzsqy, Hantourb, Bluetoothjgt

Moderatoren: tigerstyle: 2051, tito-toti: 976, Ede: 2811, Gulliver72: 754, Richy: 949

Administratoren: FredK: 6523