1

I'm trying to get it so, every time someone donates a set amount on a page, another equal portion of an image is revealed. I've got most of the other logic down (PayPal provides nice unique "you've donated" identifiers and such), however, I'm having trouble with revealing the image bit by bit.

I tried breaking up the image into small chunks (person wants at least 250 donations until the image is totally revealed), however, that doesn't work because of multiple formatting images. Is there any better way (say, PHP image processing or perhaps CSS/Javascript)?

  • 2
    This sounds suspiciously like these pseudo-porn drinking glasses that used to reveal the lady as the glass got warmer (i.e., as you drank the cold drink) :-) Please tell me it ain't so. – paxdiablo Jul 14 '09 at 06:13
  • I don't think the world needs another million pixel ad frenzy. – Eric Jul 14 '09 at 06:15
  • It's not a million pixel ad spamfest, that's for sure. :) @Pax Uh, it's similar in concept, but it's not porn –  Jul 14 '09 at 15:08

3 Answers3

3

Why don't you just create 251 static images, one for each payment level and serve the correct static image dynamically, based on the proportion of funds received to date.

This seems to be the simplest way of doing it, the only code required is to query the payment level, and send the relevant image down to the client.

So have a image0.jpg (empty), image1.jpg (one segment), image2.jpg and so on, up to image250.jpg (all segments), and have your web application serve the correct one.

You'll need to make sure these images aren't accessible in the public area of your web site so people can't just figure out the URL and steal your "precious".

So, your web application will receive a request for images/image.jpg, query which image should be sent, and respond with the data stream from the actual image, something like:

if actual > desired:
    number = 250
else:
    number = int (actual * 250 / desired)
imagename = "image" + str(number) + ".jpg"
paxdiablo
  • 854,327
  • 234
  • 1,573
  • 1,953
  • Hey, that might actually work pretty well. Sometimes you never think of the simplest things. :) Possible best answer for you. –  Jul 14 '09 at 06:52
0

The quickest way would be to use Google Charts or PayPal's images and see if you can adapt one to your website. Otherwise, you're going to need to either generate the images dynamically, or statically generate them. Since it's not that many images, you may as well statically generate them.

You could do this with a number of tools, but ImageMagick is probably the most versatile. If you want to use you own image, here's how you could do it with ImageMagick.

# take your source image, and make it a known size.
#In this case, I'll make my image a 256 px square
convert flower.jpg -resize 256x256^ -gravity center -extent 256x256 flower_256.jpg
# run this command in a bash shell to generate the images
for i in $(seq -w 0 256); 
do 
   convert flower_256.jpg -gravity west -background blue -crop ${i}x256+0+0 -extent 256x256 flower_seq_$i.jpg
done

You'll now have 256 images looking like this:

25%
(source: theeggeadventure.com)
50%
(source: theeggeadventure.com)
75%
(source: theeggeadventure.com)
100%
(source: theeggeadventure.com)

Obviously, you can adjust the geometry or colors to suit.

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
brianegge
  • 29,240
  • 13
  • 74
  • 99
  • He doesn't put any levels in the URL and in fact he offers an excellent complement to Pax's solution: brianegge's solution will generate the 251 images Pax's solution required. +1. – Josh Jul 14 '09 at 12:07
0

You could hide the image inside a <div>, with overflow set to hidden. Then you can simply make the div element higher as you recieve more donations.

<div id="imageContainer">
   <img src="secretImg.jpg"/>
</div>

CSS:

#imageContainer {
   height: 20px;
   overflow: hidden;
}
peirix
  • 36,512
  • 23
  • 96
  • 126
  • Pretty easy to see the secret image though. – Rich Bradshaw Jul 14 '09 at 06:31
  • Yeah, I know. But I wasn't sure _how_ secret the image was supposed to be. If it was only for fun sake to hide part of the image, then this would work. But if the goal is to make the users want to donate to be able to see the whole image, then this would be a bad idea. – peirix Jul 14 '09 at 06:46
  • +1 to counteract the negative. This is actually a fine answer, as long as the fact that it is woefully insecure is understood. – SamGoody Jul 14 '09 at 07:36
  • @samgoody, you should probably +1 brianegge's answer as well :-) But seriously, if the intent is to make a certain amount of money by not revealing content until you have it, woefully insecure is not really the way to go. – paxdiablo Jul 14 '09 at 09:08