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>