Witam, mam mały problem z skryptem SlideShow.
A mianowicie chcę zrobić coś takiego:

Ale nie wiem jak dodać w moim skrypcie boczne przyciski, mam jeden i wszystko ładnie działa, ale nie wiem jak dodać resztę.
Aktualnie wygląda to tak:



index.php:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <link href="slide.css" rel="stylesheet" type="text/css" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  6. </head>
  7. <body bgcolor="#FFFFFF">
  8.  
  9. <table width="666" height="249" border="0" cellpadding="0" cellspacing="0">
  10. 	<tr>
  11. 		<td>
  12. <ul id="slideshow">
  13. 		<li>
  14. 			<h3 style="font-family: verdana,tahoma;">Weddings & Other Events</h3>
  15. 			<span>photos/menu_01.png</span>
  16. 			<p style="font-family: verdana,tahoma;"></p>
  17. 			<a href="../projekty/adnex"><img src="thumbnails/menu_02.png" alt="Adnex" /></a>
  18. 		</li>
  19. 		<li>
  20. 			<h3 style="font-family: verdana,tahoma;">Adnex</h3>
  21. 			<span>photos/menu_01.png</span>
  22. 			<p style="font-family: verdana,tahoma;">Projekt strony internetowej wykonany dla firmy usługodawczej Adnex.pl</p>
  23. 			<a href="../projekty/adnex"><img src="thumbnails/menu_03.png" alt="Adnex" /></a>
  24. 		</li>
  25. </ul>
  26.  
  27. 		</td>
  28. 		<td>
  29. 	<div id="wrapper">
  30. 		<div id="fullsize">
  31. 			<div id="imgprev" class="imgnav" title="Poprzedni projekt"></div>
  32. 			<div id="imglink"></div>
  33. 			<div id="imgnext" class="imgnav" title="Następny projekt"></div>
  34. 			<div id="image"></div>
  35. 			<div id="information">
  36. 				<h3></h3>
  37. 				<p></p>
  38. 			</div>
  39. 		</div>
  40. 		</td>
  41. 		<td>
  42. 		</div>
  43. 	<div id="thumbnails">
  44. 			<div id="slideleft" title="Przesuń w lewo"></div>
  45. 			<div id="slidearea">
  46. 				<div id="slider"></div>
  47. 			</div>
  48. 			<div id="slideright" title="Przesuń w prawo"></div>
  49. 		</div>
  50. 		</td>
  51. 	</tr>
  52. </table>
  53. <script type="text/javascript" src="compressed.js"></script>
  54. <script type="text/javascript">
  55. 	$('slideshow').style.display='none';
  56. 	$('wrapper').style.display='block';
  57. 	var slideshow=new TINY.slideshow("slideshow");
  58. 	window.onload=function(){
  59. 		slideshow.auto=true;
  60. 		slideshow.speed=5;
  61. 		slideshow.link="linkhover";
  62. 		slideshow.info="information";
  63. 		slideshow.thumbs="slider";
  64. 		slideshow.left="slideleft";
  65. 		slideshow.right="slideright";
  66. 		slideshow.scrollSpeed=4;
  67. 		slideshow.spacing=5;
  68. 		slideshow.active="#fff";
  69. 		slideshow.init("slideshow","image","imgprev","imgnext","imglink");
  70. 	}
  71. </script>
  72.  
  73. </body>
  74. </html>
[HTML] pobierz, plaintext


