Tipps zur Erstellung von Inhalten

Zum Betrachten der Bilder mit Lightbox, fügen Sie das rel="lightbox" Attribut in einen beliebigen Link-Tag hinzu. Zum Beispiel:

<a href="bild-1.jpg" rel="lightbox">Bild #1</a>

<a href="bild-1.jpg" rel="lightbox[][ihre beschriftung]">Bild #1</a>

To show a caption either use the title attribute or put in the second set of square brackets of the rel attribute.

Wenn Sie zusammengehörige Bilder zu einer Gruppe zusammenfassen wollen, dann müssen Sie einen Gruppennamen in eckigen Klammern in das rel-Attribut einfügen. Zum Beispiel:

<a href="bild-1.jpg" rel="lightbox[rundreise]">bild #1</a>
<a href="bild-2.jpg" rel="lightbox[rundreise][beschriftung 2]">bild #2</a>
<a href="bild-3.jpg" rel="lightbox[rundreise][beschriftung 3]">bild #3</a>


Es gibt keine Begrenzung für die Anzahl der Bilder pro Seite oder wie viele Bilder in einem Set zulässig sind.

Wenn Sie die Beschriftung in einen Hyperlink umwandeln möchten, formatieren Sie ihre Beschriftung in folgender Weise:

<a href="bild-1.jpg" rel='lightbox[][<a href="http://www.ihrlink.de">Bilddetails anschauen</a>]' >Bild #1</a>

Um eine Lightbox-Slideshow zu Ihren Bildern hinzuzufügen, fügen Sie das rel="lightshow[Slideshowname][Slideshowbeschriftung]" Attribut zu irgendein Link-Tag zum Aktivieren der Slideshow hinzu. Als Beispiel:

<a href="bild-1.jpg" rel="lightshow[show1]">Bild #1</a>
<a href="bild-2.jpg" rel="lightshow[show1]">Bild #2</a>
<a href="bild-3.jpg" rel="lightshow[show1]">Bild #3</a>


Der Titelattribut in dem Link-Tag ist optional. Jedoch wird durch diesen Attribut die Anzeige einer Bildbeschriftung in der Lightbox ermöglicht.

Es gibt keine Begrenzung für die Anzahl der Bilder einer Slideshow oder wie viele Bilder in einem Slideshow zulässig sind.

Wenn Sie die Beschriftung in einen Hyperlink umwandeln möchten, formatieren Sie ihre Beschriftung in folgender Weise:

<a href="bild-1.jpg" rel='lightshow[show1][<a href="http://www.ihrlink.de">Bilddetails anschauen</a>]'>bild #1</a>

Es ist möglich Websites durch IFrames in der Lightbox anzuzeigen. In diesem Fall muss das rel-Attribute auf "lightframe" gesetzt sein. Es ist auch möglich diese Websites zu gruppieren, (z.B. lightframe[suche][beschriftung]) und zusätzlich ist es möglich einige der IFrame-Eigenschaften zu kontrollieren. Unter anderen kann die 'Breite', 'Höhe' und die 'Scroll' Eigenschaft von dem IFrame gesetzt werden. Diese Eigenschaften werden von dem Gruppenname mit ein | getrennt, z.B. lightframe[suche|width:100px;][beschriftung]. Wenn keine Gruppierung benutzt wird, dann wird die | trotzdem verwendet und das Format würde wie folgend sein lightframe[|width:100px;]. Diese Eigenschaften sollten im folgenden Format sein "Eigenschaft: Wert;" - vergessen Sie das schließende Semikolon nicht. Wenn keine IFrame-Eigenschaft gesetzt wurde, dann wird die Standard Breite und Höhe von 400px verwendet. Für detailliertere Beispiele siehe unten.

Einfaches Beispiel:
<a href="http://www.google.de" rel="lightframe">Google Suche</a>

Beispiel für das Gruppieren:
<a href="http://www.google.de" rel="lightframe[suche][beschriftung]">Google Suche</a>
<a href="http://de.yahoo.com/" rel="lightframe[suche]">Yahoo Suche</a>

Beispiel mit Kontrolle über die IFrame Eigenschaften:
<a href="http://www.google.de" rel="lightframe[|width:400px; height:300px; scrolling: auto;][beschriftung]">Google Suche</a>

Beispiel mit Kontrolle über die IFrame Eigenschaften, wenn gruppiert:
<a href="http://www.google.de" rel="lightframe[suche|width:400px; height:300px; scrolling: auto;]">Google Suche</a>
<a href="http://de.yahoo.com" rel="lightframe[suche|width:400px; height:300px;]">Yahoo Suche</a>

