Jquery, Django, картинка увеличить на клик или при наведении - PullRequest
Новая
       21

Jquery, Django, картинка увеличить на клик или при наведении

0 голосов
/ 10 марта 2012

Я храню изображения в виде файлов в базе данных django. В шаблоне, если вы выбираете определенную опцию из выпадающего списка, сохраненное изображение для этой опции появляется в небольшом размере. Все это делается с помощью jquery ..

При нажатии на изображение или наведении на него курсора (в зависимости от того, что проще) я хочу увеличить изображение до исходного размера. При повторном нажатии я хочу сделать его меньше (или, если я завис, при перемещении мышки он должен вернуться к небольшому размеру).

Вот что у меня в шаблоне: 

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

к сожалению, это ничего не делает ..

Есть идеи?

1 Ответ

1 голос
/ 10 марта 2012

Не знаю, откуда вы получите данные для оригинального размера, но есть способ изменить размер изображения, 

var hoverSize = [100, 400];

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

вот демо http://jsfiddle.net/TSF46/

Это показывает вам, как использовать переменные контекста в вашем js, и, глядя на это, вы уже знаете.

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

...