Pages: 1
[b]Credit :[/b] Dynamicdrive for Ultimate Fade In Slideshow versi 1.51 [b]OS :[/b] Mozilla, Opera, IE5 and Safari [b]Preview :[/b] [url]http://plumbon.fileave.com/photo.html[/url] 1. Kita siapkan ima
You are viewing a post by KaNaLiTnUk. View all 17 posts in [b]Credit :[/b] Dynamicdrive for Ultimate Fade In Slideshow versi 1.51 [b]OS :[/b] Mozilla, Opera, IE5 and Safari [b]Preview :[/b] [url]http://plumbon.fileave.com/photo.html[/url] 1. Kita siapkan ima.
2008-12-30 12:54:52
- KaNaLiTnUk
- » FTalkFreak
1911
0
1969-12-31
[b]Credit :[/b] Dynamicdrive for Ultimate Fade In Slideshow versi 1.51 [b]OS :[/b] Mozilla, Opera, IE5 and Safari [b]Preview :[/b] [url]http://plumbon.fileave.com/photo.html[/url] 1. Kita siapkan ima
[b]Credit :[/b] Dynamicdrive for Ultimate Fade In Slideshow versi 1.51
[b]OS :[/b] Mozilla, Opera, IE5 and Safari
[b]Preview :[/b] [url]http://plumbon.fileave.com/photo.html[/url]
1. Kita siapkan image yg akan kita buat menjadi slideshow. Biar lebih bagus, sesuaikan semua ukuran tinggi dan lebar imagenya. Disarankan utk primary pic lebarnya tidak lebih dari 200px. Upload semua image tersebut dan ambil URL nya.
2. Kita buat script HTML sebagai berikut :
[spoiler]<html>
<head>
<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
var [color=blue][b]fadeimages[/b][/color]=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["[color=red][b]URL IMAGE[/b][/color]", "[color=orange][b]URL IMAGE LINK[/b][/color]", "_new"] //image with link and target syntax
fadeimages[1]=["[color=red][b]URL IMAGE[/b][/color]", "[color=orange][b]URL IMAGE LINK[/b][/color]", "_new"] //image with link and target syntax
fadeimages[2]=["[color=red][b]URL IMAGE[/b][/color]", "[color=orange][b]URL IMAGE LINK[/b][/color]", "_new"] //image with link and target syntax
var fadebgcolor="white"
////NO need to edit beyond here/////////////
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
</script>
</head>
<body>
<script type="text/javascript">
new fadeshow([color=blue][b]fadeimages[/b][/color], [color=blue][b]200[/b][/color], [color=blue][b]267[/b][/color], [color=blue][b]2[/b][/color], [color=blue][b]3000[/b][/color], [color=blue][b]1[/b][/color], [color=blue][b]"R"[/b][/color])
</script>
</body>
</html>[/spoiler]
[color=red][b]URL IMAGE[/b][/color] : Ganti dengan URL image kalian :)
[color=orange][b]URL IMAGE LINK[/b][/color] : Ganti dengan referral link image kalian :)
[b][u]Perhatikan bagian yg biru[/u][/b] :
[color=blue][b]fadeimages[/b][/color] : Nama variabel JS fade in slideshow kalian (lihat bagian yg tebal biru diatas). Itu harus sesuai :)
[color=blue][b]200[/b][/color] : Lebar image kalian dalam pixel :)
[color=blue][b]267[/b][/color] : Tinggi image kalian dalam pixel :)
[color=blue][b]2[/b][/color] : Ukuran border slideshow kalian dalam pixel :)
[color=blue][b]3000[/b][/color] : Waktu pergantian antar image (dalam milidetik). 3000 artinya 3 detik :)
[color=blue][b]1[/b][/color] : Untuk menentukan apakah image kita akan stop atau tidak ketika kursor kita arahkan kesana. [b]1 = Yes 2 = No[/b] :)
[color=blue][b]"R"[/b][/color] : Membuat image kita muncul secara random. Hilangkan saja kalau tidak ingin dibuat random.
3. Uploadkan script HTML kalian tersebut (ambil URL nya) lalu pakai script JS sederhana ini dan masukkan ke dalam onload handler JS utamamu :
[quote]content_0.getElementsByTagName("a")[0].innerHTML="<center><iframe src='[color=blue][b]URL HTML[/b][/color]' width='[color=blue][b]XXX[/b][/color]' height='[color=blue][b]YYY[/b][/color]' scrolling='no' marginwidth='0' marginheight='0' allowTransparency='true' frameborder='0'></iframe></center>"[/quote]
Sesuaikan width (lebar) dan height (tinggi) nya dengan width serta height HTML slideshow kalian.
4. Kalian tidak hanya bisa pakai fade in slideshow ini untuk primary pic. Silahkan bereksperimen sendiri OK.
Last edited by KaNaLiTnUk (2008-12-30 13:01:15)
 |