[DynkanMaclaud]

Ссылка

Нажмите на менюшку --> фото--> там 3 фотки, кликните на первую появится она же в увеличенном изображении, не могу понять как сделать так чтобы при клике на вторую фотку появлялась вторая фотка... чтобы это реализовывалось через одну функцию... а то так для каждой фотки функции писать чтото не очень хорошее решение я так думаю...

вот скрипт который отвечает за открытие большого изображения при клике на маленькое

function foto(){


  
   document.getElementById("img_main").src = images[0]; (Так вставляется изображение из массива номером 0  см. ниже функцию 'number')


var bg=document.getElementById('background');//Получили div с id bg
		button=document.getElementById('test');// Копка на которую кликать
		exit=document.getElementById('close');//Кнопка на закрытие
		paper=document.getElementById('wrapper');
		many=document.getElementById('hoverClose');
		bg.style.display='block';
		exit.style.display='block';
		paper.style.display='block';
		many.style.display="block";
	
	many.onclick= function closer(){
	bg.style.display='none';
	exit.style.display='none';
	paper.style.display='none';
	many.style.display='none';
	
	};
	
	

}

вот функция 'number' для смены изображений при клике

var images = new Array();
    var i = 0;
     
    images[0] = 'images/1.jpg';
    images[1] = 'images/3.jpg';
    images[2] = 'images/4.jpg';
     
  
	
	   function lol() {
        i = i-1;
        if (i < 0) {
            i = images.length-1;
        }
        document.getElementById("img_main").src = images[i];
    };   
	
	 function viewImages() {
        i = i+1;
         if (i == images.length) {
            i = 0;
        }
        document.getElementById("img_main").src = images[i];
        
    };

<div id ="test"class="gallery" onclick="foto()"><div class="inline"><div id ="zoomer"class="zoom"><img id="test2"src="images/search.png"/></div><img id="test2"src="images/1.jpg"/></div></div>

HELP!