Die Stärke der Venobox, einer JavaScript-Lightbox für Bild-Pop-Ups, ist, dass sie die Bildgröße nur an die Breite des Viewports anpasst. Wenn das Bild höher als der Darstellungsbereich ist, kann man es vertikal scrollen. Die Simple Image Gallery Extended von Kubik Rubik verwendet sie zum Beispiel. Mein Plugin hat einen anderen Ansatz. Es hilft, die Venobox in eigenem Joomla-Code zu nutzen/konfigurieren.

Dieser Beitrag bezieht sich auf Erweiterungsversionen ab 2021.02.30

Einfaches Test-Szenario. Was auf Sie zukommt.

Das Joomla-Plugin PLG_SYSTEM_VENOBOXGHSVS ist keine "Lightbox", die von alleine Bilder in PopUps ("Modals") zaubert. Man muss dafür eine oder mehrere Zeilen Code im PHP der Seite platzieren. Das kann auch im Template sein (index.php), wenn man das PopUp-Feature global verfügbar haben will.

Die simpelste Variante ohne weitere Konfiguration:

JHtml::_('plgvenoboxghsvs.venobox');

Weiters muss man seinen HTML-Code entsprechend auszeichnen, was ja auch bei anderen "Lightboxes" notwendig ist. Im einfachsten Fall sieht der so aus:

<a href="/images/meinBild-das-aufpoppen-soll.jpg" class="venobox">
 ... Hier ein Bild oder ein Text oder sonstwas, was man klickt ...
</a>

Beachte das class="venobox" im <A>-Tag!

Ergebnis

... Hier ein Bild oder ein Text oder sonstwas, was man klickt ...

Herunterladen Installation und Vorarbeiten

  • Am Ende dieses Beitrags finden Sie den Downloadlink für das Plugin, um es im Backend Ihres Joomlas zu Installieren. Das ist die Datei. die so oder ähnlich heißt, je nach Version: plg_system_venoboxghsvs-2021.02.30_1.9.2.zip
  • Sie finden es anschließend im Joomla-Backend unter Erweiterungen > Plugins unter dem Namen System - Venoboxintegration by GHSVS.de, wo Sie es öffnen, aktivieren und speichern.
  • Scheuen Sie sich nicht, mir Fragen zu stellen (deutsch oder englisch), wenn Sie Hilfe benötigen!

Nice to know (oder nicht). "Nerds-Talk".

JHtml-, HTMLHelper-Klassen - Was ist das?

Beides sind in Joomla existierende "Mutterklassen", die es Programmierern mittels "Kinderklassen" und darin befindlicher Methoden (Funktionen) erlauben, mehr oder weniger komplexen HTML-Code via PHP-Einzeiler in eine Seite einzusetzen. Das können z.B. <LINK>s auf CSS-Dateien im <HEAD> der Seite sein, aber auch speziell aufbereitete Codeblöcke an anderen Stellen. Vieles ist möglich.

Unser Venobox-Plugin stellt eine solche JHtml- bzw. HTMLHelper-Kind-Klasse bereit.

Die Mutterklassen dienen als Loader für die Kinderklassen (sie laden die Kinder bei Bedarf), deren Speicherort man mittels einer Methode addIncludePath(...) bekannt machen kann.

Natürlich übernimmt das Plugin im Normalbetrieb diesen Job. Wer es deaktiviert lassen will und trotzdem die Venobox-JHtml-Klasse nutzen, kann so eine Zeile im PHP-Code abfeuern:

\Joomla\CMS\HTML\HTMLHelper::addIncludePath(JPATH_SITE . '/plugins/system/venoboxghsvs/html');

In Joomla 4, falls jemand nach Codestellen mit  addIncludePath(...) sucht, wo diese Methode zum Einsatz kommt: Der Core verwendet nun vornehmlich weitaus komplexere (im Volksmund: kompliziertere) Techniken für das Bekanntmachen der Speicherorte. Trotzdem funktioniert der "alte Kram" immer noch.

