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>
Hallo,
habe versucht, diese Variante testweise zu nutzen, habe aber aktuell das Problem, das beim Seitenwechsel auf der Website der Zoom wieder rückgängig gemacht wird. Ich vermute mal dass es damit zusammenhängt wo bzw. wie das Ganze eingebunden wird. Die Website besteht aus diversen php Seiten (Modulen), da im Hintergrund eine Datenbank verwaltet wird. Da ich mit Javascript bislang nichts am Hut hatte, weiß ich miir nun nicht zu helfen. Für einen kleine Tip wäre ich sehr dankbar
Mit freundlichen Grüßen
hans g. maschnig
Hallo Hans, ja in diesem Beispiel-Skript wird das gesetzte Zoom-Level nicht gesichert. Schau mal in meinem Beitrag Session-Daten mit JavaScript (https://www.medianotions.de/webdesign-blog/javascript/session-daten-mit-javascript/). Dort wird gezeigt, wie man Informationen in der JavaScript-Session sichern und wieder abrufen kann. Das kannst du dann für das Zoom-Level nutzen. Viel Erfolg!