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
  1. (function($){
  2. $.fn.bgStretch=function(o){
  3. this.each(function(){
  4. var th=$(this),
  5. data=th.data('bgStretch'),
  6. _={
  7. align:'leftTop',
  8. css:{
  9. leftTop:{
  10. left:0,
  11. right:'auto',
  12. top:0,
  13. bottom:'auto'
  14. },
  15. rightTop:{
  16. left:'auto',
  17. right:0,
  18. top:0,
  19. bottom:'auto'
  20. },
  21. leftBottom:{
  22. left:0,
  23. right:'auto',
  24. top:'auto',
  25. bottom:0
  26. },
  27. rightBottom:{
  28. left:'auto',
  29. right:0,
  30. top:'auto',
  31. bottom:0
  32. }
  33. },
  34. preFu:function(){
  35. _.img
  36. .load(function(){
  37. _.k=_.img.height()/_.img.width()
  38. _.img
  39. .css({
  40. width:'100%',
  41. height:'100%',
  42. position:'absolute',
  43. zIndex:-1,
  44. left:0,
  45. top:0
  46. })
  47. })
  48. _.img[0].complete
  49. &&_.img.trigger('load')
  50. _.me
  51. .css({
  52. position:'absolute',
  53. zIndex:-1
  54. })
  55. .css(_.css[_.aalign=_.align])
  56. _.wrap
  57. .css({
  58. width:'100%',
  59. height:'100%',
  60. position:'fixed',
  61. left:0,
  62. top:0,
  63. overflow:'hidden',
  64. zIndex:-1
  65. })
  66. $(window).trigger('resize')
  67. },
  68. resizeFu:function(){
  69. var wh=_.win.height(),
  70. ww=_.win.width()+1,
  71. k=wh/ww
  72. if(_.aalign!=_.align)
  73. _.me
  74. .css(_.css[_.aalign=_.align])
  75.  
  76. if(k<_.k)
  77. _.me
  78. .css({
  79. width:ww,
  80. height:ww*_.k
  81. })
  82. else
  83. _.me
  84. .css({
  85. width:wh/_.k,
  86. height:wh
  87. })
  88.  
  89. },
  90. chngFu:function(str){
  91. $.fn.sImg
  92. ?_.me.sImg(str)
  93. :_.img.attr({src:str})
  94. },
  95. init:function(){
  96. _.win=$(window)
  97. _.img=$('img',_.me)
  98. _.me.wrap('<div></div>')
  99. _.wrap=_.me.parent()
  100.  
  101. _.preFu()
  102. $(window)
  103. .resize(function(){
  104. _.resizeFu()
  105. })
  106. .trigger('resize')
  107. _.navs&&_.navs.data('navs')
  108. &&_.navs.navs(function(n,__){
  109. _.chngFu(__.href)
  110. })
  111.  
  112. }
  113. }
  114. data?_=data:th.data({bgStretch:_})
  115. typeof o=='object'&&$.extend(_,o)
  116. _.me||_.init(_.me=th)
  117.  
  118. typeof o=='string'&&_.chngFu(o)
  119. })
  120. return this
  121. }
  122. })
  123.  
  124. ;(function($){
  125. $.fn.sImg=function(o,cb){
  126. this.each(function(){
  127. var th=$(this),
  128. data=th.data('sImg'),
  129. _={
  130. duration:1,
  131. sleep:600,
  132. spinner:true,
  133. preFu:function(){
  134. _.me.css('position')=='static'
  135. &&_.me.css({position:'relative',zIndex:1})
  136. },
  137. chngFu:function(src){
  138. if(src==_.src)
  139. return true
  140. _.src=src
  141. _.buff=_.buff||$('<img>').css({position:'absolute',top:'-999%',left:'-999%'})
  142. if(_.clone&&_.clone.is(':animated'))
  143. _.clone.stop()
  144. if(_.clone)
  145. _.clone.remove()
  146. if(_.spinner!==true)
  147. if(typeof _.spinner=='string')
  148. _.spinner=$(_.spinner).hide()
  149. else
  150. if(typeof _.spinner=='object')
  151. _.spinner
  152. .appendTo(_.me)
  153. .fadeIn()
  154. _.buff
  155. .appendTo('body')
  156. .unbind('load')
  157. .load(function(){
  158. setTimeout(function(){
  159. if(_.img.css('position')=='static')
  160. _.me
  161. .css({
  162. width:_.buff.width(),
  163. height:_.buff.height()
  164. }),
  165. _.img
  166. .css({
  167. position:'absolute',
  168. left:0,
  169. top:0
  170. })
  171. _.clone=_.img.clone()
  172. .css({
  173. position:'absolute',
  174. left:_.img.prop('offsetLeft'),
  175. top:_.img.prop('offsetTop')
  176. })
  177. .appendTo(_.me)
  178. _.spinner
  179. &&_.spinner.fadeOut()
  180. _.img.attr({src:src})
  181. _.clone
  182. .stop()
  183. .animate({
  184. opacity:0
  185. },{
  186. duration:_.duration,
  187. complete:function(){
  188. _.clone.remove()
  189. cb&&cb()
  190. }
  191. })
  192. _.buff.detach()
  193. _.spinner
  194. &&_.spinner.hide()
  195. },_.sleep)
  196. })
  197. .attr({src:src})
  198. },
  199. init:function(){
  200. _.img=$('>img',_.me)
  201. _.preFu()
  202. }
  203. }
  204. data?_=data:th.data({sImg:_})
  205. typeof o=='object'&&$.extend(_,o)
  206. _.me||_.init(_.me=th)
  207.  
  208. if(_.spinner!==true)
  209. if(typeof _.spinner=='string')
  210. _.spinner=$(_.spinner).hide()
  211.  
  212. typeof o=='string'&&_.chngFu(o)
  213. })
  214. return this
  215. }
  216. })
  217.  


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 smile.gif )