Lightbox Text ändern

[kubjo]

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

[JanoschSkuplik]

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.

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

Insgesamt kannst du die folgenden Variablen anpassen:

				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

// 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

[kubjo]

Hi Janosch,
vielen Dank, hat gut geklappt!

Grüße aus Ludwigsburg
Jochen Kubik

[blueamerican]

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

[JanoschSkuplik]

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

[blueamerican]

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

[GeorgDerks]

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

// 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?

[xchs]

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.

[tobihessen]

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

<?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

[k-webdesign]

Hi,

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

<?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>

[xchs]

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

<?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!

[k-webdesign]

Klappt! Du bist ein Schatz Dankeschön