Lightbox Text ändern

Hi Leute,
wo kann ich den Text der Lightbox ändern? Vor allem habe ich es auf die Anzahl der Bilder "1 of 10" abgesehen.

Grüße aus Ludwigsburg
Jochen Kubik

Hallo Jochen,

das bekommst du über eine angepasste moo_mediabox.tpl hin (wenn du die mediabox meinst).

In der Original-moo_mediabox.tpl steht irgendwo /* Put custom options here */

Hier kannst du deine Optionen an das Skript übergeben. Z.B.

HTML-Code:

---

counterText: '(Bild {x} von {y})'

---

Insgesamt kannst du die folgenden Variablen anpassen:

Code:

---

                                loop: false,                                        // Allows to navigate between first and last images
                                keyboard: true,                                        // Enables keyboard control; escape key, left arrow, and right arrow
                                alpha: true,                                        // Adds 'x', 'c', 'p', and 'n' when keyboard control is also set to true
                                stopKey: false,                                        // Stops all default keyboard actions while overlay is open (such as up/down arrows)
                                                                                                        // 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)
                                resizeOpening: true,                        // Determines if box opens small and grows (true) or starts at larger 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
//                        Image options
                                imgBackground: false,                        // Embed images as CSS background (true) or <img> tag (false)
                                                                                                // ...a CSS background is naturally non-clickable, preventing downloads
                                                                                                // ...the IMG tag allows automatic scaling for smaller screens, minimal no-click code is included but does not work in Opera
                                imgPadding: 70,                                        // Clearance necessary for images larger than the window size (only used when imgBackground is false)
                                                                                                // Change this number only if the CSS style is significantly divergent from the original, and requires different sizes
//                        Inline options
//                                overflow: 'auto',                                // Sets CSS overflow of the overflow to allow for
//                        Global media options
                                scriptaccess: 'true',                // Allow script access to flash files
                                fullscreen: 'true',                        // Use fullscreen
                                fullscreenNum: '1',                        // 1 = true
                                autoplay: 'true',                        // Plays the video as soon as it's opened
                                autoplayNum: '1',                        // 1 = true
                                autoplayYes: 'yes',                        // yes = true
                                volume: '100',                                // 0-100, used for NonverBlaster and Quicktime players
                                medialoop: 'true',                        // Loop video playback, true / false, used for NonverBlaster and Quicktime players
                                bgcolor: '#000000',                        // Background color, used for flash and QT media
                                wmode: 'opaque',                        // Background setting for Adobe Flash ('opaque' and 'transparent' are most common)
//                        NonverBlaster
                                useNB: true,                                // use NonverBlaster (true) or JW Media Player (false) for .flv and .mp4 files
                                // PATCH: set path to plugins directory
                                playerpath: 'plugins/mediabox/NonverBlaster.swf',        // Path to NonverBlaster.swf
                                // PATCH EOF
                                controlColor: '0xFFFFFF',        // set the controlbar color
                                controlBackColor: '0x000000',        // set the controlbar color
                                showTimecode: 'false',                // turn timecode display off or on
//                        JW Media Player settings and options
                                // PATCH: set path to plugins directory
                                JWplayerpath: 'plugins/mediabox/player.swf',        // Path to the mediaplayer.swf or flvplayer.swf file
                                // PATCH EOF
                                backcolor:        '000000',                // Base color for the controller, color name / hex value (0x000000)
                                frontcolor: '999999',                // Text and button color for the controller, color name / hex value (0x000000)
                                lightcolor: '000000',                // Rollover color for the controller, color name / hex value (0x000000)
                                screencolor: '000000',                // Rollover color for the controller, color name / hex value (0x000000)
                                controlbar: 'over',                        // bottom, over, none (this setting is ignored when playing audio files)
//                        Quicktime options
                                controller: 'true',                        // Show controller, true / false
//                        Flickr options
                                flInfo: 'true',                                // Show title and info at video start
//                        Revver options
                                revverID: '187866',                        // Revver affiliate ID, required for ad revinue sharing
                                revverFullscreen: 'true',        // Fullscreen option
                                revverBack: '000000',                // Background color
                                revverFront: 'ffffff',                // Foreground color
                                revverGrad: '000000',                // Gradation color
//                        Ustream options
                                usViewers: 'true',                                // Show online viewer count (true/false)
//                        Youtube options
                                ytBorder: '0',                                // Outline                                (1=true, 0=false)
                                ytColor1: '000000',                        // Outline color
                                ytColor2: '333333',                        // Base interface color (highlight colors stay consistent)
                                ytQuality: '&ap=%2526fmt%3D18', // Leave empty for standard quality, use '&ap=%2526fmt%3D18' for high quality, and '&ap=%2526fmt%3D22' for HD (note that not all videos are availible in high quality, and very few in HD)
                                ytRel: '0',                                        // Show related videos        (1=true, 0=false)
                                ytInfo: '1',                                // Show video info                (1=true, 0=false)
                                ytSearch: '0',                                // Show search field        (1=true, 0=false)
//                        Viddyou options
                                vuPlayer: 'basic',                        // Use 'full' or 'basic' players