It's possible to show video content in the lightbox. In this case the "rel" attribute should be set to lightvideo. It's possible to group videos and to control the size of the lightbox by setting the "width" and "height" properties. The properties can be configured like lightvideo[group|width:300px; height: 200px;][caption]. The properties should all be of the format "property: value;" - note the closing semi-colon. If no properties are set, then the default width and height of 400px will be used. See below for more detailed examples.

Einfaches Beispiel:
<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo">Google Video Beispiel - Standardgröße</a>

Beispiel für eine kontrollierte Größe der Lightbox:
<a href="http://video.google.com/videoplay?docid=1811233136844420765" rel="lightvideo[group|width:400px; height:300px;][caption]">Google video example - custom size</a>

Unterstützte Video Formate sind asx, wmv, mov und swf. Ebenso werden einige Video-Hoster unterstützt, z.B. YouTube und Google Video. Für eine ausführliche Liste der unterstützten Video-Hoster, schauen Sie bitte in die Online Dokumentation.

Es ist möglich HTML-Snippets in der Lightbox anzuzeigen, die mit der gleichen Domain zu erreichen sind. In diesem Fall muss das rel-Attribut auf "lightmodal" gesetzt sein. Es ist auch möglich diese Inhalte zu gruppieren,(z.b. lightmodal[gruppe][beschriftung])und zusätzlich ist es möglich einige der Modal-Eigenschaften zu kontrollieren. Unter anderen kann die 'Breite', 'Höhe' und die 'Scroll' Eigenschaft von dem Modal gesetzt werden. aber es ist möglich die Größe der Lightbox zu kontrollieren, durch ändern der Eigenschaften für die "Breite" und "Höhe". Diese Eigenschaften werden von dem Gruppenname mit ein | getrennt, z.B. lightmodal[gruppe|width:100px;][beschriftung]. Wenn keine Gruppierung benutzt wird, dann wird der | trotzdem verwendet und das Format würde folgend sein lightmodal[|width:100px;]. Diese Eigenschaften sollten im folgenden Format sein "Eigenschaft: Wert;" - vergessen Sie das schließende Semikolon nicht. Wenn keine Modal-Eigenschaft gesetzt wurde, dann wird die Standard Breite und Höhe von 400px verwendet. Für detailliertere Beispiele siehe unten.

Einfaches Beispiel:
<a href="suche.php" rel="lightmodal">Suche</a>

Beispiel für das Gruppieren:
<a href="suche.php" rel="lightmodal[suche][beschriftung 1]">Suche</a>
<a href="suche.php?status=1" rel="lightmodal[suche]">Suche veröffentlicht</a>

Beispiel mit Kontrolle über die Modal-Eigenschaften:
<a href="suche.php" rel="lightmodal[|width:400px; height:300px; scrolling: auto;][beschriftung]">Suche</a>

Beispiel mit Kontrolle über die Modal-Eigenschaften, wenn gruppiert:
<a href="suche.php" rel="lightmodal[suche|width:400px; height:300px; scrolling: auto;]">Suche</a>
<a href="suche.php?status=1" rel="lightmodal[suche|width:400px; height:300px;]">Suche veröffentlicht</a>

BBCode Guide

BBCode allows you to specify formatting rules for your text, even if you are not allowed to use HTML in your posts. BBCode originated from the forum software named PHPBB, and this site has a special implementation of it.

