2

我正在从头开始制作照片查看器，它工作正常，除了一些事情。

代码如下：

首先，我有当前相册的 ID，并打印属于该照片的所有图像。然后，当用户单击照片时，发生了这种情况：

    var loaded = [];
    var albums = [];
        var album_id = ALBUM ID
    var cur_pic = 0;
    var alb_name = ''; 
    $('.photo').click(function(){
    var cover_photo = $(this).attr('id').replace("911","");


        albums[album_id] = [];

        $('#photo_preview .pleft').html('<img src="'+cover_photo+'"/>');
        $('#photo_preview').show();


    $.ajax({
        type: 'POST',
        url: "photo_ajax.php",
        dataType:'json',
        data: 'action=get_info' + $('#aid').val().replace("aid",""),    
        success: function(data){

        loaded[album_id] = true;
        albums[album_id] = data;

    $('#photo_preview .pleft').html('<img src="'+albums[album_id][0]['ImagePath']+'"/>'); // The first photo you click on, will be the first photo to see :)
       $('#photo_preview').show();

            }
        })
//  }       
});

// Loading images and make them visible in the popup...

function loadNextImage(album_id, step){
function loadNextImage(album_id, step){

var next_pic = 0;

        if(step == 0){

            next_pic = 0;

        }else if(step == 'next'){


            next_pic = parseInt(cur_pic, 10)+1;
            cur_pic = next_pic;

        if(next_pic >= albums[album_id].length){
                next_pic = 0;
            }

        }else{

            next_pic = parseInt(cur_pic, 10)-1;

            if(next_pic < 0){
                next_pic = albums[album_id].length - 1;
            }
        }
        cur_pic = next_pic;

        $('#photo_preview .pleft').html('<img src="'+albums[album_id][next_pic]['ImagePath']+'"/>');
    }


// Loading the next image in the JSON array...:

    $(".preview_next").click(function(){

        loadNextImage(album_id, 'next');

    });


// Loading the previous image in the JSON array...:

    $(".preview_prev").click(function(){

        loadNextImage(album_id, 'prev');

    });

在 photo_ajax.php 中：

    $i = 0; $album = array();

    foreach( $aImageInfo as $row ){

            $album[$i] = array();

            $album[$i]['ImageID'] = $row['ImageID'];

            $album[$i]['ImagePath'] = $row['ImagePath'];

            $album[$i]['ImageDate'] = $row['ImageDate'];

            $album[$i]['ImageDescription'] = $row['ImageDescription'];

            $i++;
        }
        echo json_encode($album);

这是有效的，但我现在的问题是：

  1. var cur_pic = 0; 设置为 0，意味着它将开始显示 json 数组中的第一张照片。我需要修复它，以便我可以在数组中找到我刚刚单击的照片的女巫编号，这样它就可以从那个位置开始查看和计数。

  2. 这现在只能在专辑中使用。假设我在另一页上可以看到一张照片。如何解决这个问题 - 当我点击它时 - 照片是可见的，我可以获得整个 json 数组，并浏览与我点击的照片属于同一相册的所有图像。

直接的例子。说 Facebook 或 Twitter。你在墙上有一张照片。单击它，您可以浏览整个专辑。

怎么解决？

4

1 回答 1

1

今天早上我有点困惑，但现在答案很清楚了。需要做的第一件事是将图像 ID 发送到打开图像查看器的 jquery 函数中。然后，当我从 AJAX 调用返回结果时，我很简单地这样做：

for(var i = 0; i < albums[album_id].length; i++) {

    if(albums[album_id][i]['ImageID'] == imgId){

        var newStep = i;    
    }
}

然后我会在 json 数组中得到正确的位置。然后我可以跟进，并使用以下代码获取正确的照片：

albums[album_id][newStep]['ImagePath']

如果我想在相册外部查看照片时获得相同的结果 - 在单个页面上。解决方案现在应该很清楚了。我同时发送相册的 ID 和照片的 ID。然后我以同样的方式使用 AJAX 并获取 JSON 数组。

并让用户看到照片。用户现在可以在相册中导航而不会看到其他图像，因为它们在数组中。

一点额外的。为了获得这样的导航信息：110 张照片中的第 20 张，我这样做了：

$('#PhotoViewerBottomBarContent').html(parseInt(cur_pic+1)+' of '+albums[album_id].length);

我必须 +1，因为数组总是以 0 开头。

所以解决方案很简单:)

于 2012-07-14T15:13:53.853 回答