slide.css:
[HTML] pobierz, plaintext 
  1. body {margin:0px; padding:0px; font:11px Verdana,Arial}
  2. #slideshow {list-style:none; color:#fff}
  3. #slideshow span {display:none}
  4. #wrapper {width:380px; margin:0px; display:none}
  5. #wrapper * {margin:0; padding:0}
  6. #fullsize {position:relative; width:380px; height:249px; padding:0px; border:0px solid #ccc; background:#fff}
  7. #information {position:absolute; bottom:0; width:380px; height:249; background:#333; color:#fff; overflow:hidden; z-index:200; opacity:.9; filter:alpha(opacity=70)}
  8. #information h3 {padding:4px 8px 3px; font-size:14px}
  9. #information p {padding:0 8px 8px}
  10. #image {width:380px}
  11. #image img {position:absolute;}
  12. .imgnav {position:absolute; width:25%; height:249px; cursor:pointer; z-index:150}
  13. #imgprev {left:0; background:url(images/left.gif) left center no-repeat}
  14. #imgnext {right:0; background:url(images/right.gif) right center no-repeat}
  15. #imglink {position:absolute; height:249px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)}
  16. .linkhover {background:url(images/link.gif) center center no-repeat}
  17. #thumbnails {margin-top:0px}
  18.  
  19. #slideleft {float:left; width:0px; height:249px; background:url(images/scroll-left.gif) center center no-repeat; background-color:#fff}
  20. #slideleft:hover {background-color:#fff}
  21. #slideright {float:right; width:20px; height:0px; background:#fff url(images/scroll-right.gif) center center no-repeat}
  22. #slideright:hover {background-color:#fff}
  23. #slidearea {float:left; position:relative; width:286px; padding-left: 0px; margin-left:0px; height:249px; overflow:hidden}
  24. #slider {position:absolute; left:0; height:249px}
  25. #slider img {cursor:pointer; border:0px solid #666; padding:0px}
[HTML] pobierz, plaintext