Da JHtml und HTMLHelper vom Eregbnis der Ausgabe her identisch sind und zweitere Variante etwas mehr Erklärung benötigt, verwende ich im Folgenden erstere Variante. Gesagt sei nur, dass man seit Joomla 3.9 beide Varianten verwenden kann. Ebenso in Joomla 4, wo jedoch im Core-Code die HTMLHelper-Klasse das JHtml gänzlich abgelöst hat.

Joomla bringt viele praktische JHtml-Kinder-Klassen und -Methoden mit, die man verwenden kann.

Beispiel: Link einsetzen

echo JHtml::_('link',
 'https://www.ghsvs.de',
 'Dumme Seite',
 array('target' => '_blank', 'class' => 'text-fett')
);

erzeugt

<a href="https://www.ghsvs.de" target="_blank" class="text-fett">Dumme Seite</a>
Beispiel: Bootstrap- und zugleich JQuery-Link in <HEAD> (seit Joomla 4 eventuell auch anderswo) einsetzen
JHtml::_('bootstrap.framework');

erzeugt

<script src="/media/jui/js/jquery.min.js"></script>
<script src="/media/jui/js/jquery-noconflict.js"></script>
<script src="/media/jui/js/jquery-migrate.min.js"></script>
<script src="/media/jui/js/bootstrap.min.js"></script>

Da Joomla 4 neuere Bootstrap-Versionen beigepackt hat, die JQuery nicht mehr zwingend benötigen, sieht das Ergebnis dort ggf. anders aus.

Beispiel: Text verkürzen
echo JHtml::_('string.truncate',
 '1234567891011121314151617',
 13,
 false
);

Ausgegeben wird der auf 13 Zeichen verkützte Text:

1234567891011

Das Joomla-Plugin PLG_SYSTEM_VENOBOXGHSVS

Das Plugin bringt einen eigenen JHtml-Helper mit, also eine JHtml-Kinderklasse und macht Joomla das Verzeichnis, wo sie liegt, (nur) im Frontend bekannt, ohne sie schon komplett zu laden. Sie kann dann genutzt werden oder auch nicht.

Bild(er) via Link mit CSS-Klasse venobox öffnen

Siehe oben Überschrift "Test-Szenario". Durch die JHtml-Zeile wird in die Joomla Seite eingesetzt und vom Browser geladen:

  • JQuery
  • Venobox-Javascript-Datei
  • Venobox-Initialisierungs-Javascript (im Falle des obigen Beispiels mit Standard-Konfiguration)
  • Venobox-CSS

Standard-Konfiguration und Spezialparameter ready_or_load

Im Plugin finden Sie den Tabulator Standards-Configuration Dort einige Konfigurationsparameter, die ich gerne verwende.

Wenn Sie alle im jeweils ersten Einstellfeld "Activate" deaktivieren oder sie löschen, werden die Standards des Venobox-JavaScripts verwendet.  Alle diese Einstell-Möglichkeiten finden Sie auf der Herstellerseite https://veno.es/venobox/ unter der Überscrift "Options". Im Plugin können Sie sie hinzufügen, überschreiben usw. Vergessen Sie das Aktivieren der einzelnen Parameter und abschließendes Speichern des Plugins nicht.

Ein Sonderfall ist ein plugin-eigener Parameter ready_or_load. In seltenen Fällen wird die Venobox durch andere JavaScripte "behindert". Dann kann man mal den Wert load versuchen. Dadurch wird die Venobox möglichst spät geladen.

Immer eigene CSS-Klasse zum PopUp-Öffnen

Im Reiter Standards-Configuration des Plugins finden Sie ein Eingabefeld "Standard selector". Wenn Sie hier z.B. .pillePalle eintragen (Punkt vorne nicht vergessen!), lauscht das Plugin nicht mehr auf Links mit class="venobox" sondern auf class="pillePalle".

