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

If you add the html output to your question it might be easier to help. — Alasdair, Oct 23 '09 at 12:22
Are your static files being served correctly? If you type `yourdomain. com/site_media/.../acura.jpg` into your browser, does the image load? — Alasdair, Oct 23 '09 at 13:39
the static files are being served correctly...let me try out the answer below from panchicore then I'll see if all is well... — , Oct 23 '09 at 16:07
you could save your html from the browser to disk and set all links to css, scripts and images to the path on the disc, to see, if the problem is in ur code or the dev server. — vikingosegundo, Oct 23 '09 at 22:22

score 0 · Accepted Answer · answered Oct 23 '09 at 14:09

0

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>

answered Oct 23 '09 at 14:09

panchicore

11,451
12
74
100

this still gives me the same state...no change even after using MEDIA_URL – Oct 23 '09 at 17:14
what you see when visiting localhost:/site_media/photos/iPPJ3216_1.jpg ? – panchicore Oct 23 '09 at 23:21
localhost:/site_media/photos/iPPJ3216_1.jpg shows me the specified photo...it works for all the others too – Oct 24 '09 at 06:41
1

so, use firebug plugin for firefox to watch the network activity when clicking the image link and tell us what you see. – panchicore Oct 24 '09 at 13:25
the strangest thing is there is no activity shown in firebug when I click on the image link – Oct 24 '09 at 17:07
1

lets try adding http://www.shadowbox-js.com/ library and rel="shadowbox" to your links, and tell us what you see. usage: http://www.shadowbox-js.com/usage.html – panchicore Oct 24 '09 at 17:29
Actually this gives me what I wanted...thank you so much panchicore – Oct 24 '09 at 17:56
Stephen, shadowbox default config is "Single Image" you have to see the "Image Gallery (slideshow)" example http://www.shadowbox-js.com/index.html, understand the source and thats it, you will have navigation buttons. aah!, and you can mark as answer :D – panchicore Oct 24 '09 at 18:18

score 0 · Answer 2 · answered Oct 23 '09 at 16:43

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.

I can access the scripts and css just fine even without specifying {{ MEDIA_URL }}...see my edit for how I've done this — , Oct 23 '09 at 17:18
Sorry, I'm out of ideas. If your code is on a webserver and you share the URL, then I'll have a quick look at it, but I can't think of any other suggestions at the moment. — Alasdair, Oct 23 '09 at 18:04
I wish I could share the URL but I'm running the code locally...guess I'll have to figure out what could be the problem. — , Oct 23 '09 at 18:56

Using thickbox with imagekit

2 Answers2