Показать сообщение отдельно
  #1 (permalink)  
Старый 21.10.2012, 03:44
Новичок на форуме
Отправить личное сообщение для MorgenStern Посмотреть профиль Найти все сообщения от MorgenStern
 
Регистрация: 21.10.2012
Сообщений: 4

Фотогалерея. Перелистывание фотографий.
Добрый день,

Проблема в следующем. При открытии фотографии в больший размер, я не могу написать код, чтобы фотографии в окне перелистывались. Как можно обойтись без глобальной переменной(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>

Заранее спасибо

Последний раз редактировалось MorgenStern, 21.10.2012 в 21:40.
Ответить с цитированием