Nathan Rixham wrote:
tedd wrote:
Hi gang:
I found something that really impressed me -- please review this:
http://palomarjewelry.com/product/id/19/collectionId/1/typeId/3
Try changing the number and type of stones and watch the main image
change (i.e., the basket).
If one calculates the number of permutations required to show this
single piece of jewelry with 12 different stone types located in 15
different stone positions, you will arrive at a very large number. The
specific math escapes me at the moment but something in the order of 15
factorial -- a very large number.
Now, I realize that this company did not take 15 factorial pictures of
this single piece of jewelry to present all these different combinations
but instead placed smaller images of each of the stones at specific
coordinates on the larger image of the jewelry.
I imagine that each piece of jewelry must have the coordinates of each
setting in a database so that they can "on-the-fly" assemble the
finished product as per user's direction.
For example, let's take the image of the basket pendant showing three
stones. Each of the stone locations would have a specific pixel
placement (i.e., x,y). As such, the database would have a field for the
image and three location fields for stones 1, 2, and 3.
Now, we also have smaller images of 12 different stones (in heads) that
are all the same size. Thus, as the user picks the stones and positions
they want and the image is assembled "on the fly".
Is that the way you see this? Or is there a better way?
Better way, no. Alternative ways, yes.
SVG
Canvas + JS
HTML4 + CSS + JS (optional transparent pngs)
Flash
Any number of java plugins (although perhaps overkill).
Personally though, I'd go for SVG or the way it is currently implemented
with server side gd or suchlike.
The reason for saying this is to ensure that the results were identical
on as many platforms as possible - the one addition I would make would
be an "update image" button which displayed on <noscript>, which
resubmitted the page / form and showed the image - for those without (or
with non compliant) js implementations.
I tend to agree that it's impressive, personally I don't think the code
behind it rocket science; however the idea to peice what is essentially
"how many numbers do you want, what are those numbers" together in such
a user pleasing and useful way, is definately something to applaud :)
I would use PNGs with alpha transparencies. You have X images with the
appropriate positions and then you just overlay an alpha transparency
PNG in the correct spot via CSS. Pretty simple actually. Relative
position the ring, absolute position the stone relative to the ring.
Even IE6 will support this with pngfix.js. Viewing the page media in
Firefox though shows they are generating it server side though.
Cheers,
Rob.
--
http://www.interjinn.com
Application and Templating Framework for PHP
--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php
