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

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

Обязательное условие: изобрести велосипед, т.е. jQuery и инкубаторские плагины к нему не использовать.

Пример того, что получилось

Если пример вас устраивает, то делаем следующее:

1. Все содержимое тега BODY убираем в DIV с id="layout".

2. В конце страницы, перед закрывающим тегом BODY вставляем такой код:

<TABLE id="big_img"><TR><TD align="center"><TABLE><TR><TD id="here_img"></TD></TR></TABLE></TD></TR></TABLE>

3. Привьюшки публикуем таким образом:

<p><IMG class="tn-image" src="images/tn1.jpg" onclick=BigImg("open","images/1.jpg"); /><IMG class="tn-image" src="images/tn2.jpg" onclick=BigImg("open","images/2.jpg"); /><IMG class="tn-image" src="images/tn3.jpg" onclick=BigImg("open","images/3.jpg"); /><IMG class="tn-image" src="images/tn4.jpg" onclick=BigImg("open","images/4.jpg"); /><IMG class="tn-image" src="images/tn5.jpg" onclick=BigImg("open","images/5.jpg"); /><IMG class="tn-image" src="images/tn6.jpg" onclick=BigImg("open","images/6.jpg"); /><IMG class="tn-image" src="images/tn7.jpg" onclick=BigImg("open","images/7.jpg"); /></p>

4. Если необходима возможность перехода к другим изображениям, то создаем массив путей к увеличенным изображениям:

<script> var arr_images = new Array("images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg"); </script>

5. Скачиваем архив с примером, берем из него JavaScript и CSS, и между тегами HEAD прописываем пути к ним:

<script type="text/javascript" src="gallery.js"></script> <link rel="stylesheet" href="gallery.css" type="text/css" />

6. В CSS правим путь к изображению bg-bi.png.

Все. Смотрим что получилось, кликаем на привьюшки и наслаждаемся.
Если по каким-то причинам вы не хотите убирать содержимое BODY в DIV, то используйте файл gallery2.css из архива с примером.