У меня проект находится в папке photo. В этой папке есть также 1 папка - example, в папке example находятся еще 3 папки: photo/example/1, photo/example/2 и photo/example/3. Так помогите мне изменить код таким образом, чтобы вот эта фотогалерея открывалась по нажатии картинки и фон затемнялся. И рядом с этой фотогалереей было поле select, где пользователь мог выбирать какие картинки перебирать. Помогите. Желательно всё написать в одной функции с параметрами.
<!DOCTYPE HTML>
<html>
<head>
<title>Галерея</title>
<link rel="stylesheet" type="text/css" href="gallery.css">
<meta charset="utf-8">
</head>
<body>
<p><img id="largeImg" src="img1-lg.jpg" alt="Large image"></p>
<ul id="thumbs">
<!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
<li><a href="img2-lg.jpg" title="Image 2"><img src="img2-thumb.jpg"></a></li>
<li><a href="img3-lg.jpg" title="Image 3"><img src="img3-thumb.jpg"></a></li>
<li><a href="img4-lg.jpg" title="Image 4"><img src="img4-thumb.jpg"></a></li>
<li><a href="img5-lg.jpg" title="Image 5"><img src="img5-thumb.jpg"></a></li>
<li><a href="img6-lg.jpg" title="Image 6"><img src="img6-thumb.jpg"></a></li>
</ul>
[JS]<script>
var largeImg = document.getElementById('largeImg');
var thumbs = document.getElementById('thumbs');
thumbs.onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
while(target != this) {
if (target.nodeName == 'A') {
showThumbnail(target.href, target.title);
return false;
}
target = target.parentNode;
}
}
function showThumbnail(href, title) {
largeImg.src = href;
largeImg.alt = title;
}
/* предзагрузка */
var imgs = thumbs.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
var url = imgs[i].parentNode.href;
var img = document.createElement('img');
img.src = url;
}
</script>[/JS]
</body>
</html>
