Banner slider widget for Widget Framework
Compatible XF Versions: 1.5
Additional Requirements: [bd] Widget Framework: https://xenforo.com/community/resources/bd-widget-framework.297/
Hi,
1. Go to your WF page in ACP and press "+ Add Widget".
2. Choose "[Advanced] HTML" for Renderer.
3. Use the code below in HTML field:
Code:
<style>
* {margin:0; padding:0}
#wrapper {width:234px; margin:5px auto; background: #fff;}
#container {position:relative; background:none; padding:32px; height:240px; border-right:1px solid none; border-bottom:1px solid none}
.sliderbutton {float:left; width:25px; height:240px; cursor:pointer}
#slideleft {background:url(http://source.dadparvar.ir/forumminislider/images/icons.gif) -50px -265px no-repeat}
#slideleft:hover {background-position:-0 -265px}
#slideright {background:url(http://source.dadparvar.ir/forumminislider/images/icons.gif) 0 90px no-repeat}
#slideright:hover {background-position:-50px 90px}
#slider {float:left; position:relative; overflow:auto; width:120px; height:240px}
#slider ul {position:absolute; list-style:none; top:0; left:0}
#slider li {float:left; width:120px; height:240px}
#slider li img {width:120px; height:240px}
.pagination {position:absolute; top:20px; right:85px; list-style:none; height:25px}
.pagination li {float:left; cursor:pointer; height:8px; width:8px; background:#ccc; margin:0 4px 0 0; border:1px solid #fff}
.pagination li:hover, li.current {background:none}
</style>
<script>
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.slider=function(){
function slide(n,p){this.n=n; this.init(p)}
slide.prototype.init=function(p){
var s=this.x=T$(p.id), u=this.u=T$$('ul',s)[0], c=this.m=T$$('li',u), l=c.length, i=this.l=this.c=0; this.b=1;
if(p.navid&&p.activeclass){this.g=T$$('li',T$(p.navid)); this.s=p.activeclass}
this.a=p.auto||0; this.p=p.resume||0; this.r=p.rewind||0; this.e=p.elastic||false; this.v=p.vertical||0; s.style.overflow='hidden';
for(i;i<l;i++){if(c[i].parentNode==u){this.l++}}
if(this.v){;
u.style.top=0; this.h=p.height||c[0].offsetHeight; u.style.height=(this.l*this.h)+'px'
}else{
u.style.left=0; this.w=p.width||c[0].offsetWidth; u.style.width=(this.l*this.w)+'px'
}
this.nav(p.position||0);
if(p.position){this.pos(p.position||0,this.a?1:0,1)}else if(this.a){this.auto()}
if(p.left){this.sel(p.left)}
if(p.right){this.sel(p.right)}
},
slide.prototype.auto=function(){
this.x.ai=setInterval(new Function(this.n+'.move(1,1,1)'),this.a*1000)
},
slide.prototype.move=function(d,a){
var n=this.c+d;
if(this.r){n=d==1?n==this.l?0:n:n<0?this.l-1:n}
this.pos(n,a,1)
},
slide.prototype.pos=function(p,a,m){
var v=p; clearInterval(this.x.ai); clearInterval(this.x.si);
if(!this.r){
if(m){
if(p==-1||(p!=0&&Math.abs(p)%this.l==0)){
this.b++;
for(var i=0;i<this.l;i++){this.u.appendChild(this.m[i].cloneNode(1))}
this.v?this.u.style.height=(this.l*this.h*this.b)+'px':this.u.style.width=(this.l*this.w*this.b)+'px';
}
if(p==-1||(p<0&&Math.abs(p)%this.l==0)){
this.v?this.u.style.top=(this.l*this.h*-1)+'px':this.u.style.left=(this.l*this.w*-1)+'px'; v=this.l-1
}
}else if(this.c>this.l&&this.b>1){
v=(this.l*(this.b-1))+p; p=v
}
}
var t=this.v?v*this.h*-1:v*this.w*-1, d=p<this.c?-1:1; this.c=v; var n=this.c%this.l; this.nav(n);
if(this.e){t=t-(8*d)}
this.x.si=setInterval(new Function(this.n+'.slide('+t+','+d+',1,'+a+')'),10)
},
slide.prototype.nav=function(n){
if(this.g){for(var i=0;i<this.l;i++){this.g[i].className=i==n?this.s:''}}
},
slide.prototype.slide=function(t,d,i,a){
var o=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
if(o==t){
clearInterval(this.x.si);
if(this.e&&i<3){
this.x.si=setInterval(new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')'),10)
}else{
if(a||(this.a&&this.p)){this.auto()}
if(this.b>1&&this.c%this.l==0){this.clear()}
}
}else{
var v=o-Math.ceil(Math.abs(t-o)*.1)*d+'px';
this.v?this.u.style.top=v:this.u.style.left=v
}
},
slide.prototype.clear=function(){
var c=T$$('li',this.u), t=i=c.length; this.v?this.u.style.top=0:this.u.style.left=0; this.b=1; this.c=0;
for(i;i>0;i--){
var e=c[i-1];
if(t>this.l&&e.parentNode==this.u){this.u.removeChild(e); t--}
}
},
slide.prototype.sel=function(i){
var e=T$(i); e.onselectstart=e.onmousedown=function(){return false}
}
return{slide:slide}
}();
</script>
<div id="wrapper">
<div id="container">
<div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
<div id="slider">
<ul>
<li><a href="http://talar.dadparvar.ir/forums/azmoon" target="_blank"><img src="http://rasane.dadparvar.ir/ads/azmoon2.gif" alt="Image One" /></a></li>
<li><a href="http://talar.dadparvar.ir/forums/azmoon" target="_blank"><img src="http://rasane.dadparvar.ir/ads/azmoon2.gif" alt="Image Two" /></a></li>
<li><a href="http://talar.dadparvar.ir/forums/azmoon" target="_blank"><img src="http://rasane.dadparvar.ir/ads/azmoon2.gif" alt="Image Three" /></a></li>
<li><a href="http://talar.dadparvar.ir/forums/azmoon" target="_blank"><img src="http://rasane.dadparvar.ir/ads/azmoon2.gif" alt="Image Four" /></a></li>
<li><a href="http://talar.dadparvar.ir/forums/azmoon" target="_blank"><img src="http://rasane.dadparvar.ir/ads/azmoon2.gif" alt="Image Five" /></a></li>
</ul>
</div>
<div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>
<ul id="pagination" class="pagination">
<li onclick="slideshow.pos(0)"></li>
<li onclick="slideshow.pos(1)"></li>
<li onclick="slideshow.pos(2)"></li>
<li onclick="slideshow.pos(3)"></li>
<li onclick="slideshow.pos(4)"></li>
</ul>
</div>
</div>
<center>
240*120 Banner | 25$/month
<center>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:5,
resume:false,
vertical:false,
navid:'pagination',
activeclass:'current',
position:0,
rewind:false,
elastic:true,
left:'slideleft',
right:'slideright'
});
</script>
4.You can change everything from the code, like:
Number of banners
URL of Banners
URL of icons
Pagination
Auto play
Speed
Size
...
Note: If you want to load icons of slider from your own server, easily download the image Attached below and upload it to your own server, then change related URLs in the code.
Nessun commento :
Posta un commento