jquery，Django，点击或悬停的图片放大

Question

我将图片作为文件存储在django数据库中。在模板中，如果您从下拉框中选择某个选项，则该选项存储的图片会出现在一个小集合中..这一切都使用jquery完成..

单击图片或将鼠标悬停在图片上（以较容易的为准）我想将图片放大到原始大小。再次点击时，我想让它变小（或者如果我徘徊，当鼠标移动时它应该回到小尺寸）。

下面是我在模板：

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

不幸的是，这是没有做任何事情都..

任何想法？

Answer 1

不知道在那里你会得到的数据从原来的大小，但这里是调整图像的方式，

var hoverSize = [100, 400]; 

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

继承人演示http://jsfiddle.net/TSF46/

This显示了山楂使用情境变量在你的js中，看着它你已经知道了。

编辑：您可以替换.hover(...)与.toggle(...)看到http://jsfiddle.net/TSF46/1/