JQuery, Django, picture enlarge on click или hover

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, которые смотрят на это, вы уже знаете.

Edit: Вы можете заменить .hover(...) с .toggle(...) см http://jsfiddle.net/TSF46/1/