Простая галерея. Нужна помощь

[Grafkote]

У меня сложилась проблема с написанием первого скрипта на JS.
Мне нужна галерея но простым языком. В сети видел либо ссылки на библиотеки, либо написано с сокращениями непонятными мне. Прошу поясните какие должны быть действия.

есть n картинок, нужно что бы при нажатии открывался див поверх контента и посередине было увеличенное изображение.

var a=new Array();
a[0].src = "foto1.jpg";
a[1].src = "foto2.jpg";
a[2].src = "foto3.jpg";


function showDiv (image)
{	       
 d = document.createElement('div');
 d.className='backdiv';
 document.body.appendChild(d);
 d.HTMLstr+="<img src=\"по идее тут как-то надо вписать массив?\">\n";
 document.body.style.overflow = 'hidden';
}

<img  id="photo1" src="foto1.jpg" OnClick="showDiv(this)"/>
<img  id="photo2" src="foto2.jpg" OnClick="backDiv(this)"/>
<img  id="photo3" src="foto3.jpg" OnClick="backDiv(this)"/>

Див поверх контента открывается но изображение никак не получается вывести.

[Ervin]

function showDiv (image) {
 var el = document.createElement("DIV"),
      img = document.createElement("IMAGE");
 
 el.className = "backdiv";
 img.src =  image.id + "_big.jpg";
 el.appendChild(img);
 document.body.appendChild(el);
}

Массив тут не нужен. Просто брать id с картинки по которой нажали и загружать эту картинку в большом размере.

[Grafkote]

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

img.src =  image.id + "_big.jpg";

Сейчас сделал для одной выдает ошибку:

OnClick="showDiv(this) либо Null, либо не определено.

[tsigel]

Сделайте скрытый див, который будете показывать при увеличении картинка (например с id div) в него положите img с id, например img, далее при клике на картинку просто раскрывайте скрытый див. В каждой картинке можно положить ссылку на её большую копию. Это будет выглядеть примерно так:

var div = document.getElementById('div'), img = document.getElementById('img');

function showBigImage() {
  div.style.display = 'block'; // раскрываем блок (обычно пишу с jQuery могу путать)
  img.src = this.getAttribute('name'); // задали картинке путь к большой картинке
}

Верстка:

<div id='div' style='display: none'><img src='#'></div>
<img src='images/img1.jpg' name='images/img1_big.jpg' onclick='showBigImage'>
<img src='images/img2.jpg' name='images/img2_big.jpg' onclick='showBigImage'>

Ну и ещё можно по клику на document скрывать большую картику.