Vordefinierte Funktionen

1. Bild-Pop-up (hs_image())
2. Pop-up mit eigenem HTML-Inhalt (hs_html())
3. Pop-up mit verlinkter Seite als Inhalt (hs_url())
4. Bildergalerie (hs_slideshow())
5. Komplexes Beispiel

Bild-Pop-up
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

Rückgabewert

HTML-Text – kann mit echo ausgegeben werden.

<?php echo hs_image('/tu/images/campus-200.jpg', '/tu/images/campus.jpg',
                    'Das <b>Hörsaalgebäude</b>',
                    array('img_w' => '100',
                          'img_alt' => 'Zentrales Hörsaalgebäude',
                          'img_style' => 'float:right;border:1px solid orange')); ?>

Pop-up mit eigenem HTML-Inhalt
string hs_html(string $link_text, string $html_text, string $titel, [, array $stil])

Erzeugt einen anklickbaren Text – beim Anklicken öffnet sich ein Pop-up-Fenster mit HTML-Inhalt

Parameter

Rückgabewert

HTML-Text – kann mit echo ausgegeben werden.

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

Pop-up mit verlinkter Seite als Inhalt
string hs_url(string $link_text, string $url, string $titel, [, array $stil])

Erzeugt einen anklickbaren Text – beim Anklicken öffnet sich Pop-up-Fenster mit Dokument von URL als Inhalt

Parameter

Rückgabewert

HTML-Text – kann mit echo ausgegeben werden.

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

Bildergalerie
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
• Anzeige erfolgt für ein Bildseitenverhältnis von 16:9
• Bei nur einem Bild in der Galerie werden Kontrollelemente ausgeblendet und das vordefinierte Bildseitenverhältnis ignoriert
• Vollbildfunktion
• Abspielfunktion (Play)
• Vorschaubilder
  • Höhe 40px
  • Namenskonvention: Original bild.jpg → Vorschau bild-t.jpg
  • Erzeugen
    unter Windows

    z. B. mit IrfanView:

    • Datei → Batch(Stapel)-Konvertierung/Umbenennung
    • (•) Batch-Konvertierung + Umbenennen
    • Optionen für Batch-Konvertierung
      • [✓] Spezial-Optionen aktiv (Größe ändern etc.) → Setzen
      • [✓] Größe ändern
      • (•) Eine oder beide Seiten setzen: Höhe: 40 Pixel
    • Optionen für Batch-Umbenennen: Name (Muster): $N-t.jpg

    unter Linux

    mit Befehl convert (ImageMagick-Paket):

    # 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

• Kein JavaScript verfügbar
  • Wenn Styles für die Galerie definiert sind, wird das erste Bild groß angezeigt mit Beschreibung, weitere Bilder darunter mit 40px Höhe.
  • Sonst alle Bilder mit 40px Höhe.
• Wenn vorhanden, wird die Galeriebeschreibung angezeigt, sonst die Beschreibung des ersten Bildes.

Parameter

Rückgabewert

HTML-Text – kann mit echo ausgegeben werden.

Beispiele

• PHP-Quelltext → Bildergalerie
• Bildergalerien des Bereichs Veranstaltungsorganisation und Merchandising

string hs_slideshow(array(array('bild.jpg', '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-Text – kann mit echo ausgegeben werden.

Beispiel

• PHP-Quelltext → Bildergalerie

Komplexes Beispiel

• PHP-Quelltext (mit vielen Kommentaren) → Ergebnisseite

Manuelle Nutzung

1. Grundlagen für Pop-up-Effekte
2. Bild-Pop-up
3. Pop-up mit eigenem HTML-Inhalt
4. Pop-up mit verlinkter Seite als Inhalt
5. Bildergalerie

Grundlagen für Pop-up-Effekte

Grundgerüst mit Modifikationsmöglichkeiten, die für alle Pop-up-Elemente verwendet werden können

<div class="hs-modal">
  <a href="#" ... data-toggle="modal" data-target="#hs-modal" data-width="1200" data-height="400"
     data-title="Pop-up" data-vertical="top">
    Link
   </a>
  <div class="modal-footer">
    Angehängter Inhalt, z. B. Beschreibung für den Inhalt
  </div>
</div>

Parameter

Diese allgemeinen Parameter mit Standardwerten können weggelassen werden.

Bild-Pop-up

Erzeugt einen Link, der bei Klick ein Pop-up mit einem Bild anzeigt.

Das Hörsaalgebäude

<div class="hs-modal">
  <a href="/tu/images/campus.jpg" data-toggle="modal" data-target="#hs-modal" data-image>
    <img src="/tu/images/campus-200.jpg" alt="Das Hörsaalgebäude">
  </a>
  <div class="modal-footer">Das <b>Hörsaalgebäude</b></div>
</div>

Parameter

Pop-up mit eigenem HTML-Inhalt

Erzeugt einen Link, der bei Klick den HTML-Inhalt aus dem Element mit der Klasse "modal-body" in einem Pop-up anzeigt.

<div class="hs-modal">
  <a href="#" data-toggle="modal" data-target="#hs-modal" data-html>
    <strong>Klick mich!</strong>
  </a>
  <div class="modal-body">
    <h1>Du hast mich &hellip;</h1>
    <p><b>geklickt!</b></p>
    <hr />
    <a href="https://www.tu-chemnitz.de/">Zur TU-Chemnitz-Homepage</a>
    <hr />
    <button id="click">Klick mich!</button>
  </div>
</div>

Parameter

Pop-up mit verlinkter Seite als Inhalt

Erzeugt einen Link, der bei Klick die verlinkte Webseite innerhalb des Pop-ups anzeigt.

<div class="hs-modal">
  <a href="https://www.tu-chemnitz.de/mb/" data-toggle="modal" data-target="#hs-modal"
     data-remote-frame="/mb/?content" data-title="Fakultät Maschinenbau">Link zum Maschinenbau</a>
</div>

Parameter

Bildergalerie

Beim Erzeugen einer Galerie kann zwischen zwei Möglichkeiten gewählt werden – entweder als Direktanzeige oder als Pop-up, welches über ein Vorschaubild geöffnet wird.

Möglichkeit 1

<ul data-gallery="intern" data-interval="5000" class="test">
  <li>
    <a data-desc="Das erste Bild" href="images/sportfest/campussportfest_01.jpg">
      <img src="images/sportfest/campussportfest_01-t.jpg" alt="Das erste Bild">
    </a>
  </li>
  <li>
    <a data-desc="Das zweite Bild" href="images/sportfest/campussportfest_02.jpg">
      <img src="images/sportfest/campussportfest_02-t.jpg" alt="Das zweite Bild">
    </a>
  </li>
  <li>
    <a data-desc="Das dritte Bild" href="images/sportfest/campussportfest_03.jpg">
      <img src="images/sportfest/campussportfest_03-t.jpg" alt="Das dritte Bild">
    </a>
  </li>
</ul>

Parameter

Möglichkeit 2

<div class="hs-modal">
  <a href="#" data-toggle="modal" data-target="#hs-modal" data-html
     data-title="Galerie des Sportfestes">
    Klick mich!
  </a>
  <div class="modal-body">
    <?php echo hs_slideshow('images/sportfest'); ?>
  </div>
</div>

Beschreibung