4 Replies - 736 Views - Last Post: 18 July 2011 - 06:29 AM

#1 vbvr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-July 11

How can I Hover over thumbnail image to download in high or low res?

Posted 12 July 2011 - 07:32 AM

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.

Posted Image

Uploaded with ImageShack.us


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


regards
V

Is This A Good Question/Topic? 0
  • +

Replies To: How can I Hover over thumbnail image to download in high or low res?

#2 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 943
  • View blog
  • Posts: 2,353
  • Joined: 15-February 11

Re: How can I Hover over thumbnail image to download in high or low res?

Posted 12 July 2011 - 12:21 PM

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

Was This Post Helpful? 0
  • +
  • -

#3 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 782
  • View blog
  • Posts: 1,663
  • Joined: 30-January 09

Re: How can I Hover over thumbnail image to download in high or low res?

Posted 12 July 2011 - 04:34 PM

You could put separate onclick events on each of the buttons too.
Was This Post Helpful? 0
  • +
  • -

#4 vbvr  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 12-July 11

Re: How can I Hover over thumbnail image to download in high or low res?

Posted 14 July 2011 - 04:21 PM

View Postcodeprada, 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
Was This Post Helpful? 0
  • +
  • -

#5 satis  Icon User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: How can I Hover over thumbnail image to download in high or low res?

Posted 18 July 2011 - 06:29 AM

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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1