Erweiterung Lightbox4ward

Mit der Erweiterung Lightbox4ward stehen Ihnen 5 Optionen zur Verfügung, mit denen Sie unterschiedliche Elemente in der Mediabox anzeigen lassen können.
  • Option Bild
  • Option Galerie
  • Option Video
  • Option Artikel
  • Option Externer Link

Beispiele

Aufruf eines Bild in der Mediabox

Wenn Sie die Option Bild auswählen, können Sie ein Bild in der Mediabox anzeigen lassen.

als Textlink

Bild

als Bildlink

North American T6

Aufruf von Bildern (Galerie) in der Mediabox

Wenn Sie die Option Galerie auswählen, können Sie mehrere Bilder in der Mediabox anzeigen lassen. Diese werden nicht wie das Inhaltselement Galerie als Vorschaubilder angezeigt, sondern in der definierten Größe einzeln angezeigt und können dann durchblättert werden.

als Textlink

Galerie

als Bildlink

Junkers JU 52

Aufruf eines Artikels in der Mediabox

Wenn Sie die Option Artikel auswählen, können Sie einzelne Artikel in der Mediabox anzeigen lassen.
Artikel

Aufruf von Videos in der Mediabox

Wenn Sie die Option Video auswählen, können Sie ein lokales Video abspielen. Für die Anzeige eines externen Videos verwenden Sie die Option "Externer Link".

Video einbinden (flv)

Aufruf von Flash (swf) in der Mediabox

externer Link
Flashfilm in der Mediabox

Aufruf von externen Inhalten in der Mediabox

Wenn Sie die Option Galerie auswählen, können Sie mehrere Bilder in der Mediabox anzeigen lassen. Diese werden nicht wie das Inhaltselement Galerie als Vorchaubilder angezeigt, sondern in der definierten Größe einzeln angezeigt und können dann durchblättert werden.
YouTube Video -> winanscreative presents CssEditor
Google in a box

Beispiel eines Frontend-Logins in der Mediabox

Auch ein Frontend-Login kann in der Mediabox dargestellt werden.
Login in der Lightbox4ward

Test-Login:

Benutzername: planepix
Passwort: planepix

Für die Loginseite benötigen Sie ein "leeres" Seitenlayout, dass Sie der Seite mit dem Inhaltselement Login zuweisen. Zusätzlich definieren Sie eine weitere, veröffentlichte, aber im Menü versteckte Seite, die nach einem erfolgreichen Login über die Mediabox angezeigt wird.

Die Weiterleitungsseite, die im Modul "Login" definiert wird, enthält nur einen JavaScript-Code, der für die Weiterleitung sorgt und die Mediabox schliesst.

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready',function(){
 parent.location.href = 'login-erfolgreich-erfolg.html';
 parent.Mediabox.close();
});
//--><!]]>
</script>

Speichern Sie den JavaScript-Code als "login-success.php" ab und kopieren die Datei in den Ordner "/templates" und binden diesen dann in einem Inhaltselement "HTML" mit dem Insert-Tag {‎‎‎‎{‎‎‎‎‎file‎‎:‎‎:‎login-success.php‎‎‎‎‎}‎‎‎}‎ ein.

Konfiguration | Anpassungen des Templates

Nach der Installation der Erweiterung steht auch ein Template "moo_lightbox4ward.tpl" zur Verfügung, welches angepasst werden kann.

<?php

/*******************/
/** Configuration **/
/*******************/


/* Customize Style
 * You can also set this to blank and include the style in any other way.
 * Probalby with the TL-Style-Editor
*/
// $GLOBALS['TL_CSS']['lightbox4ward_css'] = 'system/modules/lightbox4ward/html/css/mediaboxAdvWhite.css|screen';
// $GLOBALS['TL_CSS']['lightbox4ward_css'] = 'system/modules/lightbox4ward/html/css/mediaboxAdvBlack.css|screen';


