views:

74

answers:

5

I have a dilemma, I have a classifieds website, and whenever an ad is clicked a php page shows up displaying all details.

Here I want the pictures to display also, but the thing is, I want the user to click on whatever thumbnail and the thumbnail will get resized to its real size. The coding for this is no prob.

The problem is, how should I do it?

I also have a drop shadow function in my php code, which gets called whenever the image is displayed.

So, I can't use javascript because I am creating all tables with PHP and displaying them in the HTML section of the page.

Like this:

 <?php $table="alot of information INCLUDING the images"; ?>
 <HTML> <?php echo $table;?> </HTML>

I have thought about sending the image-paths to hidden-inputs on the html page, and then use javascript to fetch images whenever user clicks on them. BUT, the images drop_shadow function is still in PHP. Another way might be to create the dropShadow function in javascript also, but I would have to send the image-sizes to hidden inputs as well right? because javascript can't be used to get image width and height?

Any suggestions ?

If you don't understand my Q or need more input, just let me know and I will update the Q!

Thanks

A: 

How about have the image tag contain all the attributes needed for the large image and use javascript to get access to those attributes and use an onclick and reference the clicked element to get the attribute values?

fernyb
Do you mean fetching the attributes with php and insert them into a image-tag on the HTML side ?
Camran
Yeah, it seems you just want to have a large image of the image that was clicked on.
fernyb
A: 

Just a sidenote, from what you're telling it sounds like you could improve your performance and server load massively by introducing some caching, on both the HTML output and the image processing.

Pekka
Yes, I will have to implement that as one of the final steps in the website. Good note! Thanks
Camran
A: 

If I understand what you're saying, you have some images for ads that are plain and unadorned, but when you present them to the user you want to pre-process them using a PHP script that adds a drop shadow effect. You want this effect to be applied both to the thumbnail and the full-sized image? Either way, this is doable in JavaScript - you just have to adjust your PHP script a little bit to make the drop_shadow method available via a GET request. For instance, create something like a REST web service that's only responsible for serving images, each one processed using your drop shadow effect. Then when a user clicks a thumbnail in the page, you can use a JQuery script to open a "child window" within the HTML (really just an absolutely-positioned, floating DIV) to display the full-sized image, which is retrieved dynamically from the web service, and will therefore have the drop shadow effect applied.

Dathan
A: 

It sounds like you're using PHP to create the thumbnails - something like image.php?img=<name>, which is also responsible for adding shadows. Why not add a parameter, like image.php?img=<name>&thumb=1 to indicate a small thumbnail, and return a full image otherwise. You can choose to add shadows depending on your parameters, or even add a 3rd param for it.

K Prime
A: 

If you haven't already, look at the jQuery javscript library. There is a lot of inbuilt functionality that could help you here, plus an ever expanding range of plugins and widgets available.

I've used the FancyBox plugin for thumbnails and I'm sure a quick google could provide you with a drop shadow plug in as well.

You may well end up stick to your server side solution but jQuery is definatly worth a look. My client side scripting life has been so much better since discovering this gem.

Jon P