Plugin jQuery pour simuler le zoom de la page du navigateur/le zoom du texte?

Question

Je cherche un plugin jquery pour faire effet zoom zoom texte/page (comme FF 3 ctrl ++/ctrl--), qui peut ...

1. redimensionner le texte avec réglage de la taille de police différente (c. zoom/zoom par texte)

2. de travail avec HTML complexe + structure CSS

Toute recommandation ici?

Answer 1

Si vous recherchez un zoom de texte, la manière la plus simple de le faire serait de spécifier la taille de la police de base sur votre body dans une unité absolue, par ex. body { font-size: 13pt; } et ensuite tout le reste utilise des unités relatives, par ex. .postTitle { font-size: 120%; }.

Ensuite, si vous avez des liens +/- zoom ou autres joyeusetés:

 
$('#enlargeText').click(function() { 
    $(document.body).css('font-size', $(document.body).css('font-size') * 1.5); 
} 

Cela augmentera toutes les tailles de police qui sont par rapport à body.

Cependant, si vous souhaitez simuler la page zoom (par opposition au texte zoom), vous devez également soit spécifier les dimensions de l'image en unités relatives, ou en boucle par toutes les images et les redimensionner en conséquence:

 
$('#enlargeText').click(function() { 
    $('img').each(function() { 
     this.width *= 1.5; 
    }) 
} 

Mais alors vous êtes toujours bloqué avec les images d'arrière-plan CSS, qui n'ont pas été redimensionnées. AFAIK, c'est seulement possible en utilisant CSS 3 qui n'est pas largement supporté, ou en ayant redimensionné des versions de toutes ces images sur le serveur. Vous pouvez alors simplement activer une nouvelle feuille de style qui fait référence à ces images plus grandes/plus petites.

Answer 2

Vous pourriez le faire comme ceci. Il a besoin de brancher à un cookie pour les pages suivantes si

var currZoom = $("body").css("zoom"); 
if(currZoom == 'normal') currZoom=1; // For IE 

$(".zoomIn").click(function(){ 
    currZoom*=1.2; 
    $("body").css("zoom",currZoom); 
}); 
$(".zoomOff").click(function(){ 
    jQuery("body").css("zoom",1); 
}); 
$(".zoomOut").click(function(){ 
    currZoom*=.8; 
    $("body").css("zoom",currZoom); 
}); 

HTML

<span class="zoomIn" style="font-size:120%">A</span> 
<span class="zoomOff">A</span> 
<span class="zoomOut" style="font-size:80%">A</span> 

Answer 3

Set contentWidth à votre largeur visible minimum requis.

jQuery(document).ready(function(){ 
    jQuery(window).bind('resize load', function(){ 
     contentWidth = 1010; 
     jQuery('body').css('zoom', jQuery(window).width()/contentWidth); 
    }); 
}); 

Testé avec Chrome.