/* Mediabox Configs */
$GLOBALS['Lightbox4ward']['options']['overlayOpacity'] = 0.8;
$GLOBALS['Lightbox4ward']['options']['resizeDuration'] = 800;
$GLOBALS['Lightbox4ward']['options']['initialWidth'] = 180;
$GLOBALS['Lightbox4ward']['options']['initialHeight'] = 100;
$GLOBALS['Lightbox4ward']['options']['resizeTransition'] = 'Fx.Transitions.Quart.easeInOut';





/****************/
/** CONFIG END **/
/****************/

// Add mediabox default style sheet 
if(!isset($GLOBALS['TL_CSS']['lightbox4ward_css'])) $GLOBALS['TL_CSS']['lightbox4ward_css'] = 'system/modules/lightbox4ward/html/css/4wardmedia.css|screen';

// Compile Options
(preg_match('~(http[s]?://[^/]+).*~',$this->Environment->base,$erg)) ? $host = $erg[1] : $host=''; 
$lightbox4wardOptions = 'hostName:"'.$host.'",';
if(isset($GLOBALS['Lightbox4ward']['options']) && is_array($GLOBALS['Lightbox4ward']['options']) && count($GLOBALS['Lightbox4ward']['options']) > 0){
	foreach($GLOBALS['Lightbox4ward']['options'] as $option => $value){
		$lightbox4wardOptions .= $option.':'.$value.',';
	}
}
$lightbox4wardOptions = substr($lightbox4wardOptions,0,-1); 
?>

<script type="text/javascript" src="system/modules/lightbox4ward/html/mediaboxAdv_lightbox4ward.js"></script>

<script type="text/javascript">
<!--//--><![CDATA[//><!--
	Mediabox.customOptions = {<?php echo $lightbox4wardOptions; ?>};
	Mediabox.scanPage = function() {
		var links = $$("a").filter(function(el) {
			return el.rel && el.rel.test(/^(lightbox|mediabox)/i);
		});
		$$(links).mediabox(Mediabox.customOptions, null, function(el) {
			var rel0 = this.rel.replace(/[[]|]/gi," ");
			var relsize = rel0.split(" ");
			return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
		});
	};
	window.addEvent("domready", Mediabox.scanPage);
	
 //--><!]]>
</script>
Anpassungen werden hier definiert und können ergänzt werden. Die möglichen Parameter finden Sie in der Datei "mediaboxAdv_lightbox4ward.js" im Ordner "/system/modules/lightbox4ward/html/". 
/* Mediabox Configs */
$GLOBALS['Lightbox4ward']['options']['overlayOpacity'] = 0.8;
$GLOBALS['Lightbox4ward']['options']['resizeDuration'] = 800;
$GLOBALS['Lightbox4ward']['options']['initialWidth'] = 180;
$GLOBALS['Lightbox4ward']['options']['initialHeight'] = 100;
$GLOBALS['Lightbox4ward']['options']['resizeTransition'] = 'Fx.Transitions.Quart.easeInOut';
Anpassungen (Auswahl der Themen / Themes) der CSS-Definitionen können Sie hier einstellen: 
/* Customize Style
* You can also set this to blank and include the style in any other way.
* Probalby with the TL-Style-Editor
*/
// $GLOBALS['TL_CSS']['lightbox4ward_css'] = 'system/modules/lightbox4ward/html/css/mediaboxAdvWhite.css|screen';
// $GLOBALS['TL_CSS']['lightbox4ward_css'] = 'system/modules/lightbox4ward/html/css/mediaboxAdvBlack.css|screen';
Auch hier können Sie die Pfade anpassen, um die CSS-Definitionen updatesicher zu speichern:

// $GLOBALS['TL_CSS']['lightbox4ward_css'] = 'tl_files/mediaboxMyTheme.css|screen';

Informationen

Entwickler Christoph Wiechert
Firma 4ward.media
Erweiterungsliste Lightbox4ward
TYPOlight Forge Lightbox4ward auf typolight-forge.org
Anmerkungen Die Erweiterung wird als Inhaltselement eingefügt.