3

イメージキットを使用しています。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 }} を生成しようとしています。これは、マウスオーバーすると、Javascript を介して少し大きいバージョンの画像 {{ p.display.url }} を生成します。テンプレート内の次のコードは、これを試みます。

<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 }} の指定方法に関係があると思います。

4

2 に答える 2

1

コードをクリーンアップしましたが、@ 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>

Pythonコードが生成するものを試してモックするために、JSFiddleで基本的な例を書きました: http://jsfiddle.net/TeEHU/

私が行ったことを少し説明すると、サムネイルとホバーの両方を保持するために、最初にいくつかの JavaScript 配列をセットアップしました。最初は、URL を参照する文字列の配列にするつもりでしたが、Image オブジェクトを使用して画像ホバーをプリロードした方法に従いました。

ここから、アンカー タグで定義したイベント ハンドラー属性を取り除き、それをイメージ タグに移動して、ユーザーがマウスオーバーしたときにイメージ属性に直接アクセスできるようにしました。

私は通常、サーバー側から動的な JavaScript を生成する使用を容認しませんが、コードとの一貫性を維持しようとしていました。

于 2012-03-24T17:26:44.473 に答える
0

あなたの JavaScript は一般的に少し厄介なようです - いくつかの特定の例:

  • タグで減価償却languageされたパラメーターを使用しています。<script>
  • 最初のスクリプト ブロックの上部に閉じていない括弧のようなものがあります
  • onmouseover/onmouseoutタグで宣言した変数を参照できるかどうかはわかりません。

多くの場合、タグやパラメーター値などの途中に改行がありますが、これらは正当である可能性があります (よくわかりません) が、少なくとも私にとっては価値が疑わしいものです。彼らは私があなたのしていることを理解できないようにしています。それらを削除することを検討してください。

また、一般的に、引用符の使用は混乱しています...信じてください。引用符をきれいにすると、独自のコードをよりよく理解できるようになります。

ただし、あなたの場合の主なことは次のとおりです。JavaScriptの問題を解決するために、ブラウザにレンダリングされたコードを見てください。何よりもまず。これにより、潰そうとする特定のバグが、テンプレートの構文/ロジック/etc によるものか、クライアントの JavaScript によるものかを絞り込むことができます。いずれにせよ、それ自体は特にdjangoの問題ではありません。

于 2012-03-24T15:08:21.187 に答える