Monday, 4 January 2010

Embedded Piku-Piku

How to embed a Piku-Piku in a blog.




<div id="vS7795581878756314" style="position:relative; overflow:hidden;"><a href="http://www.start3d.com/2356738001/0001/7795581878756314"><img id="iS7795581878756314" style="position:absolute;padding:0px;" src="http://www.start3d.com/uploads/2356738001/7795581878756314_composite.jpg?v=2"
onload="function Piku(t,n){var T=t,N=n,I=document.getElementById('i'+T),V=document.getElementById('v'+T).style,W=I.clientWidth/N,D=0,X=0,P='px';this.F=function(){X=Math.min(Math.max(X+D,0),N-1);D=(!X?1:X==N-1?-1:D);I.style.left=-W*(.0625+X)+P;setTimeout(T+'.F();',33*(5-X*(N-1-X)/N));};V.width=W*.875+P;V.height=I.clientHeight+P;this.F();};
S7795581878756314 = new Piku('S7795581878756314',11);"
/></a></div>


The colored text shows the bits you should replace: the link and the image (obtained from the photo view), and the name of the global variable S7795581878756314, which should be unique on the page, start with a letter and contain only letters and numbers. The number 11 at the end indicates the number of views in the Piku-Piku, which is 11 in the current version.

How to embed a Piku-Piku thumbnail.



Here, the global variable is S7795581878756314T, with a T added so that it doesn't interfere with the one above. The image changed to http://www.start3d.com/uploads/2356738001/7795581878756314_composite_thumb.jpg?v=2. Note that the number at the end is 6 for a thumbnail.

(This post was updated with simpler code.)
(This post was updated with a bug fix for Safari on 18 Jan.)

11 comments:

  1. Very cool! I've just used this code to embed a few 3D photos into our blog about a house construction project:

    http://house.falk.us/2010/01/3d-photos.html

    ReplyDelete
  2. A nice feature to allow posting to blogs! I've written a story for my blog about start3d at: http://swflorida.blogspot.com/2010/02/how-to-make-your-own-3-d-photos.html

    Is there a way to post our start3d photos on Flickr or Picasaweb? And how to post a photo to Blogger sites? (sites.google.com)

    ReplyDelete
  3. I tried to embed on blogger (safari) and got this error message :
    Must be at most 256 characters

    ReplyDelete
  4. I can't get over how cool that picture is!

    ReplyDelete
  5. I just discovered this site. What a great innovation.

    ReplyDelete
  6. I love it and have used it extensively on a number of public and private blogs. Now I'm creating a website wherein I will use both Piku - Piku and anaglyph format photos and anglyph videos of scenic stuff. All were taken using the Fujifilm 3D camera. More on this later.

    ReplyDelete
  7. I'm wondering how much (more) can I see in the viewfinder of a Panasonic 3D HD http://SDT750.NET video camera when it gets released for shipping in October?

    ReplyDelete
  8. Anyone know how to get this to work in Word Press? Seems to not like the JS

    ReplyDelete
  9. @Marc - I can't share my piku-piku in LiveJournal either. Seem to be a problem with most blog sites blocking JavaScript.

    I hope you guys at Start 3D will come with Flash player, which would be much more embeddable on standard blog sites.

    ReplyDelete