Using thickbox with imagekit

Question

I want to use jQuery Thickbox for displaying my images but so far when I click on a thumbnail all I get is the loading progress bar. I've set up my display as below (maybe this will help)

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

The output for the above code is:

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

For the js and stylesheets, I've hooked them up as below:

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

Answer 1

try

view:

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

in template always use the URL_MEDIA path, in my experiencie tickbox displays "loading" forever when img resource returns an error.

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

Answer 2

If the static files are being served correctly, and you can access /site_media/photos/photos/acura04_thumbnail_image.jpg throught the browser, then it suggests that the problem isn't the code in your thumbs div. I don't think panchicore's suggestion is going to help.

I've not used thickbox before, so my next question is based on the instructions on the thickbox website.

Can you post the code you use to include the scripts and the css. It should be something like

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

Check that you can access those paths through the browser. You may use {{MEDIA_URL}} here, if the files are in your media folder. For example

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

If that's not the problem, then I'm afraid I'm out of ideas.