//                        Vimeo options
                                vmTitle: '1',                                // Show video title
                                vmByline: '1',                                // Show byline
                                vmPortrait: '1',                        // Show author portrait
                                vmColor: 'ffffff'                        // Custom controller colors, hex value minus the # sign, defult is 5ca0b5

---

Deine angepasste moo_mediabox.tpl könnte dann z.B. so aussehen:

PHP-Code:

---

<?php

// Add mediabox style sheet
$GLOBALS['TL_CSS'][] = 'plugins/mediabox/css/mediabox-simk.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({counterText: '(Bild {x} von {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>

---

Gruß Janosch

Hi Janosch,
vielen Dank, hat gut geklappt!:D

Grüße aus Ludwigsburg
Jochen Kubik

eine frage: kann ich die moo_mediabox.tpl auch updatesicher ändern?

Zitat:

---

Zitat von blueamerican

eine frage: kann ich die moo_mediabox.tpl auch updatesicher ändern?

---

Aber sicher, speicher sie dir einfach in den Templates-Ordner. Zusätzlich kannst du in diesem Ordner die Datei auch umbennen, zB in moo_mediabox_idn.tpl.

Gruß Janosch

wenn ich das template umbenenne, wo gebe ich das an? unter themes > module finde ich die gallery nicht

Hallo!

Ich probier's seit geraumer Zeit immer mal wieder, heute schon wieder eine ganze Zeit, doch mir fehlt noch immer die Lösung:

Möchte drei Anpassungen der Lightbox: loop: true, resizeOpening: false und counterText: '({x} | {y})'. Die Lösung war seinerzeit (zugegebenermaßen lange her, nämlich im Zuge des Usertreffens 2010) unter http://www.tl-usertreffen.weitzeldes...iguration.html von Thomas Weitzel beschrieben, damals für eine frühe 2.9er-Version.

Auch unter 2.10.4 funktionierten die Änderungen noch wie unter dem o.a. Link beschrieben, doch seit 2.11 sind die Änderungen wirkungslos. Hier das aktuelle, um die drei Parameter an der entsprechenden Stelle "Put custom options here" ergänzte Template moo_mediabox.xhtml der Version 2.11.2 (Mediabox 1.4.6):

PHP-Code:

---

<?php

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

?>

<script type="text/javascript" src="<?php echo TL_PLUGINS_URL; ?>plugins/mediabox/<?php echo 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>

---

Hat jemand von Euch 'ne Ahnung?

Die aktuelle Version des Skript berücksichtigt leider diese Optionen nicht (mehr). Abhilfe schafft aber die nächste Bugfix-Version 2.11.3, wo Leo das im Skript selbst gefixt hat.

Ich habe es genau so gemacht. Neues Template moo_mediabox.html5 gewählt und Quelltext angepasst, nichts passiert:

PHP-Code:

---

<?php

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

?>

<script src="<?php echo TL_PLUGINS_URL; ?>plugins/mediabox/<?php echo MEDIABOX; ?>/js/mediabox.js"></script>
<script>
Mediabox.scanPage = function() {
  var links = $$('a').filter(function(el) {
    return el.getAttribute('data-lightbox') != null;
  });
  $$(links).mediabox({
    counterText: '(Bild {x} von {y})'
  }, function(el) {
    return [el.href, el.title, el.getAttribute('data-lightbox')];
  }, function(el) {
    var data = this.getAttribute('data-lightbox').split(' ');
    return (this == el) || el.getAttribute('data-lightbox').match(data[0]);
  });
};
window.addEvent('domready', Mediabox.scanPage);
</script>

---

Woran liegts?

.... HAT SICH ERLEDIGT!
Man muss natürlich das richtige Template wählen und bei mir wurde die Slimbox genutzt ;)

Hi,

ich würde gerne das "Images" im CounterText weg haben, allerdings nutze ich jQuery, also die Colorbox. Hat jemand eine Idee?

PHP-Code:

---

<?php

// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/jquery/colorbox/'. COLORBOX .'/css/colorbox.min.css||static';

?>

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/colorbox/<?php echo COLORBOX; ?>/js/colorbox.min.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $('a[data-lightbox]').map(function() {
      $(this).colorbox({
        // Put custom options here
        loop:false,
        rel:$(this).attr('data-lightbox'),
        maxWidth:'95%',
        maxHeight:'95%'
      });
    });
  });
})(jQuery);
</script>

---

Müsste man durch Setzen der "current" Einstellung überschreiben können:

PHP-Code:

---

<?php

// Add the colorbox style sheet
$GLOBALS['TL_CSS'][] = 'assets/jquery/colorbox/'. COLORBOX .'/css/colorbox.min.css||static';

?>

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/colorbox/<?php echo COLORBOX; ?>/js/colorbox.min.js"></script>
<script>
(function($) {
  $(document).ready(function() {
    $('a[data-lightbox]').map(function() {
      $(this).colorbox({
        // Put custom options here
        current: "{current}/{total}",
        loop:false,
        rel:$(this).attr('data-lightbox'),
        maxWidth:'95%',
        maxHeight:'95%'
      });
    });
  });
})(jQuery);
</script>

---

Ungetestet. Sag Bescheid, falls es nicht klappt!

Klappt! Du bist ein Schatz :) Dankeschön