In BBCode terms, you use "tags" to add formatting to your text. Every tag is enclosed in [ and ] brackets. If you want to mark some region in your text, you need to use an opening tag and a closing tag. Closing tags start with [/, as you will see in the examples below. If you mistype a tag or forget to close it, you will not get the desired formatting.

Simple text formatting

BBCode allows you to make some parts of your texts stand out from the context by adding [b]old, [i]talic, [u]nderlined and [s]trikeout formatting to them. The [color], [size] and [font] tags allow you to change the color, size and font of portions of the text you enclose with these tags. Both require a parameter (which colour, how big, what font) that is suffixed to the name of the tag by an equals sign (example below). You should not repeat the parameter in the closing tag!

You can specify any recognized color name (red, blue, green, white, etc.) or a hexadecimal color value (#CDCDCD, #FFFFFF, etc.) as the parameter of a [color] tag. The [size] tag allows you to set the font size between 6 and 48, 6 being the smallest size. Note that using very large text is considered by many to be annoying, and it is seldom a good idea to try to attract more attention to your post in this way. The [font] tag can be set to any valid font face, such as Arial, Arial Black, Courier, Courier New, Helvetica, Impact, Times New Roman, Verdana, etc.

Creating links

You have multiple options to specify links to other destinations in your posts.

URLs (Uniform Resource Locators) starting with "www" or "ftp" (eg. www.example.com) are automatically recognized and replaced with links. You can also use the [url] tag with a parameter to specify a link with meaningful text to click on. If you use the url tag without the parameter, the enclosed text is assumed to be a URL, and a link is created to that destination.

Email addresses in posts are also automatically converted to email links. For compatibility with common BBCode implementations, an [email] tag is provided.

Displaying images

The [img] tag allows you to display an image in your post. You need to specify a URL to the image, so it needs to be accessible somewhere on the internet. Beware of adding very large images to your text, or the page will load very slowly!

If you enclose a URL in an [img] tag, then it will be replaced with code to display the image. For example A good screenshot: [img]http://example.com/screenshot.png[/img] will show you the screenshot (if it exists).

You can also specify the desired display dimensions of the image by adding a dimension parameter to the [img] tag. A good screenshot: [img=640x480]http://example.com/screenshot.png[/img] will display the image in 640x480 (though the full image will be downloaded). Do not use this to show a thumbnail of an image!

You are free to link an image to an external destination by enclosing the [img] tag with a [url] tag: See [url=http://example.com][img]http://example.com/screenshot.png[/img][/url].

Ordered and unordered lists

The simplest list type is the unordered list, which means that there is no numbering applied to the elements. You can make such a list by enclosing the list elements in [list] opening and closing tags. Specify the start of one element with the [*] list element marker, which has no closing tag pair.

To create an ordered list, you should add a parameter to the [list] list tag specifying what type of ordered list you would like to see. The possible parameters are "i", "I", "1", "a", "A", "c", "d" and "s" which all correspond to the display of the first list element.

I love
 [list]
  [*]Oranges
  [*]Apples
  [*]Bananas
 [/list]

I love
 [list=I]
  [*]Oranges
  [*]Apples
  [*]Bananas
 [/list]

I love
 [list=1]
  [*]Oranges
  [*]Apples
  [*]Bananas
 [/list]

Fixed-width text and block formatting

You can use the [code] tag to add an inline fixed-width formatted part or to add a block of (usually program) code. If there is any newline present between the opening and closing tags, then a block will be displayed.

Similarly, the [php] tag can be used to post PHP code. PHP code will automatically be syntax highlighted for easier readability.

Text and block alignment

You can also set the alignment of the text by using [left], [right] and [center] tags. The [float] tag can be used to place floating boxes in the text (especially handy for images). You can specify the direction of the floating with [float=left] and [float=right]. The [justify] tag can be used justify text on both sides of the page.

Other supported tags

It is possible to quote something that has already been posted, by just putting [quote][/quote] tags around it. To quote a specific person, use something like [quote=John]. Quote tags can be nested.

The [sub] and [sup] tags can be used to add subscript and superscript text. For example, H[sub]2[/sub]O gives H₂O, while X[sup]3[/sup] gives X³.

The [acronym] tag allow you to identify text as an acronym and provide a description when users move their mouse over the tag. For example, [acronym=Structured Query Language]SQL[/acronym] produces SQL.

The [abbr] tag allow you to identify text as an abbreviation and provide a description when users move their mouse over the tag. For example, [abbr=World Wide Web]WWW[/abbr] produces WWW.

The [notag] tags prevent text inside the tags from being parsed. This allows you to give examples of BBcode and not have it converted to HTML. For example: [notag]These [b]tags[/b] are not rendered[/notag] will produce "These [b]tags[/b] are not rendered".

The [hr] tag draws a horizontal line across the page. Handy for separating chunks of text.

Using multiple formatting tags

You can apply more than one formatting specification to a portion of some text. I was at [b][i]the coast[/i][/b] will be rendered as I was at the coast.

Make sure that you take care of the proper order of the opening and closing tags. You should close the tags in the opposite order in which you opened them. Otherwise you might get very strange rendering results. Also check your post with the preview function before submitting it, in case there are formatting errors due to improper BBCode usage.

Quoted content can be placed between [quote] tags in order to be displayed as an indented quote. Every [quote] tag must have a corresponding [/quote] tag. For example:

[quote]This is a simple quote.[/quote]

Additionally, there is an optional attribute which allows quotes to specify the original author.

[quote=Mr. Drupal]This is a quote with an attribution line.[/quote]

Finally, multiple [quote] tags can be nested within one another. Just remember that every [quote] tag must have a corresponding [/quote] tag.

[quote]I think she says it best...
[quote=Ms. Quotation]This is a quote nested within another quote.[/quote]
but you can't argue with
[quote=Ms. Reply]The more quotes, the merrier.
Just don't get too carried away.[/quote]
And I have nothing more to say.[/quote]