Проблемы с перемычками в JavaScript (отображаются с использованием django и django-imagekit) - PullRequest
Новая
       4

Проблемы с перемычками в JavaScript (отображаются с использованием django и django-imagekit)

3 голосов
/ 23 марта 2010

Я использую Imagekit. View.py включает в себя: 

def pics(request):
    p = Photo.objects.all()
    return render_to_response('Shots.html',
            {'p': p})

Следующий простой код в шаблоне создаст связанные изображения: 

{% for p in p %}
<img src = "{{ p.display.url }}">
<img src = "{{ p.thumbnail_image.url }}">    
{% endfor %}

Я пытаюсь сгенерировать серию миниатюр {{p.thumbnail_image.url}}, которые при наведении мыши сгенерируют немного большую версию изображения, {{p.display.url}} через Javascript , Следующий код в шаблоне пытается сделать это: 

<html>
<head>
<HEAD>

<script 
language="Javascript"> 
{ image1 = new Image 
image2 = new Image 
image1.src = {{  p.thumbnail_image.url }}             
image2.src = {{ p.display.url }}
</script>
</head>
<body>

{% for p in p %}
<a href=""
onMouseOver="document.rollover.src=
image2.src  
onMouseOut="document.rollover.src=
image1.src"> 
<img src="{{ p.thumbnail_image.url }}" border=0 name="rollover"></a>
{% endfor %}
</body>
</html>

Это отобразит серию миниатюр, но большее изображение не будет отображаться при наведении мыши. Я считаю, что это связано с тем, как я указываю переменную {{p.display.url}}.

Ответы [ 2 ]

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

Я очистил ваш код, но, как упомянул @ fish2000, это все еще грязный способ сделать это. Я придумал следующее: 

<html>
<head>

<script>
var thumbs = [];
var hovers = [];

{% for p in p %}
thumbs.push(new Image());
thumbs[thumbs.length - 1].src = p.thumbnail_image.url;
hovers.push(new Image());
hovers[hovers.length - 1].src = p.display.url;
{% endfor %}

</script>
</head>
<body>

{% for idx, p in enumerate(p) %}
<a href=""> 
    <img src="{{ p.thumbnail_image.url }}" border=0 name="rollover" onmouseover="this.src = window.hovers[{{ idx }}].src" onmouseout="this.src = window.thumbs[{{ idx }}].src">
</a>
{% endfor %}
</body>
</html>

Я написал базовый пример в JSFiddle, чтобы попытаться смоделировать то, что будет генерировать ваш код Python: http://jsfiddle.net/TeEHU/

Чтобы немного объяснить, что я сделал, вначале я настроил пару массивов JavaScript, чтобы они содержали как миниатюры, так и указатели. Изначально я просто собирал их в виде массивов строк, ссылающихся на URL-адреса, но следовал тому же принципу, который вы использовали, используя объект Image для предварительной загрузки изображений.

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

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

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

Похоже, ваш JavaScript в целом немного грубоват, например, некоторые конкретные примеры:

  • вы используете устаревший параметр language в теге <script>;
  • у вас есть то, что выглядит как незакрытая скобка вверху вашего первого блока скрипта
  • Я не знаю, можете ли вы ссылаться на переменные, которые вы объявили в тегах onmouseover / onmouseout, так как вы

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

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

ОднакоГлавное в вашем случае должно быть: посмотрите на код, отображаемый в браузере, чтобы решить ваши проблемы с JavaScript.В первую очередь.Это сузит вопрос о том, связана ли конкретная ошибка, которую вы пытаетесь устранить, с синтаксисом вашего шаблона / логики / и т. Д., А не с клиентским JavaScript.В любом случае, это не проблема django per se .

...