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. XML AficionadoJan 9, 2010 02:54 PM
    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. KQ4YMFeb 20, 2010 09:02 AM
    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. Bonaire ImagesMar 4, 2010 07:24 AM
    I tried to embed on blogger (safari) and got this error message :
    Must be at most 256 characters
    ReplyDelete
  4. TashaMar 4, 2010 10:31 AM
    I can't get over how cool that picture is!
    ReplyDelete
  5. HorganicMar 21, 2010 06:16 PM
    I just discovered this site. What a great innovation.
    ReplyDelete
  6. Jim HansonJul 4, 2010 10:54 AM
    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. PikuJul 30, 2010 11:27 PM
    butiful
    ReplyDelete
  8. Thanks for such an awesome tip!
    Owner Builder
    ReplyDelete
  9. Mike RoseSep 1, 2010 07:29 AM
    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
  10. MarcOct 12, 2010 04:06 AM
    Anyone know how to get this to work in Word Press? Seems to not like the JS
    ReplyDelete
  11. fivestepAug 24, 2011 01:08 AM
    @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