aumentar/disminuir el css el ancho de haz clic con jquery/javascript

Necesitaría para poco a poco aumentar y disminuir la anchura de un elemento img dentro de un ancho fijo y altura del div, digamos +10%/-10%, en el clic de un botón. ¿Cómo puedo hacer eso? Lo que necesitan para lograr algún tipo de zoom de la img elemento contenido dentro del div (que ha overflow:auto).

Estoy usando jquery y jquery ui, porque me tendría que ser pannable. El resultado debe ser algo como facebook cubre, donde se tiene una imagen que se adapta a su contenedor (y que ya está implementado), pero donde el usuario puede hacer zoom in/out de la contenida elemento img y moverse alrededor de elegir cómo se ve mejor.

No tengo idea de cómo hacerlo, por favor ayuda!

Muchas gracias

  • nos muestran lo que has intentado ya. Ya tenemos la respuesta, pero es mejor si te ayudamos a encontrar de donde te has equivocado de lugar
  • Esto es bastante sencillo problema a resolver. Por favor, edita tu pregunta para incluir el código que tengo hasta ahora.
  • actualmente estoy trabajando en una muy compleja solución y no tengo ningún código real para presentar, el código de im trabajando en no es mío y que contiene LIFERAY variables y un montón de cosas que en realidad no sabe.. yo no soy experto en javascript en todo lo limpio con un ejemplo que me ayudaría a integrar en lo que im (intentar) a trabajar 🙂
InformationsquelleAutor valerio0999 | 2013-09-19

4 Kommentare

  1. 3

    DEMO: http://jsfiddle.net/7gVgX/

    JQuery

    $('div').click(function () {
        $(this).css({
            'width' : $(this).width()  * 1.1
          , 'height': $(this).height() * 1.1
        });
    });
    • Si usted quiere disminuir en un 10%, entonces / 1.1
    • bueno! lo que necesito sería algo así como un botón +/- digamos fuera de la div.. podría ser esto posible?
    • href=»http://jsfiddle.net/7gVgX/1/» >jsfiddle.net/7gVgX/1
    • muchas gracias!
  2. 0

    Usted puede conseguir la anchura de la imagen haciendo:

    var w = $("#image_id").css("width");

    a aumentar en un 10%, se puede multiplicar por 1,1:

    w = w * 1.1;

    y se puede aplicar este cambio a la imagen haciendo:

    $("#image_id").css("width", w + "px");

  3. 0

    simplemente obtener la anchura de la imagen actual y el incremento o restar.

    digamos css es:

    img{
        width: 80%;
    }

    y algunos js:

    width = $(theImg).css("width");
    //remove the percent
    width.substring(0, width.length - 1);
    //now add value
    width = width+10;
    //set the new value to css
    $(theImg).css("width", width+"%");

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea