Website-Zoom mit jQuery und CSS

Mit der CSS-Eigenschaft transform: scale() und etwas jQuery lässt sich ziemlich gut das ein- und auszoomen einer Website simulieren. Das ist für alle praktisch, die Ihren Benutzern entsprechende Buttons auf ihrer Website anbieten wollen. Hier unsere Lösung:

<!-- Trigger -->

<ul id="zoom_triggers">

 	<li><a id="zoom_in">Vergrößern</a></li>


 	<li><a id="zoom_out">Verkleinern</a></li>


 	<li><a id="zoom_reset">Zurücksetzen</a></li>

</ul>


<script>
	jQuery(document).ready(function($)
	{
		// Zoom-Level setzen
		var zoom_level=100;

		// Click-Events
		$('#zoom_in').click(function() { zoom_page(10, $(this)) });
		$('#zoom_out').click(function() { zoom_page(-10, $(this)) });
		$('#zoom_reset').click(function() { zoom_page(0, $(this)) });

		// Zoom-Funktion
		function zoom_page(step, trigger)
		{
			// Nur zwei Schritte ein- beziehungsweise ausblenden
			if(zoom_level>=120 && step>0 || zoom_level<=80 && step<0) return;

			// Zoom berechnen / zurücksetzen
			if(step==0) zoom_level=100;
			else zoom_level=zoom_level+step;
			
			// Zoom per CSS setzen
			$('body').css({
				transform: 'scale('+(zoom_level/100)+')', // Zoom anpassen
				transformOrigin: '50% 0' // Ausgangspunkt für transform scale setzen
			});

			// Seitenbreite am Zoom anpassen
			if(zoom_level>100) $('body').css({ width: (zoom_level*1.2)+'%' });
			else $('body').css({ width: '100%' });

			// Trigger deaktivieren / aktivieren (per CSS entsprechend optisch kennzeichnen)
			if(zoom_level>=120 || zoom_level<=80) trigger.addClass('disabled');
			else trigger.parents('ul').find('.disabled').removeClass('disabled');
			if(zoom_level!=100) $('#zoom_reset').removeClass('disabled');
			else $('#zoom_reset').addClass('disabled');
		}
	});
</script>