vor 2 Jahren

jQuery, Theme Entwicklung, Wordpress WP-Syntax Quelltexte mit Lightbox-Effekt

Quelltexte brauchen Platz auf dem Bildschirm – sowohl in der vertikalen als auch in der horizontalen. Ihnen innerhalb einer Webseite angemessenen Platz zu verschaffen, würde so ziemlich jedem Seitentemplate wortwörtlich den Rahmen sprengen. Trotzdem wollen Quelltexte im Detail betrachtet werden ohne ständig in zwei Achsen scrollen zu müssen. Nach dem ich mich mit diesem Problem nun fast den ganzen Tag beschäftigt habe, bin ich denke ich mittlerweile zu einer sehr gute Lösung gekommen.

Mit Hilfe von jQuery wird zu jedem von WP-Syntax erzeugten Quelltextfeld ein Link “Fenster vergrößern” eingefügt. Klickt man auf den Link, wird ähnlich wie bei Lightbox/Thickbox-Effekten eine abdunkelnde Ebene eingeblendet, die einen Klon des betreffenden Quelltextfeldes enthält. Dieser Klon passt sich je nach Browserfenstergröße an, um die zur Verfügung stehende Fläche großzügig auszunutzen. Um das Overlay wieder auszublenden kann man entweder die Tasten ESC oder Q drücken, auf “Fenster schließen” klicken oder einfach in den abgedunkelten Hintergrund. Eine Demonstration ist an jeder Quelltextbox hier auf der Seite zu sehen.

Die nötigen Anpassungen der Stylesheets in der Datei styles.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

/*----- wp_syntax lightbox (wsl) -----*/
 
#wsl-wrap, #wsl-overlay, #wsl-box {
	position:fixed !important;
	position:absolute;
	z-index:9999;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
 
#wsl-overlay {
	background-color:#000000;
	cursor:pointer;
}
 
#wsl-box {
	text-align:left;
	width:auto;
	height:auto;
}
 
#wsl-close {
	background:#222222;
	text-align:center;
	color:#bbbbbb;
	cursor:pointer;
	padding: 2px 0 2px 0;
}
 
#wsl-close.hover,
#wsl-close:hover {
	color:#bb5500;
}
 
#wsl-box .wp_syntax {
	background:#ffffff;
	margin:0;
	max-height:none;
	height:auto;
	width:auto;
}
 
.wsl-open {
	color:#666666;
	cursor:pointer;
	float:right;
	font-size:10px;
}
 
.wsl-open.hover,
.wsl-open:hover {
	color:#bb5500;
}

Falls nicht sowieso schon geschehen, das Registrieren und Einreihen des Javascripts, abhängig von jQuery, in der Datei functions.php:

1
2

wp_register_script('scripts',TPLDIR.'scripts.js',array('jquery'));
wp_enqueue_script('scripts');

Zu guter Letzt das Herzstück, der Javascript-Code, in der Datei scripts.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

jQuery(document).ready( function() {
	// wp-syntax lightbox (wsl)
	if ( (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) && jQuery('.wp_syntax').length>0 ) {
		var wsl = {
			wrap	:	jQuery('<div id="wsl-wrap"></div>'),
			overlay	:	jQuery('<div id="wsl-overlay"></div>').css('opacity',0.7),
			box	:	jQuery('<div id="wsl-box"></div>'),
			close	:	jQuery('<div id="wsl-close">Fenster schlie&szlig;en</div>'),
			open	:	jQuery('<div class="wsl-open">Fenster vergr&ouml;&szlig;ern</div>'),
			speed	:	'fast',
			fadeIn	:	function(wp_syntax) {
						wsl.box.empty()
							.append(wsl.close.clone(true))
							.append( wp_syntax );
						wsl.fit();
						wsl.wrap.fadeIn(wsl.fade);
						return false;
					},
			fadeOut	:	function() {
						wsl.wrap.fadeOut(wsl.fade);
						return false;
					},
			fit	:	function() {
						var ww = jQuery(window).width(),
							wh = jQuery(window).height(),
							mw = Math.floor(ww*0.94),
							mh = Math.floor(wh*0.94)-20;
						wsl.box.css({
							width: mw+'px',
							left: Math.floor(ww*0.03)+'px',
							top: Math.floor(wh*0.03)+'px'
						}).find('.wp_syntax').css({
							maxWidth: mw+'px',
							maxHeight: mh+'px'
						});
					}
		};
		jQuery.each([ wsl.close, wsl.overlay ], function(i) {
			var el = jQuery(this);
			el.click( function(){ return wsl.fadeOut() } )
				.hover( function(){el.addClass('hover')}, function(){el.removeClass('hover')} );
		});
		jQuery('body').append( wsl.wrap.append(wsl.overlay).append(wsl.box).hide() );
		jQuery('.wp_syntax').each( function(i) {
			var wp_syntax = jQuery(this);
			wp_syntax.css('margin-top',0).before( wsl.open.clone().click( function(){ return wsl.fadeIn(wp_syntax.clone()) } ) );
		});
		jQuery(window).resize( function() {
			wsl.fit();
		}).keydown( function(ev) {
			switch(ev.keyCode) {
				case 27: // [Esc]
				case 81: // [Q]
					wsl.fadeOut();
				break;
			}
		})
	}
});