Re: [PHP] Re: Really impressive work
At 9:43 PM -0400 5/5/10, Robert Cummings wrote: 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 -snip- 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. Rob: Yes, that's what I observed as well. The only way I could think they did it was to pull the positions for the overlays from a database. My inquiry was only to check if something new had emerged. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com -- PHP General Mailing List (http://www.php.net/) To unsubscribe, visit: http://www.php.net/unsub.php
[PHP] Re: Really impressive work
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 :) Best, Nathan -- PHP General Mailing List (http://www.php.net/) To unsubscribe, visit: http://www.php.net/unsub.php
Re: [PHP] Re: Really impressive work
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
