Здравствуйте, я пытаюсь создать онлайн фоталбум. Таким образом, идея состоит в том, чтобы иметь изображение и два элемента с событием onclick для загрузки следующего и предыдущего изображения в альбом.
Я создал функцию для этого, но она работает только один раз. Если вы нажмете предыдущую или следующую кнопку, онклик будет выполнен, но свойства онклика не изменятся, и простое окно оповещения сообщит мне, что код не выполняется во второй раз.
Прошу прощения за голландский язык в моем коде фото должно быть Фото!
Мой HTML выглядит следующим образом.
<div id="fotolarge">
<span class="arrow arrowright"></span>
<span class="arrow arrowleft"></span>
<span id="fotoloading"></span>
<img id="foto"/>
</div>
Мой JavaScript выглядит так
function loadPhoto(src){
$("#fotoloading").css("z-index","3");
$currentIndex = jQuery.inArray(src, $photoArray);
//next image
$nextIndex = $currentIndex + 1;
if($nextIndex < $photoArrayLength){
$(".arrowright").attr("onclick", "loadPhoto('" + $photoArray[$nextIndex] + "')");
}
else{
$(".arrowright").attr("onclick", "loadPhoto('" + $photoArray[0] + "')");
}
//previous image
$previousIndex = $currentIndex - 1;
if($previousIndex >= 0){
$(".arrowleft").attr("onclick", "loadPhoto('" + $photoArray[$previousIndex] + "')");
}
else{
$(".arrowleft").attr("onclick", "loadPhoto('" + $photoArray[$photoArrayLength -1] + "')");
}
var loader = new ImageLoader(src);
loader.loadEvent = function(url, image){
$("#fotoloading").css("z-index","2");
$("#foto").replaceWith(image);
$("#foto").css("display", "block");
calcmiddle();
}
loader.load();
}
Переменные $ photoArray и $ photoArrayLength являются глобальными переменными.
$ photArray содержит список источников изображений.
Imageloader не является проблемой, потому что он тоже не работает, если эта часть закомментирована.
Надеюсь, у кого-то есть идея, как это исправить. Я пробовал jquery .click (), как это
$(".arrowright").click(function(){
loadPhoto($photoArray[0]);
});
Тогда это работает частично. Создает в бесконечном цикле выполнения loadPhoto ();