Add multiple banners everywhere with WF with auto play support
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
- ...
