Jquery, Django, picture enlarge on click or hover

Question

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..

Any ideas?

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/ ​