Фотогалерея. Перелистывание фотографий.
Добрый день,
Проблема в следующем. При открытии фотографии в больший размер, я не могу написать код, чтобы фотографии в окне перелистывались. Как можно обойтись без глобальной переменной(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>
Заранее спасибо |
Если я вас правильно понял, вам поможет this:
http://javascript.ru/tutorial/object/thiskeyword |
Возможно, только я не понимаю, как его правильно использовать. В этом коде при нажатии на фотографию, галерея должна показывать следующую картинку из массива, а вместо этого, отсчет фотографии всегда начинается со второй картинки. Каким образом можно передать в функцию конкретный элемент массива. Я не знаю, как это побороть.
|
для оформления кода используйте bb-теги [html run] http://javascript.ru/formatting
если в window.onload уже не глобальная для определения по чему кликнули можно использовать объект event ну или делайте через this, как посоветовал a_l PS: а где хотя бы пару фото для тестового примера |
Цитата:
Дело в том, что я не понимаю, как передать конкретный элемент массива в функцию nextPhoto, с помощью this. P.s как добавить картинки сюда? |
картинки добавляются как обычно в html, главное чтобы ссылка была доступна
вот ссылка на мою картинку http://javascript.ru/forum/image.php...ine=1334914235 :) <img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235"> для возможности запуска добавьте run [html run] в принципе это наверное и не надо, все картинки расположены рядом друг с другом, поэтому nextSibling (nextElementSibling) подойдёт <img onclick="nextPhoto(this)"> this указывает на эту картинку я бы сделал через event.target |
что-то типа такого
<style>
body > img {
display: none;
}
body > img:first-child {
display: inline;
}
</style>
<body>
1<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
2<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
3<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
4<img src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<script>
window.onload = function () {
document.body.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.tagName == 'IMG' && target.nextElementSibling.tagName == 'IMG') {
target.style.display = 'none';
target.nextElementSibling.style.display = 'inline';
}
}
}
</script>
|
Большое спасибо за помощь, правда. Потому что сижу уже который день, не могу решить эту задачу.
У меня такой вопрос, имеет ли значение, что один элемент, может иметь два события для обработки? И правильно ли это? |
Цитата:
|
| Часовой пояс GMT +3, время: 11:18. |