Eigene CSS-Klasse zum Öffnen verwenden und erstes code-seitiges Konfigurationsbeispiel

Beispiel-Szenario: Zwei oder mehr PopUp-Klassen verwenden
  1. Ich hatte mal ein PopUp-Plugin installiert, dass auf die CSS-Klasse class="thickbox" in Links lauschte. Das war kaputt und ich habe es deinstalliert. Anstatt nun überall in den alten Beiträgen die Link-Klasse gegen class="venobox" auszutauschen, verwende ich die Venobox mit einer zusätzlichen, abgewandelten Konfiguration, die ich per Code "übermittele".
  2. Das alte Plugin verwendete das title-Attribut des Links als Beschriftung für das PopUp. Ich habe die Venobox über Plugin-Konfiguration aber so eingestellt, dass das Attribut data-title verwendet wird. Auch das wollte ich jetzt natürlich nicht überall umschreiben müssen.
  3. Andererseits hatte ich in neueren Beiträgen schon überall die class="venobox" verwendet und dafür den Einzeiler oben unter Überschrift "Test-Szenario" in meinem Template drinnen, die die Optionen aus dem Plugin verwendet. Eine globale Umstellung des "Standard selector" auf .thickbox im Plugin war also nicht zielführend, weil ich ja beide Klassen nebeneinander verwenden wollte.

Aaaalso ?:

  • Also übergibt man in einer zusätzlichen JHtml-Zeile seinen Wunsch-Selektor (beachte im folgenden Code den Punkt in Zeile 3 vorne dran).
  • Zeile 4: Weiters möchte ich, dass in diesen PopUps nicht das data-title-Attribut des Links als Beschriftung verwendet wird, was ich im Plugin eingestellt habe, sondern das Attribut title. Man kann jedes Attribut verwenden, dass in einem Link angegeben ist. Könnte also auch sein eigenes erfinden oder sogar das href-Attribut des Links.
  • Zeile 5: Und, weil's fürs Demo hier lustig ist, füge ich zwei Teilen-Buttons (share) hinzu, die dann am unteren PopUp-Rand angezeigt werden.

Das PHP:

JHtml::_('plgvenoboxghsvs.venobox',
 array(
  'selector' => '.thickbox',
  'titleattr' => 'title',
  'share' => ['twitter', 'pinterest']
 )
);

Das HTML für die Links:

<p>
 <a href="/images/erweiterungen/plg_venoboxghsvs/Demobild_700x2000px.jpg" class="thickbox"
 data-title="Ich tue gar nichts, weil ich wegkonfiguriert wurde."
 title="Hallo, ich bin der title des Bild-Links und werden im PopUp angezeigt.">
  Öffne ein PopUp via eigener CSS-Klasse 'thickbox' mit Beschriftung aus 'title' und nicht 'data-title' und 2 Teilen-Knöpfen
 </a>
</p>
<p>
 <a href="/images/erweiterungen/plg_venoboxghsvs/Demobild_700x2000px.jpg" class="venobox"
 data-title="Hallo, ich bin der data-title des Bild-Links."
 title="Ich bin der title des Bild-Links und hab nix zu tun.">
  Und ich bin ein PopUp, dass weiterhin die Klasse 'venobox' verwendet und die Grundkonfiguration des Plugins.
 </a>
</p>
Ergebnis

Öffne ein PopUp via eigener CSS-Klasse 'thickbox' mit Beschriftung aus 'title' und nicht 'data-title' und 2 Teilen-Knöpfen

Und ich bin ein PopUp, dass weiterhin die Klasse 'venobox' verwendet und die Grundkonfiguration des Plugins.

Crux

Man muss ein bisschen aufpassen, dass man pro Seite jeden CSS-Selektor, z.B.  class="meinePopUpKlasse", nur 1x konfiguriert. Es passiert zwar nix, aber die zweite Konfiguration, wird dann ignoriert. Ein früheres

