zmienna w js, id dla zdjecia Opcje

[potreb]

Witam, mam taki prosty skrypt w js, niestety nigdy sie nie bawilem w js i juz jako dla mnie to jest abstrakcja!

[PHP] pobierz, plaintext 
<?php
<script type='text/javascript'>
var ss1;
window.onload = function()
{
  // Create slideshow object
  ss1 = new xSlideShow(2000, 'slideshow1', '../../images/',
					   ['avatar.jpg', 'cb_x.gif', 'eyeinhand_75x74.gif', 'mars.gif', 'usflag.jpg', 'veil_nebula.jpg', 'ss.jpg'],
					   ['../../', '../x/lib/', '../../toys', 'vtb_with_tpg.html', 'xanimation.php', 'drag4.php', 'xsplitter.html'],
					   ['Home', 'X Library', "Mike's Toys", 'xTabPanelGroup', 'xAnimation', 'Drag-n-Drop', 'xSplitter']);
 
  // Initialize buttons
  if (ss1) {
	var b = document.getElementById('btnPrev');
	b.onclick = function() { ss1.prev(); };
	b = document.getElementById('btnAuto');
	b.onclick = function() { ss1.start(); };
	b = document.getElementById('btnNext');
	b.onclick = function() { ss1.next(); };
  }
}
/*
  xSlideShow - A simple slideshow object.
 
  uInterval  - The time in milliseconds for auto-slide.
  sImgEleId  - The IMG element in the HTML.
  sImagePath - The path to be prepended to each image file name.
			   It must have a trailing backslash.
  aFiles	 - An array of image file names.
  aLinks	 - An optional array of URLs for when the image is clicked.
  aTitles	- An optional array of titles for each image.
 
  If provided, aLinks and aTitles must have the same length as aFiles.
*/
 
function xSlideShow(uInterval, sImgEleId, sImagePath, aFiles, aLinks, aTitles)
{
  // Private Properties
 
  var ths = this;
  var tmr = null;
  var idx = -1;
  var imgs = []; // zero-based
 
  // Private Methods
 
  function run()
  {
	tmr = setTimeout(run, uInterval);
	ths.next(true);
  }
 
  function onClick()
  {
	// note: In this function, 'this' points to the IMG object
	var t = aTitles ? aTitles[idx] + ': ' : '';
	if (confirm('Do you want to visit the following page?\n' + t + aLinks[idx])) {
	  window.location = aLinks[idx];
	}
  }
 
  // Public Methods
 
  this.start = function()
  {
	if (tmr == null) {
	  run();
	}
	else {
	  this.stop(); // implements a 'toggle'
	}
  };
 
  this.stop = function()
  {
	if (tmr != null) {
	  clearTimeout(tmr);
	  tmr = null;
	}  
  };
 
  this.next = function(bRunning)
  {
	var i = document.getElementById(sImgEleId);
	if (i) {
	  if (!bRunning) {
		// stop auto-slide unless next() is called from run()
		this.stop();
	  }
	  if (++idx >= imgs.length) {
		idx = 0;
	  }
	  i.src = imgs[idx].src;
	  if (aTitles) {
		i.title = aTitles[idx];
	  }
	}
  };
 
  this.prev = function()
  {
	var i = document.getElementById(sImgEleId);
	if (i) {
	  this.stop(); // stop auto-slide
	  if (--idx <= 0) {
		idx = imgs.length - 1;
	  }
	  i.src = imgs[idx].src;
	  if (aTitles) {
		i.title = aTitles[idx];
	  }
	}
  };
 
  this.onunload = function()
  {
	var i = document.getElementById(sImgEleId);
	if (i) {
	  i.onclick = null;
	}
	ths = null;
  };
 
  // Constructor Code
 
  var i;
  i = document.getElementById(sImgEleId);
  if (i) {
	if (aLinks) {
	  i.onclick = onClick;
	}
	for (i = 0; i < aFiles.length; ++i) {
	  imgs[i] = new Image();
	  imgs[i].src = sImagePath + aFiles[i];
	}
	this.next(true); // show first image
  }
  else return null; // error
}
// end xSlideShow Object Prototype
</script>
<div>
<p>
  <span id='btnPrev' class='btn' title='Show Previous'>Previous</span> |
  <span id='btnAuto' class='btn' title='Toggle Auto-Slide'>Auto</span> |
  <span id='btnNext' class='btn' title='Show Next'>Next</span>
</p>
 
<p><img id='slideshow1' src='' alt=''></p>
</div>
?>
[PHP] pobierz, plaintext 

Wyswietla mi zdjecia z jakiegos katalogu. Ale chcialbym aby gdy kline np w miniaturke fotki to pokaze mi sie duze zdjecie, ale tutaj to jest niemozliwe bo nie przekazuje zmiennej id dla zdjecia. Wlasnie nie wiem w jaki sposob dorobic takowa zmienna aby gdy klikne w miniaturke 4 pokaze sie zdjecie 4 5,5. Prosze o jakas pomoc, z gory dziekuje