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.)

9 comments:

XML Aficionado said...

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

KQ4YM said...

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)

Bonaire Images said...

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

Tasha said...

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

Horganic said...

I just discovered this site. What a great innovation.

Jim Hanson said...

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.

Piku said...

butiful

Online Strategic Marketing Consultants said...

Thanks for such an awesome tip!
Owner Builder

Mike Rose said...

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?

Post a Comment