compressed.js:
[HTML] pobierz, plaintext 
  1. var TINY={};function $(i){return document.getElementById(i)}function $$(e,p){p=p||document;return p.getElementsByTagName(e)}TINY.slideshow=function(n){this.infoSpeed=this.imgSpeed=this.speed=10;this.thumbOpacity=this.navHover
    =70;this.navOpacity=25;this.scrollSpeed=5;this.letterbox='#000';this.n=n;this.c=0;this.a=[]};TINY.slideshow.prototype={init:function(s,z,b,f,q){s=$(s);var m=$$('li',s),i=0,w=0;this.l=m.length;this.q=$(q);this.f=$(z);this.r=$(this.info);this.o=parseInt(TINY.style.val(z,'width'));if(this.thumbs){var u=$(this.left),r=$(this.right);u.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",-1,'+this.scrollSpeed+')');u.onmouseout=r.onmouseout=new Function('TINY.scroll.cl("'+this.thumbs+'")');r.onmouseover=new Function('TINY.scroll.init("'+this.thumbs+'",1,'+this.scrollSpeed+')');this.p=$(this.thumbs)}for(i;i<this.l;i++){this.a[i]={};var h=m[i],a=this.a[i];a.t=$$('h3',h)[0].innerHTML;a.d=$$('p',h)[0].innerHTML;a.l=$$('a',h)[0]?$$('a',h)[0].href:'';a.p=$$('span',h)[0].innerHTML;if(this.thumbs){var g=$$('img',h)[0];this.p.appendChild(g);w+=parseInt(g.offsetWidth);if(i!=this.l-1){g.style.marginRight=this.spacing+'px';w+=this.spacing}this.p.style.width=w+'px';g.style.opacity=this.thumbOpacity/100;g.style.filter='alpha(opacity='+this.thumbOpacity+')';g.onmouseover=new Function('TINY.alpha.set(this,100,5)');g.onmouseout=new Function('TINY.alpha.set(this,'+this.thumbOpacity+',5)');g.onclick=new Function(this.n+'.pr('+i+',1)')}}if(b&&f){b=$(b);f=$(f);b.style.opacity=f.style.opacity=this.navOpacity/100;b.style.filter=f.style.filter='alpha(opacity='+this.navOpacity+')';b.onmouseover=f.onmouseover=new Function('TINY.alpha.set(this,'+this.navHover+',5)');b.onmouseout=f.onmouseout=new Function('TINY.alpha.set(this,'+this.navOpacity+',5)');b.onclick=new Function(this.n+'.mv(-1,1)');f.onclick=new Function(this.n+'.mv(1,1)')}this.auto?this.is(0,0):this.is(0,1)},mv:function(d,c){var t=this.c+d;this.c=t=t<0?this.l-1:t>this.l-1?0:t;this.pr(t,c)},pr:function(t,c){clearTimeout(this.lt);if(c){clearTimeout(this.at)}this.c=t;this.is(t,c)},is:function(s,c){if(this.info){TINY.height.set(this.r,1,this.infoSpeed/2,-1)}var i=new Image();i.style.opacity=0;i.style.filter='alpha(opacity=0)';this.i=i;i.onload=new Function(this.n+'.le('+s+','+c+')');i.src=this.a[s].p;if(this.thumbs){var a=$$('img',this.p),l=a.length,x=0;for(x;x<l;x++){a[x].style.borderColor=x!=s?'':this.active}}},le:function(s,c){this.f.appendChild(this.i);var w=this.o-parseInt(this.i.offsetWidth);if(w>0){var l=Math.floor(w/2);this.i.style.borderLeft=l+'px solid '+this.letterbox;this.i.style.borderRight=(w-l)+'px solid '+this.letterbox}TINY.alpha.set(this.i,100,this.imgSpeed);var n=new Function(this.n+'.nf('+s+')');this.lt=setTimeout(n,this.imgSpeed*100);if(!c){this.at=setTimeout(new Function(this.n+'.mv(1,0)'),this.speed*1000)}if(this.a[s].l!=''){this.q.onclick=new Function('window.location="'+this.a[s].l+'"');this.q.onmouseover=new Function('this.className="'+this.link+'"');this.q.onmouseout=new Function('this.className=""');this.q.style.cursor='pointer'}else{this.q.onclick=this.q.onmouseover=null;this.q.style.cursor='default'}var m=$$('img',this.f);if(m.length>2){this.f.removeChild(m[0])}},nf:function(s){if(this.info){s=this.a[s];$$('h3',this.r)[0].innerHTML=s.t;$$('p',this.r)[0].innerHTML=s.d;this.r.style.height='auto';var h=parseInt(this.r.offsetHeight);this.r.style.height=0;TINY.height.set(this.r,h,this.infoSpeed,0)}}};TINY.scroll=function(){return{init:function(e,d,s){e=typeof e=='object'?e:$(e);var p=e.style.left||TINY.style.val(e,'left');e.style.left=p;var l=d==1?parseInt(e.offsetWidth)-parseInt(e.parentNode.offsetWidth):0;e.si=setInterval(function(){TINY.scroll.mv(e,l,d,s)},20)},mv:function(e,l,d,s){var c=parseInt(e.style.left);if(c==l){TINY.scroll.cl(e)}else{var i=Math.abs(l+c);i=i<s?i:s;var n=c-i*d;e.style.left=n+'px'}},cl:function(e){e=typeof e=='object'?e:$(e);clearInterval(e.si)}}}();TINY.height=function(){return{set:function(e,h,s,d){e=typeof e=='object'?e:$(e);var oh=e.offsetHeight,ho=e.style.height||TINY.style.val(e,'height');ho=oh-parseInt(ho);var hd=oh-ho>h?-1:1;clearInterval(e.si);e.si=setInterval(function(){TINY.height.tw(e,h,ho,hd,s)},20)},tw:function(e,h,ho,hd,s){var oh=e.offsetHeight-ho;if(oh==h){clearInterval(e.si)}else{if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}}}}}();TINY.alpha=function(){return{set:function(e,a,s){e=typeof e=='object'?e:$(e);var o=e.style.opacity||TINY.style.val(e,'opacity'),d=a>o*100?1:-1;e.style.opacity=o;clearInterval(e.ai);e.ai=setInterval(function(){TINY.alpha.tw(e,a,d,s)},20)},tw:function(e,a,d,s){var o=Math.round(e.style.opacity*100);if(o==a){clearInterval(e.ai)}else{var n=o+Math.ceil(Math.abs(a-o)/s)*d;e.style.opacity=n/100;e.style.filter='alpha(opacity='+n+')'}}}}();TINY.style=function(){return{val:function(e,p){e=typeof e=='object'?e:$(e);return e.currentStyle?e.currentStyle[p]:document.defaultView.getComputedStyle(e,null).getPropertyValue(p)}}}();
[HTML] pobierz, plaintext


Byłby ktoś w stanie pomóc ?

EDIT: Już sobie poradziłem, można zamknąć biggrin.gif