21.10.2012, 03:44
|
|
Новичок на форуме
|
|
Регистрация: 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.
|
|
21.10.2012, 17:42
|
 |
Кандидат Javascript-наук
|
|
Регистрация: 15.09.2011
Сообщений: 143
|
|
|
|
|
21.10.2012, 21:35
|
|
Новичок на форуме
|
|
Регистрация: 21.10.2012
Сообщений: 4
|
|
|
Возможно, только я не понимаю, как его правильно использовать. В этом коде при нажатии на фотографию, галерея должна показывать следующую картинку из массива, а вместо этого, отсчет фотографии всегда начинается со второй картинки. Каким образом можно передать в функцию конкретный элемент массива. Я не знаю, как это побороть.
Последний раз редактировалось MorgenStern, 21.10.2012 в 21:46.
|
|
21.10.2012, 21:58
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
для оформления кода используйте bb-теги [html run] http://javascript.ru/formatting
если в window.onload уже не глобальная
для определения по чему кликнули можно использовать объект event
ну или делайте через this, как посоветовал a_l
PS: а где хотя бы пару фото для тестового примера
Последний раз редактировалось bes, 21.10.2012 в 22:00.
|
|
21.10.2012, 22:10
|
|
Новичок на форуме
|
|
Регистрация: 21.10.2012
Сообщений: 4
|
|
Сообщение от bes
|
для оформления кода используйте bb-теги [html run] http://javascript.ru/formatting
если в window.onload уже не глобальная
для определения по чему кликнули можно использовать объект event
ну или делайте через this, как посоветовал a_l
PS: а где хотя бы пару фото для тестового примера
|
Спасибо за оперативный ответ. Я только недавно приступил к изучению javascript.
Дело в том, что я не понимаю, как передать конкретный элемент массива в функцию nextPhoto, с помощью this.
P.s как добавить картинки сюда? |
|
21.10.2012, 22:19
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
картинки добавляются как обычно в 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
Последний раз редактировалось bes, 21.10.2012 в 22:33.
|
|
21.10.2012, 22:47
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
что-то типа такого
<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>
|
|
22.10.2012, 00:35
|
|
Новичок на форуме
|
|
Регистрация: 21.10.2012
Сообщений: 4
|
|
|
Большое спасибо за помощь, правда. Потому что сижу уже который день, не могу решить эту задачу.
У меня такой вопрос, имеет ли значение, что один элемент, может иметь два события для обработки? И правильно ли это?
|
|
22.10.2012, 10:45
|
|
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
|
Сообщение от MorgenStern
|
|
имеет ли значение, что один элемент, может иметь два события для обработки?
|
один элемент может реагировать на множество событий, а также иметь несколько обработчиков на одно и то же событие (но задать можно не по всякому, а через addEventListener/attachEvent), почитайте про события в учебнике на этом сайте |
|
|
|
