Estuve buscando una librería que permitiera hacer zoom a un contenido de un div y que este a su vez permitirá tomar todos sus elementos hijos HTML y los re dimensionara manteniendo las posiciones absolutas que se le fueron asignadas por temas de presentación.. encontre bastante para imagenes muy especiales para tiendas de mercado o galerias de arte.. pero solo eran para objetos img; por otro lado enocntre la función animate de jquery, que le podemos decir:

$(“#midiv”).animate({ ‘zoom’: scale }, 1) ;

Donde scale es la escala que deseamos del original, la original es 1, entonces si queremos el doble es 2, el tripple 3, etc…

Es bastante util pero la mala noticia es que solo sirve Chrome ya que lo que hace es añadir un tag: zoom al estilo del div padre; cosa que no reconoce aun mozilla ni IE.

Entonces el paso siguiente fue hallar que tags CSS  permitían esta actividad nativa mente, aquí fue donde halle en este link la respuesta de Matt en la que dice que los tags son:

ms-transform: scale(your value);
-moz-transform: scale(your value);
-o-transform: scale(your value);
-webkit-transform: scale(your value);
transform: scale(your value);

Ahora aca es donde entra JQuery, lo unico que se debe hacer es un metodo que reciba ese valor de la escala y lo actualice dada una acción, por ejemplo:

function updateSizeOfCategories(difZoom){

//aqui se realiza un calculo que sea mayor a la unidad sobre un valor porcentual
scale=1+(difZoom/100);
$(“#midiv”).css(‘-moz-transform’,’scale(‘+scale+’)’);
$(“#midiv”).css(‘-ms-transform’,’scale(‘+scale+’)’);
$(“#midiv”).css(‘-moz-transform’,’scale(‘+scale+’)’);
$(“#midiv”).css(‘-o-transform’,’scale(‘+scale+’)’);
$(“#midiv”).css(‘-webkit-transform’,’scale(‘+scale+’)’);
$(“#midiv”).css(‘transform’,’scale(‘+scale+’)’);
}

Y listos, esta acción se llama dada una acción (click, scroll, controles externos,slider, etc.) que necesitamos y el hace el zoom desde el div padre a todos sus elementos hijos; recomendable que el div padre del que le estamos haciendo zoom tenga un overlay: hidden, para no generar scroll y tal vez usar un drag para navegar.

Anuncios