Jquery, django, imagen Ampliar en Click o Hover

Question

Estoy almacenando imágenes como archivos en una base de datos Django.En la plantilla, si selecciona una cierta opción en una caja desplegable, la imagen almacenada para esa opción aparece en un tamaño pequeño establecido. Todo esto se hace usando jQuery ..

Al hacer clic en la imagen, o flotando sobre él (lo que sea más fácil), quiero ampliar la imagen a su tamaño original.Al hacer clic nuevamente, quiero hacerlo más pequeño (o si estoy flotando, cuando el mouse se mueve, debe volver al tamaño pequeño).

Esto es lo que tengo en la plantilla:

    <script type = "text/javascript">
            $(function ()
            {
                    $("#image{{p.option}}").on('click', function ()
                    {
                            $(this).width(1000);
                    });
            });
    </script>

Desafortunadamente, esto no está haciendo nada en absoluto ...

¿Alguna idea?

Answer 1

Not sure where you'd get the data for the original size from but here is a way to resize an image,

var hoverSize = [100, 400];

$('img').hover(function() {
    $(this).css({
        height: hoverSize[0],
        width: hoverSize[1]
    });​
}, function() {
    $(this).css({
        height: "",
        width: ""
    });
});

heres a demo http://jsfiddle.net/TSF46/

This shows you haw to use context variables in your js, which looking at it you already know.

Edit: You can replace .hover(...) with .toggle(...) see http://jsfiddle.net/TSF46/1/ ​