Jquery, Django, imagen ampliada al hacer clic o pasar el mouse

I'm storing images as files in a the django database. In the template, if you select a certain option from a dropdown box, the stored picture for that option appears in a set small size.. this is all done using jquery..

On clicking the picture, or hovering over it (whichever is easier) I want to enlarge the picture to its original size. On clicking again I want to make it smaller (or if I'm hovering, when the mousee moves it should go back to the small size).

Here's what I have in the template:

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

unfortunately, this isn't doing anything at all..

¿Alguna idea?

preguntado el 10 de marzo de 12 a las 16:03

1 Respuestas

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: ""
    });
});

aquí hay una demostración http://jsfiddle.net/TSF46/

Este planteamiento de « shows you haw to use context variables in your js, which looking at it you already know.

Edit: Puedes reemplazar .hover(...) con .toggle(...) ver http://jsfiddle.net/TSF46/1/

respondido 10 mar '12, 17:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.