Anpassungen | Konfiguration

Die Mediabox kann einfach angepasst werden durch das Anlegen eines neuen Templates, z.B. "moo_mediaboxAdv.tpl". Dieses wird dann in das Seitenlayout eingebunden.

Template moo_mediabox.tpl

<?php

// Add mediabox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox.css|screen';

?>

<script type="text/javascript" src="plugins/mediabox/js/mediabox.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
Mediabox.scanPage = function() {
  var links = $$("a").filter(function(el) {
    return el.rel && el.rel.test(/^lightbox/i);
  });
  $$(links).mediabox({/* Put custom options here */}, 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>

Anpassung des Pfades zur CSS-Datei (updatesicher)

Der Pfad zur CSS-Datei kann durch die Anpassung des Pfades updatesicher angepasst werden; z.B. in 'tl_files/mediabox.css|screen'.

<?php

// Add mediabox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox.css|screen';

?>

<script type="text/javascript" src="plugins/mediabox/js/mediabox.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
Mediabox.scanPage = function() {
  var links = $$("a").filter(function(el) {
    return el.rel && el.rel.test(/^lightbox/i);
  });
  $$(links).mediabox({

/* Put custom options here */

}, 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>

plugins/mediabox/js/mediabox_src.js, ab Zeile 59 (TYPOlight 2.8.3)

Die möglichen (und weiteren) Konfigurationsparameter finden Sie in der Datei "plugins/mediabox/js/mediabox_src.js".

<?php

// Add mediabox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox.css|screen';

?>

<script type="text/javascript" src="plugins/mediabox/js/mediabox.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
Mediabox.scanPage = function() {
  var links = $$("a").filter(function(el) {
    return el.rel && el.rel.test(/^lightbox/i);
  });
  $$(links).mediabox({

/* Put custom options here */

}, 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>

Auszug aus den Konfigurationseinstellungen

loop: false,                         // Allows to navigate between first and last images
stopKey: true,                       // Prevents default keyboard action (such as up/down arrows), in lieu of the shortcuts
                                     // Does not apply to iFrame content
                                     // Does not affect mouse scrolling
overlayOpacity: 0.7,                 // 1 is opaque, 0 is completely transparent (change the color in the CSS file)
                                     // Remember that Firefox 2 and Camino 1.6 on the Mac require a background .png set in the CSS
resizeOpening: true,                 // Determines if box opens small and grows (true) or start full size (false)
resizeDuration: 240,                 // Duration of each of the box resize animations (in milliseconds)
resizeTransition: false,             // Mootools transition effect (false leaves it at the default)
initialWidth: 320,                   // Initial width of the box (in pixels)
initialHeight: 180,                  // Initial height of the box (in pixels)
defaultWidth: 640,                   // Default width of the box (in pixels) for undefined media (MP4, FLV, etc.)
defaultHeight: 360,                  // Default height of the box (in pixels) for undefined media (MP4, FLV, etc.)
showCaption: true,                   // Display the title and caption, true / false
showCounter: true,                   // If true, a counter will only be shown if there is more than 1 image to display
counterText: '({x} of {y})',         // Translate or change as you wish

Definition von 3 Eigenschaften

<?php
// Add mediabox style sheet
$GLOBALS['TL_CSS'][] = 'tl_files/mediabox.css|screen';
v
?>
<script type="text/javascript" src="plugins/mediabox/js/mediabox.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
Mediabox.scanPage = function() {
var links = $$("a").filter(function(el) {
return el.rel && el.rel.test(/^lightbox/i);
});
$$(links).mediabox({
loop: true,
resizeOpening: false,
counterText: '({x} | {y})'
}, 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>