Animasi gambar dapat dijalankan dengan mudah menggunakan plugin dari WordPress, baik untuk halaman blog, widget maupun ruang postingan. Bisa juga animasi gambar dilakukan menggunakan skrip pemrograman lain, misal menggunakan Javascript. Tentu masing-masing punya kelebihannya.
Di bawah ini diberikan skript Javascript untuk animasi gambar yang dapat ditempatkan di widget. Silahkan pelajari skrip-nya.
<div align="center"> <script language="JavaScript1.2"> //Presentational Slideshow Script- By Dynamic Drive var slideshow_width='100%' //atur lebar slideshow var slideshow_height='70px' //atur tinggi slideshow var pause=5000 //atur jeda antar slide(1000 = 1 detik) var slidebgcolor="white" var dropimages=new Array() //atur alamat gambar dropimages[0]="http://kasmui.com/gb/chemspider.png" dropimages[1]="http://kasmui.com/gb/chemicalize.png" dropimages[2]="http://kasmui.com/gb/pubchem.png" dropimages[3]="http://kasmui.com/gb/chemaxon.png" dropimages[4]="http://kasmui.com/gb/phet.png" dropimages[5]="http://kasmui.com/v1/wp-content/uploads/2015/05/olimpiade.png" dropimages[6]="http://kasmui.com/v1/wp-content/uploads/2015/05/lab.png" //bisa ditambahkan alamat gambarnya var droplinks=new Array() //atur link (URL) yang akan dituju dari klik gambar droplinks[0]="http://www.chemspider.com/Search.aspx" droplinks[1]="http://www.chemicalize.org/#properties" droplinks[2]="http://pubchem.ncbi.nlm.nih.gov/" droplinks[3]="http://marvin.kasmui.com" droplinks[4]="http://phet.colorado.edu/en/simulations/category/chemistry" droplinks[5]="http://olimpiade.kasmui.com/" droplinks[6]="http://laboratorium.kasmui.com/" //bisa ditambahkan URL klik gambarnya var droptitles=new Array() //atur title yang akan dituju dari klik gambar droptitles[0]="Akses http://www.chemspider.com/Search.aspx" droptitles[1]="Akses http://www.chemicalize.org/#properties" droptitles[2]="Akses http://pubchem.ncbi.nlm.nih.gov/" droptitles[3]="Akses http://marvin.kasmui.com" droptitles[4]="Akses http://phet.colorado.edu/en/simulations/category/chemistry" droptitles[5]="Akses http://olimpiade.kasmui.com/" droptitles[6]="Akses http://laboratorium.kasmui.com/" //bisa ditambahkan title klik gambarnya ////Area di bawah ini tidak perlu diedit, kecuali yang sudah mahir///////////// var preloadedimages=new Array() for (p=0;p<dropimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=dropimages[p] } var ie4=document.all var dom=document.getElementById if (ie4||dom) document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';background-color:'+slidebgcolor+';left:-'+slideshow_width+'"></div></div>') else document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>') var curpos=parseInt(slideshow_width)*(-1) var degree=10 var curcanvas="canvas0" var curimageindex=linkindex=0 var nextimageindex=1 function movepic(){ if (curpos<0){ curpos=Math.min(curpos+degree,0) tempobj.style.left=curpos+"px" } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) var slideimage='<img src="'+dropimages[curimageindex]+'" title="'+droptitles[curimageindex]+'" border=0>' tempobj.innerHTML=(droplinks[curimageindex]!="")? '<a href="'+droplinks[curimageindex]+'">'+slideimage+'</a>' : slideimage nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0 setTimeout("rotateimage()",pause) } } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ var temp='setInterval("movepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=dropimages[curimageindex] linkindex=curimageindex curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0 } function rotatelink(){ if (droplinks[linkindex]!="") window.location=droplinks[linkindex] } function resetit(what){ curpos=parseInt(slideshow_width)*(-1) var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) crossobj.style.left=curpos+"px" } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>' rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause) </script> </div>
Hasilnya dapat dilihat di link http://blogchem.com/dokumen/animasi.html