|
||||||||||||||||
|
|
||||||||||||||||
|
|
Search
 |
| slide show image di joomla. |
|
|
|
| Written by bayoetech | |
| Thursday, 02 July 2009 | |
|
Untuk membuat slide show images, caranya cukup mudah. masukan scrip di bawah ini ke bagian: 1. site > pilih template manager 2. lalu site template 3. pilih tempalte yang sedang aktif 4. lalu klik edit HTML 5. tempat kan scrip tersebut di atas "<?php mosMainBody(); ?>" yang ada di templater yang sedang aktif. 6. penempatan bisa saja di sesuikan dengan keadaan template..... 7. untuk ukuran foto dapat di sesuaikan dengan keinginan kita yang bisa kita ubah pada bagian scrip yang menunjukan tinggi dan lebar, seperti yang di bawah ini " var slideshow_width='604px' //SET IMAGE WIDTH var slideshow_height='604px' //SET IMAGE HEIGHT " 8. nah ini dia script nya. <script language="JavaScript1.2" type="text/javascript"> var slideshow_width='448px' //SET IMAGE WIDTH var slideshow_height='298px' //SET IMAGE HEIGHT var pause=2000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds) var fadeimages=new Array() //SET IMAGE PATHS. Extend or contract array as needed fadeimages[0]="http://blog.unila.ac.id/files/2008/02/blog1.jpg" fadeimages[1]="http://blog.unila.ac.id/files/2008/02/blog.jpg" fadeimages[2]="http://blog.unila.ac.id/gambar/air%20mancur%20unila.JPG" fadeimages[3]="http://blog.unila.ac.id/gambar/latihan_karate_unila.JPG" fadeimages[4]="http://blog.unila.ac.id/gambar/mahasiswa%20baru%20unila.jpg" fadeimages[5]="http://blog.unila.ac.id/gambar/mahasiswi.jpg" fadeimages[5]="http://blog.unila.ac.id/gambar/mahasiswa_unila.JPG" ////NO need to edit beyond here///////////// var preloadedimages=new Array() for (p=0;p<fadeimages.length;p++){ preloadedimages[p]=new Image() preloadedimages[p].src=fadeimages[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+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>') else document.write('<img name="defaultslide" src="'+fadeimages[0]+'">') var curpos=10 var degree=10 var curcanvas="canvas0" var curimageindex=0 var nextimageindex=1 function fadepic(){ if (curpos<100){ curpos+=10 if (tempobj.filters) tempobj.filters.alpha.opacity=curpos else if (tempobj.style.MozOpacity) tempobj.style.MozOpacity=curpos/101 } else{ clearInterval(dropslide) nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1" tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">' nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0 var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas) tempobj2.style.visibility="hidden" setTimeout("rotateimage()",pause) } } function rotateimage(){ if (ie4||dom){ resetit(curcanvas) var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.style.zIndex++ tempobj.style.visibility="visible" var temp='setInterval("fadepic()",50)' dropslide=eval(temp) curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0" } else document.images.defaultslide.src=fadeimages[curimageindex] curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0 } function resetit(what){ curpos=10 var crossobj=ie4? eval("document.all."+what) : document.getElementById(what) if (crossobj.filters) crossobj.filters.alpha.opacity=curpos else if (crossobj.style.MozOpacity) crossobj.style.MozOpacity=curpos/101 } function startit(){ var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas) crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">' rotateimage() } if (ie4||dom) window.onload=startit else setInterval("rotateimage()",pause) </script> semoga bermanfaat!!!! |
| < Prev | Next > |
|---|
|
|||||||||||||||||
