psyhead.de - Forum, Community and more ... || JavaScript BBcode Bilder mit vorgegebener maximaler Brei

Forenübersicht : PHP / MYSQL / HTML / CSS »

[JS&BBcode] Bilder mit maximaler Breite

psyhead

Profilbild

King of Party
Beiträge: 1440

#3072 | 12.02.2008 - 20:25:19[Zitieren] [Bearbeiten]

Da es ab und an vorkam, dass Bilder mit einer Größe von z.B. 1000x600px in einem Beitrag eingebunden wurden, der Bereich aber maximal 600px Breite zulassen, gibt es hier eine Beitrag + Lösung.

Das Problem ist, dass meistens das Design zerrissen wird. bzw. die Bilder überstehen.

Jetzt habe ich hier auf der Seite eine Lösung gefunden, wie die Bilder automatisch an einer definierten Maximalbreite angepasst werden.

Dies wurde mit Javascript ermöglicht.

In erster Linie müssen wir in unserem BB-Code den -Tag anpassen und JavaScript-Code in die Seite einbinden.

bisheriger Bilder-BBcode (Die * müssen entfernt werden. Mein Parser würde die img-tags sonsst ausblenden!)

code

1
2
3
4 <?php $inhalt=preg_replace("/[*img](.*?)[/*img]/si", "<img src="1" border="0" alt="1" />", $inhalt); ?>

Bilder-BBcode jetzt (Die * müssen entfernt werden. Mein Parser würde die img-tags sonsst ausblenden!)

code

1
2
3
4
5
6
7 <?php $inhalt=preg_replace("/[*img](.*?)[/*img]/si", "<img src="1" border="0" onload="RePix(this)" onclick="javascript:window.open('1','','scrollbars=1,toolbar=0, resizable=1,menubar=0,directories=0,status=0')" alt="Click = Original" title="Click = Original" />", $inhalt); ?>

Hierbei wird die Funktion RePix(this) aufgerufen.

code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 <html> <head> <script type="text/javascript"> function RePix(Pix) { var Pc = 577; /* <--- Maximale Breite des Bildes in Pixel <--- */ if (Pix.width > Pc) { RePixH(Pix,Pc); RePixW(Pix,Pc); } } function RePixW(Pix,Pc) { Pix.width = Pc; } function RePixH(Pix,Pc) { var faktor; faktor = (Pix.width/Pc); Pix.height = (Pix.height/faktor); } </script> </head> <body> </body> </html>

In dieser Funktion wird die maximale Breite in Pixel angegeben. Dann wird geprüft, ob das Bild die maximale Breite überschreitet, wenn ja, dann soll die Breite und Höhe im Verhältnis angepasst werden.
Bis jetzt funktioniert das Script ganz gut, probiert es ruhig mal aus.

Das Script, worauf mein Script basiert, findet ihr hier:
www.phpbb.de/viewtopic.php?p=440276....topic.php?p=440276#440276

Das Manko dabei war, dass nur relativ zur Auflösung das Bild angepasst wurde. In meiner Version gibt man eine feste Breite in Pixel an und das Bild wird dennoch im korrekten Seitenverhältnis angepasst.

Das verkleinerte Bild kann man in originaler Größe anschauen, indem man auf das Bild klickt.

Ich hoffe, ich habe die Thematik verständlich beschrieben und konnte helfen. Wenn nicht, dann schreibt!