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の変数。

編集：あなたが.toggle(...)で.hover(...)を置き換えることができます完璧に動作します:) http://jsfiddle.net/TSF46/1/