Добрый день,
Проблема в следующем. При открытии фотографии в больший размер, я не могу написать код, чтобы фотографии в окне перелистывались. Как можно обойтись без глобальной переменной(var index = 0)? Как можно вычислить конкретный элемент массива (фотография, на которую мы кликнули и с нее вести отсчет по массиву фотографий) и передать ее в функцию? Нужна помощь в редактировании функции nextPhoto ()
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="css1.css">
<script type="text/javascript" src="photos.js"></script>
</head>
<body>
<script>
function onPhotoClick () {
var shadow = document.getElementById ('shadow');
var photoWrapper = document.getElementById ('photoWrapper');
var photo = document.getElementById ('photo');
var img = document.getElementById('photo');
img.onclick = nextPhoto;
shadow.style.display = "block";
photoWrapper.style.display = "block";
photo.style.display = "block";
photo.style.backgroundImage = 'url("'+this.src+'")';
}
function hidePhoto () {
var shadow = document.getElementById ('shadow');
var photoWrapper = document.getElementById ('photoWrapper');
var photo = document.getElementById ('photo');
shadow.style.display = "";
photoWrapper.style.display = "";
photo.style.display = "";
}
window.onload = function () {
var img = document.getElementById('photo');
for (var i=0; i < photos.length; i++) {
var img = document.createElement ("IMG")
img.src = "img/china/" + photos[i];
img.onclick = onPhotoClick;
photoContainer.appendChild(img);
}
shadow.onclick = hidePhoto;
}
var index = 0;
function nextPhoto () {
var img = document.getElementById('photo')
index++;
if (index >= photos.length)
index = 0;
img.src = "img/china/" + photos[index]
}
</script>
<h1 align="center">Фотоальбом</h1>
<div align="center" id="photoContainer"></div>
<div id="shadow"></div>
<div id ="photoWrapper">
<div class="photoLinks">
<a href="#">Фотография</a>
<a href="javascript:hidePhoto()" class="photoRightLink">Закрыть</a>
</div>
<div>
<img id="photo">
</div>
</div>
</body>
</html>
Заранее спасибо