Witam
Chciałbym na stronie, która ma automatycznie rozciągane i dopasowywane do rozdzielczości strony tło.
Strona posiada 5 wgranych jpg na tła.
Chciałbym aby tło się co 8-10 sec zmieniało automatycznie na kolejne.
Oto kod odpowiedzialny za zmianę tła i rozciąganie
(function($){
$.fn.bgStretch=function(o){
var th=$(this),
data=th.data('bgStretch'),
_={
align:'leftTop',
css:{
leftTop:{
left:0,
right:'auto',
top:0,
bottom:'auto'
},
rightTop:{
left:'auto',
right:0,
top:0,
bottom:'auto'
},
leftBottom:{
left:0,
right:'auto',
top:'auto',
bottom:0
},
rightBottom:{
left:'auto',
right:0,
top:'auto',
bottom:0
}
},
preFu:function(){
_.img
.load(function(){
_.k=_.img.height()/_.img.width()
_.img
.css({
width:'100%',
height:'100%',
position:'absolute',
zIndex:-1,
left:0,
top:0
})
})
_.img[0].complete
&&_.img.trigger('load')
_.me
.css({
position:'absolute',
zIndex:-1
})
.css(_.css[_.aalign=_.align])
_.wrap
.css({
width:'100%',
height:'100%',
position:'fixed',
left:0,
top:0,
overflow:'hidden',
zIndex:-1
})
$(window).trigger('resize')
},
resizeFu:function(){
var wh=_.win.height(),
ww=_.win.width()+1,
k=wh/ww
if(_.aalign!=_.align)
_.me
.css(_.css[_.aalign=_.align])
if(k<_.k)
_.me
.css({
width:ww,
height:ww*_.k
})
else
_.me
.css({
width:wh/_.k,
height:wh
})
},
chngFu:function(str){
$.fn.sImg
?_.me.sImg(str)
:_.img.attr({src:str})
},
init:function(){
_.win=$(window)
_.img=$('img',_.me)
_.me.wrap('<div></div>')
_.wrap=_.me.parent()
_.preFu()
$(window)
.resize(function(){
_.resizeFu()
})
.trigger('resize')
_.navs&&_.navs.data('navs')
&&_.navs.navs(function(n,__){
_.chngFu(__.href)
})
}
}
data?_=data:th.data({bgStretch:_})
typeof o=='object'&&$.extend(_,o)
_.me||_.init(_.me=th)
typeof o=='string'&&_.chngFu(o)
})
return this
}
})
;(function($){
$.fn.sImg=function(o,cb){
var th=$(this),
data=th.data('sImg'),
_={
duration:1,
spinner:true,
preFu:function(){
_.me.css('position')=='static'
&&_.me.css({position:'relative',zIndex:1})
},
chngFu:function(src){
if(src==_.src)
return true
_.src=src
_.buff=_.buff||$('<img>').css({position:'absolute',top:'-999%',left:'-999%'})
if(_.clone&&_.clone.is(':animated'))
_.clone.stop()
if(_.clone)
_.clone.remove()
if(_.spinner!==true)
if(typeof _.spinner=='string')
_.spinner=$(_.spinner).hide()
else
if(typeof _.spinner=='object')
_.spinner
.appendTo(_.me)
.fadeIn()
_.buff
.appendTo('body')
.unbind('load')
.load(function(){
setTimeout(function(){
if(_.img.css('position')=='static')
_.me
.css({
width:_.buff.width(),
height:_.buff.height()
}),
_.img
.css({
position:'absolute',
left:0,
top:0
})
_.clone=_.img.clone()
.css({
position:'absolute',
left:_.img.prop('offsetLeft'),
top:_.img.prop('offsetTop')
})
.appendTo(_.me)
_.spinner
&&_.spinner.fadeOut()
_.img.attr({src:src})
_.clone
.stop()
.animate({
opacity:0
},{
duration:_.duration,
complete:function(){
_.clone.remove()
cb&&cb()
}
})
_.buff.detach()
_.spinner
&&_.spinner.hide()
})
.attr({src:src})
},
init:function(){
_.img=$('>img',_.me)
_.preFu()
}
}
data?_=data:th.data({sImg:_})
typeof o=='object'&&$.extend(_,o)
_.me||_.init(_.me=th)
if(_.spinner!==true)
if(typeof _.spinner=='string')
_.spinner=$(_.spinner).hide()
typeof o=='string'&&_.chngFu(o)
})
return this
}
})
Wyczerpałem już własne pomysły - jeżeli ktoś może mi pomóc i ew. podpowiedzieć co mógłbym dopisać żeby to działało byłbym baardzo wdzięczny (kurier dostarczy sześciopak guinessa w 24h

)