JHtml::_('plgvenoboxghsvs.venobox', array('selector' => '.meinePopUpKlasse'));

im Joomla-Ablauf wird ein später im Joomla-Ablauf auftauchendes

HTMLHelper::_('plgvenoboxghsvs.venobox',
 array(
  'selector' => '.meinePopUpKlasse',
  'titleBackground' => '#f00',
  'titleColor' => '#000'
 )
);

unwirksam machen.

Was die Sache kompliziert(er) machen kann, ist, dass es oft nicht einfach nachvollziehbar ist, wann Joomla, welche Konfiguration abarbeitet. Eine in einem Modul kommt bspw. früher dran als eine im Template und ähnlich.

Ein finales Spaß-Beispiel mit zwei blätterbaren PopUp-Iframes

Das PHP:

JHtml::_('plgvenoboxghsvs.venobox',
	array(
		'selector' => '.popup-iframe',
		'framewidth' => '400px',
		'frameheight' => '300px',
		'titleattr' => 'title',
		'arrowsColor' => '#fa0',
		'infinigall' => true,
	)
);

Das HTML dazu:

<p>
	<a href="https://ghsvs.de/credits-und-danke#content"
	data-vbtype="iframe"
	data-gall="myIframeGallery"
	class="popup-iframe"
	title="Ich bin der erste Iframe. Mit den Pfeilen rechts und links kannst du blättern.">
	Öffne einen Iframe in PopUp und verknüpfe
	ihn mit Blätterfunktion mit einem weiteren
	Iframe-Popup
	</a>
</p>
<p class="d-none">
	<a href="https://ghsvs.de/programmierer-schnipsel#content"
	data-vbtype="iframe"
	data-gall="myIframeGallery"
	class="popup-iframe"
	title="Ich bin der zweite Iframe in der Galerie.">
	Ich bin ein versteckter Link, aber im PopUp sieht man mich.
	</a>
</p>

Zwei verlinkte IFrames. Beide Links verwenden .popup-iframe als Klasse, weil so in der Konfiguration definiert. Beide haben Attribut data-gall="myIframeGallery". So werden sie als Galerie verknüpft (geht nat. auch bei Bildern). Der zweite Link wird durch ein d-none versteckt (Bootstrap-Klasse). infingall in der Konfiguration sorgt dafür, dass die angezeigten Iframes im Kreis geblättert werden können.

Öffne einen Iframe in PopUp und verknüpfe ihn mit Blätterfunktion mit einem weiteren Iframe-Popup

Ich bin ein versteckter Link, aber im PopUp sieht man mich.

jQuery-slim und Venobox? Experimentelle Einstellung des Plugins

Nach der Umstellung meiner Seite von jQuery auf die schmalere Variante jQuery Slim lief die Venobox nicht mehr. Das liegt daran, dass in der Slim-Variante sowohl AJAX- als auch Animations-Features entfernt wurden. Letztere nutzt Venobox jedoch. Ich habe deshalb die venobox.js umgeschrieben und der Erweiterung eine zusätzliche venobox-jquery-slim.js beigelegt.

In der Plugin-Konfiguration findet sich eine Einstellung, um letztere zu laden.

Achtung:

Das Plugin lädt NICHT jquery-slim für dich! Die Konfiguration ist also für Seiten, die das anderweitig abwickeln.

Die venobox-jquery-slim-Variante benötigt zusätzliches CSS in Deinem Template! Dieses liegt der Erweiterung nicht bei!

Derzeit sieht das bei mir so aus:

.vbox-overlay {
  opacity: 0;
  transition: opacity 0.5s;
}

.vbox-overlay.overlayShown {
  opacity: 1;
}

.vbox-overlay.overlayHidden {
  opacity: 0;
}

.vbox-content {
  opacity: 0;
  transition: opacity 1s;
}

.vbox-content.contentHidden {
  opacity: 0;
}

.vbox-content.contentShown {
  opacity: 1;
}