Using Ajax to retrieve image 1

[AP81]

Hi,

I have some thumbnails, which when clicked I would like to display the full-size version of the image in another container.

To give some perspective, the thumbnails are all 70x70 and are around 4KB in size. The full size versions are around 100 to 300KB.

My first attempt at this was to simply change the src attribute of the <img> in the container on the thumbnail mouseover. This works, but on the first mouseover event for each thumbnail I get a blank image everytime (as the browser can't download the image fast enough).

So, having given up with Javascript, I am hoping I can achieve this using an Ajax call to a PHP file.

Is it possible to return binary data? Or am I going about this the wrong way?

 

[johnwm]

Have you considered using a ready-made solution, rather than reinventing the wheel. There are several alternatives including floatbox which I find very satisfactory.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[AP81]

Thanks! Will give it a try

 

[ScottPrelewicz]

To answer the original question, if you preload all of the images, they will be available for the update.

Scott Prelewicz
Web Developer
COMAND Solutions

 

[johnwm]

... but they still take the same length of time to download!

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[Stretchwickster]

So, having given up with Javascript, I am hoping I can achieve this using an Ajax call to a PHP file.

Just for the record, Ajax calls are made using Javascript!

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[ScottPrelewicz]

Very true johnwm, however the issue with blank images would probably be fixed. Definitely not suggesting he do it this way, just a thought.

Scott Prelewicz
Web Developer
COMAND Solutions

 

[AP81]

Well I ended up using an Ajax call to a PHP template and set the <img> properties in the PHP template (which simulates a download). On success I then display the image.

This seems to work well, and the call is only made on the first time each image is rolled over.

Overkill, but it works well.