Studieren in Chemnitz. Wissen, was gut ist.






  • Anmelden

Nutzung von Pop-Up- und Slideshow-Effekten mit Highslide

Webautoren können mit TUCAL bereitgestellte PHP-Funktionen nutzen, um einige Effekte mit der JavaScript-Bibliothek Highslide zu nutzen:

  • Pop-Up: Anzeigen von größeren Bildern, Hilfetexten oder Webseiten in einen neuen kleineren Fenster
  • Slideshow: Anzeigen von Bildergalerien
Dazu muss die Datei php/hs.inc eingeschlossen werden: 
# Nutzung von "Highslide"-Effekten
require_once('php/hs.inc');

Zur Beachtung:

  • Per "Aufklappfenster" bereitgestellten Inhalte werden nicht gedruckt.
  • Browser ohne JavaScript laden jeweils neue Seiten.

Funktionen

string hs_image(string $bild_klein, string $bild_groß, string $text [, array $stil])

Erzeugt ein (üblicherweise) kleines Bild, das bei Klick vergrößert wird.

Parameter

$bild_klein Dateiname / URL des kleinen, sofort sichtbaren Vorschaubildes
$bild_groß Dateiname /URL für großes Bild (sichtbar im Pop-Up)
$text HTML-Text als Bildunterschrift (sichtbar im Pop-Up)
$stil array('Eigenschaft' => 'Wert', ...) - kann auch leer sein: array()
Eigenschaften:
img_style ... style für kleines Bild (CSS)
img_alt ... alt-Tag für kleines Bild (Text)
img_title ... title-Tag für kleines Bild (Text), Standard: Klick zum Vergrößern
img_w, img_h ... Breite und Höhe (Pixel), Standard: automatisch ermittelt

Rückgabewert

HTML-Text, kann mit echo ausgegeben werden.

Beispiel

Das Auditorium maximum
echo hs_image('/tu/images/audimax-200.jpg', '/tu/images/audimax.jpg', 'Das <b>Auditorium maximum</b>', 
              array('img_w' => '100', 'img_style' => 'float:right;margin-left:1em;margin-right:1em;border:solid orange 1px'));

string hs_html(string $link_text, string $html_text, string $titel, [, array $stil])

Erzeugt einen anklickbaren Text - bei Anklicken öffnet sich kleines Fenster mit HTML-Inhalt

Parameter

$link_text Linkstext, der anklickbar ist, auch HTML möglich
$html_text HTML-Code, wird nach Aufklappen angezeigt
$titel Titel des Aufklappfensters (Text)
$stil array('Eigenschaft' => 'Wert', ...) - kann auch leer sein: array()
Eigenschaften:
w, h ... Breite und Höhe (Pixel) des Aufklappfensters, Standard: automatisch ermittelt

Rückgabewert

HTML-Text, kann mit echo ausgegeben werden.

Beispiel 

echo hs_html('Klick mich!', '<h1>Du hast mich ...</h1> <b>geklickt!</b>', 'Klick-Test');

Du hast mich ...

geklickt!
Klick mich!

string hs_url(string $link_text, string $url, string $titel, [, array $stil])

Erzeugt einen anklickbaren Text - bei Anklicken öffnet sich kleines Fenster mit Dokument von URL als Inhalt

Parameter

$link_text Linkstext, der anklickbar ist, auch HTML möglich
$url Web-Adresse der Seite, die aufgeklappt werden soll
Bei Webseiten im TUCAL-Layout kann ?content angehängt werden, wodurch im Pop-Up nur der Inhalt (ohne Rahmen) angezeigt wird.
$titel Titel des Aufklappfensters (Text)
$stil array('Eigenschaft' => 'Wert', ...) - kann auch leer sein: array()
Eigenschaften:
w, h ... Breite und Höhe (Pixel) des Aufklappfensters, Standard: automatisch ermittelt

Rückgabewert

HTML-Text, kann mit echo ausgegeben werden.

Beispiel 

echo hs_url('Hinweise zur Planung', 'planung.html?content', 'Planung', array('w' => '500'));
Hinweise zur Planung

string hs_slideshow(string $verzeichnis, string $typ, [, array $stil])

Erzeugt von allen JPEG-Bildern (Dateinamen enden auf .jpg oder .JPG) im Verzeichnis $verzeichnis eine Bildergalerie:
  • Sortierung alphabetisch nach Dateinamen.
  • Bilder sollten gleiche Höhe haben.
  • Dazu müssen Vorschaubilder existieren:
    • Höhe 40 Pixel
    • Namenskonvention: Original: bild.jpg → Vorschau: bild-t.jpg
    • z.B. erzeugbar mit Linux-Befehl: 
   # Erzeuge aus allen .jpg-Dateien des aktuellen Verzeichnisses
   # je eine neue Datei mit ...-t.jpg, maximale Höhe 40 Pixel
   for d in *.jpg; do convert "$d" -resize x40 "`basename "$d" .jpg`-t.jpg"; done

Parameter

$verzeichnis Ordnername, der die anzuzeigenden Bild- und Vorschau-Dateien enthält (kann auch relativ zum Odner des PHP-Skriptes sein sein)
$typ Typ der Anzeige, 'intern': zeige innerhalb der Seite, 'popup': zeige in eigenem "Fenster"
$stil array('Eigenschaft' => 'Wert', ...) - kann auch leer sein: array()
Eigenschaften:
intervall ... Zeitintervall bei automatischen Anzeigen in ms, Standard: 5000 ms
download ... einen Download-Link anbieten? - 1 = angezeigtes Bild, 'verzeichnis' = Bild gleichen Namens in verzeichnis
download_text ... Text für Download-Link (Standard: Download)
dimming ... für typ 'popup': Wert zwischen 0 und 1 (z.B. 0.4)
img_style ... für typ 'popup': CSS für Vorschaubild
div_style ... für typ 'popup': CSS für Vorschaubild-Absatz inkl. Bildunterschrift
more_text ... für typ 'popup': Text für einen Hinweis auf mehr Bilder unter Vorschaubild

Rückgabewert

HTML-/JavaScript-Text, kann mit echo ausgegeben werden.

Beispiel

string hs_slideshow(array(array('bild.jp', 'Beschreibung 1'), array(...)), string $typ, [, array $stil])

Erzeugt eine Bildergalerie mit Bildunterschrift von allen im ersten Feld aufgeführten Bilddateien. Es sind keine Vorschaubilder nötig.

Rückgabewert

HTML-/JavaScript-Text, kann mit echo ausgegeben werden.

Beispiel

Komplexeres Beispiel

PHP-Kode (mit vielen Kommentaren) → Ergebnisseite