Highslide-Textbox

[supercat]

Da auch eine Web-Site irgendwie endlich ist, gibt es genügend Anlässe, Raum für zusätzliche Informationen (z.B. Begriffserklärungen und andere Notizen) zu suchen. Ein eleganter Weg knüpft an Arvids Highslide-Hack für linke und rechte Bilder an. Das geniale Script ermöglicht nämlich auch, Textboxen anzulegen. Arvid (Ehre, wem Ehre gebührt) hat fix ausgetüftelt, wie das Ganze dann in die Mozilo-Synthax hineinkommt.

Der Reihe nach: Der einfachste Weg, auch für die Gestaltung der Highslide-Bilder, führt über die Highslide-Seite. Dort gibt es inzwischen einen Online-Editor, mit dem jeder nach seinem Gusto seinen Highslide-Effekt basteln kann. >>> Hier geht es zum Editor.

Hat man sich alles zusammengeklickt, kann man sich das angepasste Script als ZIP-Datei herunterladen. Die Datei anschließend ins Mozilo-Verzeichnis entpacken. Dabei ist auch eine Beispieldatei, welche genau beschreibt, was in den Head der eigenen Template-Datei eingefügt werden muss. Da es eigentlich immer das Gleiche ist, reichen diese Zeilen

Code Auswählen Erweitern

<!-- HIGHSLIDE -->
        <script type="text/javascript" src="highslide/highslide-full.js"></script>
        <script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
        <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
        <![endif]-->
<!-- /HIGHSLIDE -->

Damit es mit der Textbox auch klappt, muss noch Folgendes der synthax.conf hinzugefügt werden

Code Auswählen Erweitern

highslidetextlink = <a href="#" onclick="return hs.htmlExpand(this, { headingText: '{DESCRIPTION}' })">{VALUE}</a>
highslidetextcontent = <div class="highslide-maincontent">{VALUE}</div>

Im Mozilo-Editor schaut es dann so aus:

Code Auswählen Erweitern

[highslidetextlink|Ein Begriff][highslidetextcontent|Das ist jetzt der Text zum Begriff, welcher per Mozilo formatiert werden und auch z.B. Links enthalten kann.]

Ein Ergebnis sieht in etwa so aus:



Der Hintergrund wird abgedunkelt und es erscheint die (veränderbare) Textbox.

Natürlich kann der Textbox auch eine Überschrift mitgegeben werden, mit dem Gleichheitszeichen:

Code Auswählen Erweitern

[highslidetextlink=Ein Begriff|Ein Begriff]
Achtung: In der originalen Highslide-Konfiguration (highslide.config.js) steht ein Linkverweis. Wird er nicht entfernt, steht er genau zwischen Überschrift und Text in der Box. Das sieht nicht so gut aus...

Also, dann probiert es mal aus. Denn mit dem Editor lassen sich auch die Highslide-Bilder verschönern, z.B. mit einem Rand. Na ja, manche Bilder haben es eigentlich nicht nötig



Abschließend trotzdem noch der Hinweis, dass solche Info-Boxen selbstredend auch einfacher zu bewerkstelligen sind - vorwiegend mit CSS. Ops, hatte ich das hier schon mal beschrieben 

[stefanbe]

oder ohne es in der template.html eintragen zu müssen dieses Benutzer Syntax Element vor dem ersten [highslidetext???|] Elemnt setzen

Code Auswählen Erweitern

highslidestart = <script type="text/javascript" src="highslide/highslide-full.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<script type="text/javascript">
        document.write('<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
        <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
        <![endif]-->');
</script>Ungetestet und die Zeilen ümbrüche musssen entfernt werden

gruss stefanbe

[Smirschi]

So eine ähnliche Funktion habe ich schon länger, nur ist die mit Fehlern behaftet. Ich probiere es mal mit deinem Workaround. Danke!