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/