Использование Thickbox с ImageKit - PullRequest
Новая
       14

Использование Thickbox с ImageKit

1 голос
/ 23 октября 2009

Я хочу использовать jQuery Thickbox для отображения моих изображений, но до сих пор, когда я нажимаю на миниатюру, все, что я получаю, это индикатор загрузки. Я настроил свой дисплей, как показано ниже (возможно, это поможет) 

<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" />

Ответы [ 2 ]

0 голосов
/ 23 октября 2009

Если статические файлы обслуживаются правильно, и вы можете получить доступ к /site_media/photos/photos/acura04_thumbnail_image.jpg через браузер, то это говорит о том, что проблема не в коде вашего thumbs div. Я не думаю, что предложение Панчикора поможет.

Я раньше не пользовался Thickbox, поэтому мой следующий вопрос основан на инструкциях на сайте Thickbox .

Можете ли вы опубликовать код, который вы используете, чтобы включить сценарии и 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"

Если это не проблема, то, боюсь, у меня нет идей.

0 голосов
/ 23 октября 2009

попробуй

вид: 

    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>
...