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