Navigation

Inhalt Hotkeys
Universitäts­rechen­zentrum
Pop-ups und Slideshow-Effekte

Nutzung von Pop-up- und Slideshow-Effekten

Allgemeines

Mit Hilfe dieses Moduls können Webautoren mit einfachen und modifizierbaren HTML-Elementen Pop-up-Effekte und Galerien realisieren.

  • Pop-up-Effekt: Erweiterung der Bootstrap Modals
  • Eingebettete oder über Pop-up-Effekt zu öffnende Galerie mit Play-Funktion

Einbinden

Um die Funktionen nutzen zu können, muss die php/hs.inc im Seitenkopf geladen werden.

<?php …
 require_once('php/hs.inc');
 seite(__FILE__);
?>

Zur Beachtung

Per Pop-up bereitgestellte Inhalte werden nicht gedruckt!
  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

$bild_klein
  • Dateiname/URL des kleinen, sofort sichtbaren Vorschaubilds
$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 – CSS-Stil(e) für kleines Bild
    • 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.

<?php 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;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

$link_text
  • Linktext, 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.

Klick mich!
<?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

$link_text
  • Linktext, 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.

<?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.jpgVorschau bild-t.jpg
    • Erzeugen
      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
      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

$verzeichnis
  • Ordnername, der die anzuzeigenden Bild- und Vorschau-Dateien enthält (kann auch relativ zum Ordner des PHP-Skriptes sein)
$typ
  • Typ der Anzeige
    • 'intern': Zeige innerhalb der Seite.
    • 'popup': Zeige in eigenem „Fenster“ (Pop-up).
$stil
  • array('Eigenschaft' => 'Wert', …) – kann auch leer sein: array()
    Eigenschaften:
    • intervall – Zeitintervall bei automatischen Anzeigen in ms (Standard: 5000 ms)
    • 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-Text – kann mit echo ausgegeben werden.

Beispiele

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

Komplexes Beispiel

  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

Gründgerü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.

href
  • Link, der aufgerufen wird, wenn JavaScript nicht aktiv ist
  • Muss mindestens „#“ enthalten
data-width
  • Standardwert: 800
  • Standardwert bei Bildern: Bildbreite
  • Angaben in Pixel
  • Legt die maximale Breite fest
data-height
  • Standardwert: auto (Inhalt)
  • Standardert bei URL: 100% (Inhalt + Titel)
  • Möglichst ausschließlich data-width verwenden
data-title
  • Standardwert: leer
  • Titel für das Pop-up
data-vertical
  • Standardwert: central
  • Bsp.: top, bottom
  • Werte von CSS (vertical-align) verwendbar
Link
  • Darf alle Elemente, außer neue a-Elemente (Links), enthalten.

Bild-Pop-up

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

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

Parameter

href
  • Link zum Bild
data-image
  • Ohne Inhalt

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.

Klick mich!
<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 …</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

data-html
  • Ohne Inhalt
modal-body
  • Inhalt des Pop-ups

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

data-remote-frame
  • Link zu dem anzuzeigenden Inhalt
  • Einbindung über iframe

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="/tu/veranstaltungen/rueckblicke/2018/campus_sportfest/campussportfest_01.jpg">
      <img src="/tu/veranstaltungen/rueckblicke/2018/campus_sportfest/campussportfest_01-t.jpg" alt="Das erste Bild">
    </a>
  </li>
  <li>
    <a data-desc="Das zweite Bild" href="/tu/veranstaltungen/rueckblicke/2018/campus_sportfest/campussportfest_02.jpg">
      <img src="/tu/veranstaltungen/rueckblicke/2018/campus_sportfest/campussportfest_02-t.jpg" alt="Das zweite Bild">
    </a>
  </li>
  <li>
    <a data-desc="Das dritte Bild" href="/tu/veranstaltungen/rueckblicke/2018/campus_sportfest/campussportfest_03.jpg">
      <img src="/tu/veranstaltungen/rueckblicke/2018/campus_sportfest/campussportfest_03-t.jpg" alt="Das dritte Bild">
    </a>
  </li>
</ul>

Parameter

data-gallery
  • Standardwert: intern
  • intern: Galerie wird direkt angezeigt
  • popup: Galerie wird über ein Vorschaubild als Pop-up geöffnet
data-interval
  • Standardwert: 3000
  • Angabe in ms
  • Kann weggelassen werden.
data-gdesc
  • Nur für popup
  • Beschreibung der Galerie
  • Kann weggelassen werden.
data-desc
  • Beschreibung zum Bild
style
  • popup: CSS-Stile, die dann auf die Galerievorschau übertragen werden
  • intern: CSS-Stile, die dann auf die Galerie übertragen werden
  • Kann weggelassen werden.
class
  • popup: CSS-Klassen, die auf die Galerievorschau übertragen werden
  • intern: CSS-Klassen, die auf die Galerie übertragen werden
  • Kann weggelassen werden.
href
  • Link zum Bild
  • Link, wenn JavaScript deaktiviert ist
src
  • Link zum Vorschaubild

Möglichkeit 2

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

Beschreibung

Das ist eine gemischte Variante mit dem Slideshow-Befehl und einem HTML-Pop-up, um die Vorteile zu vereinen. So kann aus einem Ordner sehr schnell eine Pop-up-Galerie erstellt werden mit den Einstellungsmöglichkeiten des Pop-ups.

Hinweis

Verschachtelte Pop-ups sind nicht möglich.

Presseartikel