psyhead.org - || JSBBcode Bilder mit maximaler Breite

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

[JS&BBcode] Bilder mit maximaler Breite

[Antworten]

psyhead

Avatar

King of Party
Beiträge: 1291
Online

#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!

Das Leben ist zu kurz für lange Kabelwege

9x editiert. Zuletzt am 10.06.2008 - 21:43:03

Registriert seit: 1079d 18h 6m ( 06.08.2005 )

psyhead

Avatar

12.02.2008 - 20:25:19

Um die Werbung auszublenden, einfach kostenlos registrieren. Für Mitglieder ist die Werbung nicht sichtbar!

derlord87

Avatar

Party Sau
Beiträge: 486
Offline

#3077 | 12.02.2008 - 23:12:17[Zitieren] [Bearbeiten]

hey gut zu wissen....mal schaun ob ich das dann auch einbauen werden bei den ladybirds....

Registriert seit: 1071d 9m ( 14.08.2005 )

[Antworten]

Wer ist online?

	Insgesamt ist ein Benutzer online. [ Administrator ] [ Moderator ] psyhead
	Besucher die letzten 24h psyhead derlord87 axcez lythium cheerdad Cheermom MaMaaaCHen nadine

Statistik