1

画像を表示するためにjQueryThickboxを使用したいのですが、これまでのところ、サムネイルをクリックすると、読み込みの進行状況バーだけが表示されます。私は以下のようにディスプレイを設定しました（多分これは役立つでしょう）

<div class="thumbs">
  {% for p in photos %}
    <a href="{{ p.original_image.url }}" title="{{ p.position.position }}" class="thickbox" rel="gallery-vehicle">
       <img src="{{ p.thumbnail_image.url }}" alt="{{ p.position.position }}" />
    </a>
  {% endfor %}
</div>

上記のコードの出力は次のとおりです。

<div class="thumbs"> 
   <a href="/site_media/photos/16766966.jpg" title="Front" class="thickbox" rel="gallery-vehicle"> 
      <img src="/site_media/photos/photos/16766966_thumbnail_image.jpg" alt="Front" /> 
   </a>  
   <a href="/site_media/photos/iPPJ3216_1.jpg" title="Side View" class="thickbox" rel="gallery-vehicle"> 
      <img src="/site_media/photos/photos/iPPJ3216_1_thumbnail_image.jpg" alt="Side View" /> 
    </a>            
   <a href="/site_media/photos/2010-acura-mdx-15.jpg" title="Interior" class="thickbox" rel="gallery-vehicle"> 
       <img src="/site_media/photos/photos/2010-acura-mdx-15_thumbnail_image.jpg" alt="Interior" /> 
    </a>     
    <a href="/site_media/photos/acura04.jpg" title="Dashboard" class="thickbox" rel="gallery-vehicle"> 
        <img src="/site_media/photos/photos/acura04_thumbnail_image.jpg" alt="Dashboard" /> 
     </a> 
 </div>

jsとスタイルシートについては、以下のように接続しました。

<script type="text/javascript" src="/site_media/js/jquery.js"></script>
<script type="text/javascript" src="/site_media/js/thickbox.js"></script>

<link rel="stylesheet" type="text/css" href="/site_media/css/thickbox.css" media="screen" />
4

2 に答える 2

0

/site_media/photos/photos/acura04_thumbnail_image.jpg静的ファイルが正しく提供されていて、ブラウザーからアクセスできる場合、問題はthumbsdiv のコードではないことが示唆されます。パンチコ​​アの提案は役に立たないと思います。

これまでthickboxを使用したことがないため、次の質問はthickboxのWebサイトの指示に基づいています。

スクリプトと css を含めるために使用するコードを投稿できますか。それは次のようなものでなければなりません

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" 
      media="screen" />

ブラウザからこれらのパスにアクセスできることを確認してください。ファイルがメディア フォルダにある場合は、ここで {{MEDIA_URL}} を使用できます。例えば

src="{{MEDIA_URL}}js/jquery.js"

それが問題ではない場合、私はアイデアが不足していると思います。

于 2009-10-23T16:43:17.507 に答える
0

試す

見る：

    return render_to_response('album.html',
                          {'photos': photos,
                          context_instance=RequestContext(request))

テンプレートでは常に URL_MEDIA パスを使用します。私の経験では、img リソースがエラーを返すと、チェックボックスに「読み込み中」が永久に表示されます。

<div class="thumbs">
  {% for p in photos %}
    <a href="{{ MEDIA_URL }}{{ p.original_image.url }}" title="{{ p.position.position }}"      class="thickbox" rel="gallery-vehicle">
      <img src="{{ p.thumbnail_image.url }}" alt="{{ p.position.position }}" />
    </a>
  {% endfor %}
</div>
于 2009-10-23T14:09:22.493 に答える