[vbvr]

Hello Everyone,

I am trying to see if the following can be achieved using Jquery or CSS

I need to create a thumbnail gallery, where when a user hovers over any thumbnail image they would get an option to download the image either in High or Low resolution. Something like how you see in the below mockup.



Uploaded with ImageShack.us


I would greatly appreciate if anyone an point me in the right direction.


regards
V

[codeprada]

The actual downloading can't be done with just Javascript since it's client side. An option can most definitely pop up indicating whether to download the high or low resolution version of an image using Javascript.

To perform the actual download use PHP or some other server side script.

This post has been edited by codeprada: 12 July 2011 - 12:21 PM

[e_i_pi]

You could put separate onclick events on each of the buttons too.

[vbvr]

codeprada, on 12 July 2011 - 12:21 PM, said:

The actual downloading can't be done with just Javascript since it's client side. An option can most definitely pop up indicating whether to download the high or low resolution version of an image using Javascript.

To perform the actual download use PHP or some other server side script.

codeprada, I understand for the actual download we will need to use a server side script, but how to I get the two small buttons on to the thumbnail and have those button clickable ?


regards
V

[satis]

I'd use javascript for that.

Basically, attach an onmouseover event to your image. This would invoke a javascript function to generate your two buttons. The user could then push either button to download a file.

If I were to do that, i've probably have the thumbnail be something like Image3213_thumb.png or so, and every image to maintain that naming format. It would then be simple for Javascript to get the image src and convert to that to Image3213_highRes.png or Image3213_lowRes.png, as an example. Then your buttons could just be straight links to the requested item. Or you can redirect it through a php script, your choice.

Regarding the actual making of buttons in javascript, you'd need to figure out the x/y location of them, then dynamically create some floating html elements, be they buttons, divs, or something more complicated. I can't access your example image, so I'm driving blind on that part.

Did that answer your question?

This post has been edited by satis: 18 July 2011 - 06:33 AM